前端MOCK数据的三种方法

古城微笑少年丶 2021-10-09 03:04 589阅读 0赞

# #

## MOCK数据 ##

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

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

App.vue：

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

{
      "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数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlbmppdXN1aTgwODM_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlbmppdXN1aTgwODM_size_16_color_FFFFFF_t_70]: /images/20211009/f2bff1ff785c4970aa86eeeddefa1dc8.png