Vue mock模拟数据及三种请求

Vue中使用mock模拟数据

第一步:安装mockjs(cnpm install mockjs --save)

第二步:在mock.js中导入mockjs

第三步:配置请求模拟数据(2种方法)

mock.js

import Mock from 'mockjs';   //导入mockjs
//写法一：对象.方法("模拟接口","get或post",{     })
Mock.mock("/user","post",{
    data:[
        {
            name:"苏明哲",
            sex:"男"
        },
        {
            name:"苏明成",
            sex:"男"
        }
    ]
});
//写法二
Mock.mock("/list","get",()=>{
    return [
        {
            name:"苏明哲",
            sex:"男"
        },
        {
            name:"苏明成",
            sex:"男"
        }
    ]
});

第一种：vue-resource（cross+jsonp）

第一步:安装(cnpm install vue-resource --save)

第二步:去 main.js文件配置vue-resource(先导入、在使用)

main.js

import Vue from 'vue'
import App from './App.vue'
//导入并使用vue-resource
import vueResource from 'vue-resource';
Vue.use(vueResource);

使用mockjs在mock.js中引入

require("./Mock/Mock");

使用vue-resource请求mock数据               mock.vue

this.$http.post("").then((response)=>{   });   //使用例子，官网可查

    mounted(){
        let url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";     //API接口
        this.$http.get(url).then((response)=>{
            console.log(response.body.result);
        });
        this.$http.post("").then((response)=>{   });
        this.$http.post("/user").then((response)=>{       //使用mockjs在mock.js中引入
            console.log(response.body.data);
        });
        this.$http.get("/list").then((response)=>{       //使用mockjs在mock.js中引入
            console.log(response.body);
        });
    }

第二种：axios请求支持cross跨域

第一步：下载安装（cnpm install axios --save）

局部使用

第二步：在Axios.vue中导入                                     

import axios from 'axios';

第三步：请求mock数据

mounted(){
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        axios.get(api).then((res)=>{     //此处axios为上面导入axios时起的名字
            console.log(res.body.result);
        }),

        axios.post("/user").then((result)=>{
            console.log(result.body.data);
        })
    }

全局使用

第二步：在main.js中导入 、使用        

import axios from 'axios';
Vue.prototype.$axios=axios;

第三步：请求mock数据   在mounted中写

this.$axios.get("/list").then((res)=>{
            console.log(res.body.data)
        })

第三种：Fetch-jsonp请求支持cross跨域

第一步：导入

import fetch from "fetch-jsonp";

第二步：请求数据

   let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        fetch(api).then((res)=>{     //此处fetch为导入fetch时起的名字
            return res.json();
        }).then((res)=>{
            console.log(res.result);
        })