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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！