Vue.js入门 0x11 实战：知乎日报项目开发-准备分析

下载基础项目

    下载demo，复制至新建daily目录

安装webpack依赖

npm install babel@6.23.0 --save-dev
npm install babel-core@6.24.0 --save-dev
npm install babel-loader@6.4.1 --save-dev
npm install babel-plugin-transform-runtime@6.23.0 --save-dev
npm install  babel-preset-es2015@6.24.0 --save-dev
npm install  babel-runtime@6.23.0 --save-dev
npm install  css-loader@0.27.3 --save-dev
npm install  extract-text-webpack-plugin@2.1.0 --save-dev
npm install  file-loader@0.10.1 --save-dev
npm install  html-webpack-plugin@2.28.0 --save-dev
npm install  style-loader@0.16.1 --save-dev
npm install  url-loader@0.5.8 --save-dev
npm install  vue-hot-reload-api@2.0.11 --save-dev
npm install  vue-loader@11.3.4 --save-dev
npm install  vue-style-loader@2.0.5 --save-dev
npm install  vue-template-compiler@2.2.6 --save-dev
npm install  webpack@2.3.2 --save-dev
npm install  webpack-dev-server@2.4.2 --save-dev
npm install  webpack-merge@4.1.0 --save-dev

正题

    知乎日报的接口地址前缀为http://news-at.zhihu.com/api/4/,图片地址前缀为https://pic1.zhimg.com,由于两者都开启跨域限制，无法在前端直接调用，因此需要开发一个代理。

    安装request做代理

npm install request --save-dev

   在daily目录下新建一个proxy.js的文件

//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://new-at.zhihu.com/api/4'+req.url;
    const options = {
        url:url
    };
    function callback(error,response,body) {
        if(!error&&response.statusCode === 200){
            //设置编码类型
            res.setHeader('Content-Type','text/plain;charset=UTF-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}/`);
});

    在终端使用Node启动代理服务

   对于接口的Ajax请求，前端有很多实现方案，如jQuery的$.ajax,但是只为使用Ajax而引入一个jQuery显然不太友好。vue中推荐使用axios。axios是基于Promise的HTTP库，同时支持前端和Node.js

    安装

npm install axios --save

    在daily目录下新建目录libs，在这个文件夹下面新建util.js,项目中使用的工具函数可以在这里封装。

    如对axios封装，写入请求地址的前缀，在业务中只用写相对路径，这样可以灵活控制。另外，可以全局拦截axios返回的内容，简单处理，返回我们需要的数据。

// /libs/util.js
import axios from 'axios';
//基本配置
const Util = {
    imgPath:'http://127.0.0.1:8011/img/',
    apiPath:'http://127.0.0.1:8010/'
};
//Ajax通用配置
Util.ajax = axios.create({
    baseURL:Util.apiPath
});
//添加响应拦截器
Util.ajax.interceptors.response.use(res=>{
    return res.data;
});
export default Util;