Vue mock & vue-resource & JSONP

最新推荐文章于 2024-07-30 15:40:41 发布

Suoz

最新推荐文章于 2024-07-30 15:40:41 发布

阅读量2.6k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Suoz_wly0710/article/details/76400705

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

前提

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

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

相当而言我更喜欢mock..

入门

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

步骤

引入vue-resource

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

在某个组件内部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请求字段进行修改。

JSONP

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

前提

npm install jsonp --save-dev

Jsonp封装函数

//jsonp.js

import 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。

进入build目录，打开dev-serve.js文件。
再找到var app = express()这一行，定义一个接口api
在api内部定义一个axios.get()方法，进行相关的http请求字段修改，并通过res.query把用户自定义的参数传入给服务器。
axios返回的服务器端数据在成功函数内部返回给自己的服务器res.json(response.data)
通过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)）。