mockJS的初始使用总结-一一网

1.搭建测试项目

1.1创建项目

vue create mock-demo
复制代码

1.2安装依赖

//使用axios发送ajax
cnpm install axios --save
//使用mockjs产生随机数
cnpm install mockjs --save-dev
//使用json5解决json文件无法注释的问题
cnpm install json5 --save-dev
复制代码

2.mockjs使用

在项目的根目录下面创建一个文件夹mock，创建一个testMock.js文件来测试mock的使用。

2.1testMock.js的使用

在testMokejs文件中引入mock：

//引入mockjs模块，以便使用mock
const mock = require('mockjs')
//简单使用，获取随机的id
let id = mock.mock('@id')
//随机生成一个对象
let boj = mock.mock({
  id: "@id()",//得到对象的随机的ID
  username: "@cname()",//随机生成中文名字
  date: "@date()",//随机生成日期
  avatar: "@image('200x200','red','#fff','avatar')",//生成随机的图片
  description: "paragraph()",//随机生成描述
  ip: "@ip()",//随机生成ip地址
  email: "@email()",//随机生成email邮箱
})
复制代码

3.json5的使用

3.1引入json5库来解析json5格式

在mock文件夹下新建testjson5.js

//在创建一个userinfo.json5文件，输入json数据格式
//应用json5之后就可以正常的使用了。
const JSON5 = require('json5')
//使用json5的好处就是可以，注释之类的简化操作
//读取文件，得到路径
const fs = require('fs')
const path = require('path')
//将json中的数据由字符串变成一个对象
const json5 = require('json5')

let json = fs.readFileSync(path.join(__dirname,'./userinfo.json5'),'utf-8')
var obj = json5.parse(json);
console.log(obj);
//上面就是讲一个json文件的数据读取出来，但是是字符串，这时候
//就将字符串变成一个json对象保存下来。
复制代码

4.vue.cli中使用mock

在根目录下面的vue.config.js文件中去配置条件

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

在mock文件夹下面创建index.js文件

//返回一个函数
module.exports = function(app){
  //监听http请求 
  app.get('/user/userinfo',function(rep,res){
    //每次响应请求时读取mock  data的json文件
    //getJsonFile方法定义了如何读取json文件并解析成数据对象
    let json = getJsonFile('./userInfo.json5');
    //将json传入mock。mock方法中，生成的数据返回给浏览器
    res.json(mock.mock(json));
  })
}
复制代码

在helloworld.vue文件中的mounted钩子函数中去发送ajax请求。

import axios from 'axios'//引入库
axios.get('/user/userinfo').then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
})
复制代码

正常开发中，mock是后端的接口没有写好的时候，前段进行模拟数据的,所以当后端的接口已经写好的时候，如何让程序不再使用mock呢？在index.js中配置：

//返回一个函数
module.exports = function(app){
  
  //process.env.MOCK等于true的时候才使用mock，否则使用后端接口数据
  if(process.env.MOCK == 'true'){//这里是环境变量，环境变量在项目目录的根目录下
  //创建.env.development文件,文件中设置MOCK = true
  //如果后端的接口已经成功了，那么就可以设置 MOCK = false，这样就会适用后端接口
  //停用mock
  
    
       //监听http请求 
      app.get('/user/userinfo',function(rep,res){
        //每次响应请求时读取mock  data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        let json = getJsonFile('./userInfo.json5');
        //将json传入mock。mock方法中，生成的数据返回给浏览器
        res.json(mock.mock(json));
      }) 
  }
}
复制代码