Mockjs的使用

之前在公司实习，与后端合作开发，后端经常让我自己mock一下，当时的我并不会这个操作，只能默默的等待后端写好接口再一起调试。现在有时间了可以学习一下。

当前端工程师需要独立于后端并行开发时，后端接口并没有完成，前端可以自己搭建webserve自己模拟假数据，可以选用第三方库mock.js,用来生成随机数据，拦截aJax请求。

官网地址mockjs.com/ 可以看文档和代码实例

初始化mock

创建项目 vue create mock-demo

安装依赖

	cnpm install axios --save   //使用axios发送  ajax
	cnpm install mockjs --save-dev   //使用mockjs产生随机数据
	cnpm install json5 --save-dev   //使用json5解决json文件,无法添加注释问题

学习mockjs

const Mock=require('mockjs')
let id=Mock.mock('@id')
//console.log(id);
//返回数字
let obj=Mock.mock({
  id:'@id'

})
//console.log(obj);
//返回字符串

var obj2 = Mock.mock({
  id: "@id()",//得到随机的id,对象
  username: "@cname()",//随机生成中文名字
  date: "@date()",//随机生成日期
  avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
  description: "@paragraph()",//描述
  ip: "@ip()",//IP地址
  email: "@email()"//email
})
console.log(obj2)

执行node命令，可以看到控制台输出了mock出来的假数据 avatar是图片信息，可以复制链接到浏览器可以看到图片

Json5的使用

json格式是目前很常用的数据传输格式，但是有两个缺点，一个是不能在json中使用注释，还有就是序列化之后的 key 被加上了双引号

const obj = { name: 'keliq', age: 12 }
console.log(JSON.stringify(obj))
// {"name":"keliq","age":12}

所以可以使用json5，在mock文件夹下,新建testJSON5.js

const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}
var json = getJsonFile('./userInfo.json5');
console.log('json', json)

json5文章参考juejin.cn/post/690447…

在vue项目中使用mock

mock和vue-cli相结合新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function(app){
    //监听http请求
    //访问下面这个接口时，其实应该是后端的接口，我们让他来访问userinfo.json5中的文件，用来随机生成文件。
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        var json = getJsonFile('./userInfo.json5');
        res.json(Mock.mock(json));//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
    });
}

在项目根目录下创建vue.config.js,用来在发生请求时进行拦截，进行mock

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

在helloWorld.vue中发送ajax请求，增加mounted生命周期，引入axios模块

mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }

使用npm run serve 命令运行demo，在8080窗口打开，打开f12，network->userinfo->preview,就可以看到了mock出来的假数据，如果是后端的接口，就是真实的数据。

over