mockjs学习

1.首先在项目中安装mockjs
一般的还会在项目中安装json5.解决son文件不能加注释的问题

npm install mockjs --save-dev
npm install json5 --save-dev

2.在项目中使用mockjs

//引入mockjs模块
const Mock=require('mockjs')
let obj=Mock.mock({
    id:'@id',
    username:'@cname()',//随机生成一个中文名字
    date:'@date()',//随机生成日期
    avatar:'@image(200x200,"red","#fff","avatar")',//生成图片,第二个参数是图片得背景颜色，第三个是字体颜色，第四个是文字
    description:"@paragraph()",//描述
    ip:"@ip()",
    email:"@email()"
})
console.log(obj);

另一个操作
1.新建一个json5文件存储需要的对象

2.读取刚才创建的文件的内容，将其转换为对象，再用MOCKJS随机生成

//引入读取文件模块
const fs=require('fs')
//引入文件路径模块
const path=require('path')
//引入json5模块
const json5=require('json5')
const Mock=require('mockjs')
/**
 * 1.读取文件
 */
var json=fs.readFileSync(path.join(__dirname,'./userInfo.json5'),'utf-8')//__dirname是当前路径
// console.log(json);
var obj=json5.parse(json)//将读取到的文件转换成为对象
console.log(obj);
let test=Mock.mock(obj)
console.log(test);

vue和mockjs的结合使用

1.在mock文件夹下,新建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请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
}

2.在项目根目录下,新建vue.config.js

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

3.在src\components\HelloWorld.vue中发送axios请求

import axios from 'axios'
	export default {
	  name: 'HelloWorld',
	  props: {
	    msg: String
	  },
	  mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }
	}