Vue mock & vue-resource & JSONP

前提

为什么要运用Mock模拟数据？直接将数据放在data内部不就可以了吗？这样显得数据过多，后期不利于维护。

直接在某个文件夹下创建json文件模拟，不就可以了吗？但是你还要计算url相对于某个文件，好像也挺麻烦的。

相当而言我更喜欢mock..

入门

1. 在src目录下创建一个mock文件夹，在该文件夹内部创建相关的data.json文件。
2. 在build配置文件夹下找到dev-server.js文件，在内部引入你的json文件，可以按照相关的数据进行分类。
3. 再找到var app = express()这一行，定义一个接口api
4. 接口连接json数据
5. 最后根组件连接该接口api

看文字肯定很难理解的啦，以下根据图来讲解。

步骤一、

模拟的json文件..

步骤二、

步骤三、

步骤四、

步骤五、

步骤六、
这样就完成啦，打开localhost:port/people/suoz，输出这样的数据

注：如果你需要格式化数据看得更方便点，chrome有一个jsonview插件可以帮助你。

注：如果你想分为localhost:port/student/suoz 与 localhost:port/teacher/lisi。那么你需要分别设置两个apiRouter，在通过app.use(‘/student’,apiRouter1)、app.use(‘teacher’, apiRouter2)即可实现啦。

参考文章

Vue-cli项目怎么mock数据

Vue-Resource

越来越多的数据格式是json格式，而且在jquery框架里面有个ajax可以实现前后端数据的传输。
在vue内部也提供了一个类似的插件，并且api更加简洁易用，压缩后体积更小。

一般可以放在created()钩子函数中使用

安装

npm install vue-resource  

步骤

1. 引入vue-resource

import Vue from 'vue'import VueResource from 'vue-resource'Vue.use(VueResource)

1. 在某个组件内部created钩子函数内部进行数据的获取

...created () {    this.$http.get('/people/suoz').then((response) => {        console.log(response.data);    }, () => {        console.log('error');    });} ...

注：这里的this指向Vue实例，而且也不止是get方法，还有post等方法。
注：这里获取的是使用mock获取数据，所以url是/people/suoz

this.$http.get(url,[options]).then(successCallback,errorCallback)

options：传递给后端的数据
successCallback：成功执行的回调函数（可以使用箭头函数）
errorCallback：失败执行的回调函数（可以使用箭头函数）

参考文章

ajax请求插件vue-resource的学习

axios

其实与vue-resource使用方法差不多，都需要安装，引入，相关数据的获取。后期运用到会补充。

axios.get(url,{    params: {        //[可选] 相关参数    },    headers: {        //[可选] 修改HTTP resquest字段    }}).then((response) => {    //成功回调函数}).catch((error) => {    //失败回调函数});

注：可以通过第二个参数对象内部添加header键，对HTTP请求字段进行修改。

相关介绍

github axios

JSONP

这里我就不多说了..如果不了解跨域 & jsonp原理请自行百度吧..

前提

npm install jsonp --save-dev

Jsonp封装函数

//jsonp.jsimport originJsonp from 'jsonp';//Jsonp封装函数export default function jsonp(url, data, option){    if((url.indexOf('?') < 0)){        url += '?' + param(data);    }else{        url += '&' + param(data);    }    return new Promise((resolve, reject) => {        originJsonp(url, option, (err, data) => {            if(!err){                resolve(data);            }else{                reject(err);            }        });    });}//传进来的data对象 => &key1=value1&key2=value2...export function param(data){    let url = '';    for(let i in data){        let value = data[i];        url += '&' + i + '=' + encodeURIComponent(value);    }    return url ? url.substring(1) : ''; }

//使用jsonp获取数据import {commonParam} from 'config.js';import jsonp from 'jsonp.js';...mounted () {    let url = 'XXX';    let data = Object.assign({}, commonParam, {        'ownName': 'suoz',        'ownAge': 20    });    jsonp(url,data,'jsonpCallBack').then((response) => {        var obj = response.data;        this.data = obj;    });}...

后端接口代理

以前学过http协议，如果想请求一个外部网站的数据，但是它指定了特定Referer和Host，导致无法获取数据，这时候怎么办呢？

嘻嘻，其实也是有办法的，前端是无法更改Referer和Host发起HTTP请求，可以通过后端代理的方式修改。

假设这里的Host: XXXX，而不是localhost:8080、Referer: XXXX，也不是localhost:8080。

1. 进入build目录，打开dev-serve.js文件。
2. 再找到var app = express()这一行，定义一个接口api
3. 在api内部定义一个axios.get()方法，进行相关的http请求字段修改，并通过res.query把用户自定义的参数传入给服务器。
4. axios返回的服务器端数据在成功函数内部返回给自己的服务器res.json(response.data)
5. 通过ajax发送的请求url为定义接口时的url，这时候可以获取到数据啦。

讲得自己都混乱了…

注：这里假设获取数据
url：http://data.com
Host： data.com
Referer： data.com

步骤

一、

npm install axios --save-dev

二、进入build目录，打开dev-serve.js文件，再引入axios

var axios = require('axios');

注：这里不是通过import引入，而是通过require…

三、再找到var app = express()这一行，定义一个接口api

//dev-serve.js...var apiRouter = express.Router();apiRouter.get('/getData',(req,res) => {    axios.get('http://data.com',{        headers: {            Host: 'data.com',            Referer: 'data.com'        },        pramas: req.query()    }).then((response) => {        //将外部获取的数据返回给本服务器        res.json(response.data);        }).catch((error) => {        console.log(error);    });});app.use('/api', apiRouter);

四、本地也发送一个ajax请求 url为/api/getData

//公共的参数放在config.js文件下import {CommonParams} from 'config.js';//任何一个想获取数据的组件...created () {    //自定义的参数    let OwnParamas = {        'format': 'json',        'name': 'suoz'    };    axios.get('/api/getData',{        params: {            CommonParams,            OwnParams        }    }).then((response) => {        let obj = response.data;        console.log(obj);    })}...

总结

必须在build文件夹下的dev-serve.js文件下定义一个接口，然后通过axios发送修改过字段的HTTP请求给网络服务器端，获取数据后在将数据返回给本地服务器。本地在进行ajax请求访问定义好的接口路径，从而获取接口返回的数据（最关键的一点就是params: res.query和res.json(response.data)）。