VUE实战-知乎日报(2)

配置基本html,main.js

html代码如下：只要引入main.js即可

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Webpack App</title><link rel="stylesheet" type="text/css" href="/dist/main.css">
</head>
<body><div id="app"></div><script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

js部分做到渲染：

import Vue from 'vue';
import App from './app.vue';
import './style.css';new Vue({el: '#app',render: h => {return h(App)}
});

然后就是vue组件开发:

首先对知乎日报进行分析：日报是单页应用，由三部分组成，菜单，文章列表，文章内容以及评论

因为内容来自知乎，所以设置一个代理API来获取知乎内容，通过 NPM install request --save-dev来代理，

代理文件为proxy.js。

代码如下：

const http=require('http');
const request=require('request');
const hostname='127.0.0.1';//代理主机号，此处是本机
const port=8010;//接口端口
const imgPort=8011;//图片端口
//创建一个API代理服务
const apiServer=http.createServer((req,res)=>{const url='http://news-at.zhihu.com/api/4' +req.url;//获取服务的urlconst options={
url:url};
function callback(error,reponse,body){if(!error&&response.statusCode===200){//设置编码类型
res.setHeader('Conten-Type','text/plain;charset=UFT-8');
//设置所有域允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//返回代理后的内容
res.end(body);
}
}
request.get(options,callback);
}};
//监听8010
apiServer.listen(port, hostname, () => {console.log(`接口代理运行在 http://${hostname}:${port}/`);
});
// 创建一个图片代理服务
const imgServer = http.createServer((req, res) => {const url = req.url.split('/img/')[1];const options = {url: url,encoding: null};function callback (error, response, body) {if (!error && response.statusCode === 200) {const contentType = response.headers['content-type'];res.setHeader('Content-Type', contentType);res.setHeader('Access-Control-Allow-Origin', '*');res.end(body);}}request.get(options, callback);
});
// 监听 8011 端口
imgServer.listen(imgPort, hostname, () => {console.log(`图片代理运行在 http://${hostname}:${imgPort}/`);
});

这里使用axios 模块来做AJAX获取数据

Util.js

import axios from 'axios';const Util = {imgPath: 'http://127.0.0.1:8011/img/',apiPath: 'http://127.0.0.1:8010/'
};// 获取今天时间戳
Util.getTodayTime = function () {const date = new Date();date.setHours(0);date.setMinutes(0);date.setSeconds(0);date.setMilliseconds(0);return date.getTime();
};// 获取上一天日期
Util.prevDay = function (timestamp = (new Date()).getTime()) {const date = new Date(timestamp);const year = date.getFullYear();const month = date.getMonth() + 1 < 10? '0' + (date.getMonth() + 1): date.getMonth() + 1;const day = date.getDate() < 10? '0' + date.getDate(): date.getDate();return year + '' + month + '' + day;
};// Ajax 通用配置
Util.ajax = axios.create({baseURL: Util.apiPath
});// 添加响应拦截器
Util.ajax.interceptors.response.use(res => {return res.data;
});export default Util;

首先菜单组件：

  <div class="daily-menu"><div class="daily-menu-item"@click="handleToRecommend":class="{ on: type === 'recommend' }">每日推荐</div><div class="daily-menu-item":class="{ on: type === 'daily' }"@click="showThemes = !showThemes">主题日报</div><ul v-show="showThemes"><li v-for="item in themes" :key="item.id"><a:class="{ on: item.id === themeId && type === 'daily' }"@click="handleToTheme(item.id)">{{ item.name }}</a></li></ul></div>
<script>
import $ from '../libs/Util.js'handleToRecommend () {this.type = 'recommend';this.recommendList = [];this.dailyTime = $.getTodayTime();this.getRecommendList();},handleToTheme (id) {this.type = 'daily';this.themeId = id;this.list = [];$.ajax.get('theme/' + id).then(res => {this.list = res.stories.filter(item => item.type !== 1);})}</script>

VUE实战-知乎日报(2)相关推荐

VUE实战知乎日报源码以及BUG分析
源码已上传至https://github.com/anymouschina/daily, 下载后请先 npm install npm run dev 记住开启代理服务,即在当前文件下的终端下使用 no ...
vue3项目实战---知乎日报----项目搭建
目录基础框架和响应式布局项目介绍接口文档 vue.config pagejson 初始化公共样式 vuex模块路由模块 utils公共类库 axios 二次封装响应式处理 && ...
vue3项目实战---知乎日报----首页样式结构
目录页面效果 header头部轮播图swiper 新闻列表 loading效果超大屏按照750处理 app.vue Home.vue 页面效果模块拆分 header头部 swiper轮播图 i ...
vue3项目实战---知乎日报----首页功能
目录网络请求封装 header swiper items新闻列表. home IntersectionObserver API 使用教程性能优化网络请求封装 GET传参格式 www.baidu. ...
vue3项目实战---知乎日报----登录页
目录网络请求 vuex 封装标题栏登录页网络请求 poist请求通过body主体发送 (对象)默认json 其他格式在transformRequest中配置每次发送请求携带token axi ...
vue-zhihu-daily知乎日报
这是一个基于Vue全家桶开发的知乎日报WebApp,页面样式主要参考iOS版知乎日报APP.https://github.com/cccyb/vue-zhihu-daily/blob/master/R ...
php微信开发例子,微信开发实战之知乎日报
前言看了那么多的小程序入门,想必各位看官也差不多对小程序已经有了一定的了解.这篇文章就不再主讲入门,现在我们要通过一个知乎日报的小程序去实践一下,加深对微信小程序API的理解. 好了,下面我们开始吧 ...
使用Vue前端框架实现知乎日报app
使用Vue前端框架实现知乎日报app 这是:主页代码 <template><view class="content"><view class=&quo ...
php使用接口知乎,【微信服务号开发】03.实战回复知乎日报，返回8个最新知乎日报图文消息...
实战回复知乎日报,返回8个最新知乎日报图文消息使用接口知乎日报接口使用php的get请求知乎日报接口curl 类实现 class Curl { /** * cur get * @param [ ...

VUE实战-知乎日报(2)

VUE实战-知乎日报(2)相关推荐

最新文章

热门文章