前端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