我将我使用mock的心得记录一下,在前后端分离的趋势下,我们原有的开发流程已经变更,所以前端在进行开发时往往 因为接口的时间而浪费,所以出现了mock方便我们前端自行模拟接口进行开发提升效率
首先我们需要的工具有两种第一个json5还有一个就是mock需要npm装包 接下来就是vscode一个插件JSON5 syntax
安装
(1)npm install axios --save
(2)npm install mockjs --save-dev
(3)npm install json5 --save-dev
(1)npm install axios --save
(2)npm install mockjs --save-dev
(3)npm install json5 --save-dev
![](https://img2020.cnblogs.com/blog/1845321/202111/1845321-20211122214249933-1028566287.png)
首先创建这两个文件
index.js
const fs = require('fs') const path = require('path') const Mock = require('mockjs') const JSON5 = ('json5') // 读取json文件 function getJsonFile (filePath) { let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8') return JSON5.parse(json) } // 返回一个函数 module.exports = function (app) { // 监听http请求 // if (process.env.MOCK == true) { app.get('/user/userSteam', function (rep, res) { // getJsonFile方法定义了读取json文件 let json = getJsonFile('./userInfo.json5') // 将json传入Mock.mock方法中,生成的数据返回浏览器 res.json(Mock.mock(json)) }) // } }
//userInfo.json5
{ id: '@id()', // 得到随机id,对象 username: '@cname()', // 随机生成中文名字 date: '@date()', // 随机生成日期 avatar: "@image('200x100', 'red', '#FFF', 'avatar')", // 生成图片,参数size,bg,textcolor,text description: '@paragraph()', // 描述 ip: '@ip()', // ip地址 email: '@email()' }
vue.config.js
devServer: { before: require('./src/mock/index.js'), open: true, host: '1.2.2.13', ip地址 port: 8080, hotOnly: true, watchContentBase: true, proxy: { "/api": { target: "http://1.1.2.13:8080", pathRewrite: { "^/api": "" } } } }
最外层创建一个.env.development文件
MOCK = true
使用
getList() { this.axios.get('/user/userSteam').then((res) => {
console.log(res);
}).catch((err) => { console.log(err); }); }
第二种就简单的多了那就是实用fastmock官网不需要去学习mock使用直接去网站生成你的接口就可以了不需要下在mock或者json的东西直接生成