mock.js了解学习

mock.js官网 

1.安装

npm i mockjs

 其他辅助安装

npm i json5
npm i axios

2.语法规范

该部分出自b站李炎恢视频，有兴趣可以去看

1. Mock.js 的语法规范包括两个部分：数据模板定义规范和数据占位定义规范； 2. 数据模板定义的规范包含 3 个部分：属性名、生成规则和属性值

//'属性名|生成规则':属性值
'name|rule':value 

1.字符串/数值（7种）

生成规则	说明	示例
min-max	生成 min ~ max 之间的字符串	'list|1-10'
count	生成 count 个字符串	'list|5'
min-max.dmin-dmax	生成 min ~ max之间的浮点数， 小数点位数在 dmin ~ dmax 之间	'id|1-10.1-3' : 1
count.dcount	生成 count 个字符串， 小数点位数为 dcount	'id|8.2' : 1
min-max.dcount	//同上
count.dmin-dmax	//同上
+step	每次进行累加一个值	'id|+1' : 1

2.布尔值/对象/数组 

生成规则	说明	示例
布尔值	生成布尔值，1/2 概率 true	true 'flag|1' : true
布尔值 min-max	生成布尔值， 概率为 min/(min + max)	'flag|1-10' : true
对象 count	从对象中随机抽取 count 个属性	'obj|2' : obj
对象 min-max	从对象中随机抽取 min-max 属性	'obj|1-3' : obj
数组 1	获取 1 次数组	'arr|1' : arr
数组 count	重复 count 次组成新数组	'arr|2' : arr
数组+	累加	arr|+1' : arr
数组 min-max	重复 min-max 次组成新数组	'arr|1-2' : arr

3.函数和正则表达式

生成规则	说明	示例
函数	支持函数	'fn|1' : function
正则	支持正则	reg|1' : /[a-z]/

4.常用随机占位符

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

3.随机数据拓展

mock.Random.extend({
    //随机占位符命名
    cstore(){
        return this.pick([
            '应用商店',
            '水果店',
            '小吃店',
            '快餐店',
            '理发店'
        ]);
    }
});

console.log('cstore:',Mock.mock('@cstore'));

4.在vue中使用mockjs

1.创建mock服务

//mock/userinfo.json5

// npm i json5 解决json文件中不能注释的问题  在vscode中需要配合 JSON5 syntax 插件使用
{
    id: '@id',
    name: '@cname',
    email: '@email',
    data: '@date',
    avatar: "@image('200x200','pink','#fff','avatar')",
    description: '@paragraph',
    url: '@url',
    ip: '@ip'
}

//mock/index.js
const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
const Mock = require('mockjs');


// 读取json文件
function getJsonFile(filePath){
    const json = fs.readFileSync(path.join(__dirname, filePath),'utf-8');
    return JSON5.parse(json);
}


// 返回一个函数
module.exports = function(app){
    if(process.env.Mock == 'true'){
        // 监听http请求
        app.get('/user/userinfo',function(rep,res){
            // 每次响应请求时读取 mock data的json文件
            const json = getJsonFile('./userinfo.json5');
            // 将json传入mock方法生成数据
            res.json(Mock.mock(json));
        });
    }
}

2.在vue.config.js中引入

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

加入自定义环境变量

//.env.development
MOCK=true

3.在组件中调用

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