前端MOCK数据的三种方法

MOCK数据

1. 本地加载请求静态json文件的形式

在public下建立文件，/mock/user/login.json

App.vue：

mounted() {
    
    //本地加载请求静态json文件的形式
    this.axios.get(/mock/user/login.json).then( (res) => {
        this.res = res
    })
  }

login.json：

{
  "status":0,
  "data": {
    "id": 12,
    "username":"admin",
    "email":"admin#51.purse.com",
    "phone":null,
    "role": 0,
    "createTime":1479048325000,
    "updateTime":1479048325000
  },
  "msg":"success"
}

vue.config.js:

module.exports = {
  devServer: {
    host:localhost,
    port: 8081,
    proxy: {
      /api: {
        target: http://localhost:8081/#,
        changeOrigin: true,
        pathRewrite:{
          /api:
        }
      }
    }
  }
}

2. 使用easy-mock平台提供MOCK数据

app.vue

mounted() {
   
    //使用easy-mock 网站做模拟接口
    this.axios.get(/user/login).then(res => {
      this.res = res
    }) 
    
  }
}

main.js:

axios.defaults.baseURL = easy-mock网站生成项目mock数据地址  //用未来实际地址替换
...
axios.get(/user/login).then( res => {})

3. 本地集成 Mockjs, npm安装，实现数据Mock

(没有发真正请求，代码层面的拦截)

安装： cnpm i mockjs --save-dev

main.js：中使用mock开关，即什么时候用mock数据，上线使用后端数据就改成false。

注意： 区别于import是编译时加载，require是执行时加载，如果用import(./mock/api)则会每次加载都被mock拦截。

const mock = true
if(mock){
    // require是执行时加载，如果mock=false，则不用加载。
    require(./mock/api.js)
}

建立src/mock/api.js ，模拟请求接口：

import Mock from mockjs
//Mock.mock(请求地址，返回值)
Mock.mock(/api/user/login,{
  "status": 0,
  "data": {
    "id|10001-11000": 12,
    "username": "@cname",
    "email": "admin@51purse.com",
    "phone": null,
    "role": 0,
    "createTime": 1479048325000,
    "updateTime": 1479048325000
  }
});

---------------------------------------分割线00---------------------------------------------------------------

Main.js中的

①axios.defaults.baseURL = easy-mock生成的地址

下面两个涉及到跨域的：

②axios.defaults.baseURL = api //Proxy跨域时 -- 根据前端跨域的方式调整（vue.config.js）

③axios.defaults.baseURL = env.baseURL;// 根据CORS/JSONP跨域 (写在env.js里面，修改这里的接口地址)

这三种写法都是要根据实际情况选择。这三种Mock请求数据使用情况互相切换就行了。

优先使用： npm安装mockjs > easy-mock(网络不稳) > 本地json