mockjs的安装使用

为什么使用mockjs

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
2.使用json-server模拟，但不能随机生成所需数据
3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

mock优点

1.前后端分离，

前端，访问后端接口展示数据

后端，负责出来业务逻辑访问数据的数据,返回给前端

数据库，存储数据

2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

mockjs的安装与使用

安装
npm i mockjs -D
使用
import Mock from 'mockjs'
Mock.mock(url,data)
main.js导入
import ‘@/utils/mock’

mock用法

mock(url,data)
mock(url,method,data)
mock(url,method,function(option){
return data
})

url:可以是正则，也可以是字符串
method:post,get,put,delete
option
url 请求地址
method请求方法
body 请求第参数

数字

整数
    “num|1-100"
    小数点
    "price|25-50.2-3":1

递增字符串随机

文字
    "score|1-5":"★"
    中文本标题
    "title":"@ctitle(8,14)"
    中文段落
    "des":"@paragraph"
    布尔值
    “bol|1”:true
    数组
    "friend|1":[1,2,3]
    对象
    “des|2”：{} //随机从对象取两个属性

案列

//导入mock
import Mock from 'mockjs'
//拦截ajax，
Mock.mock("http://abc.com/v5/list", {name: "mumu",age: 18
})Mock.mock(/\/v5\/jok/, "post", function (option) {return {code: 0,msg: "参数成功",data: {title: "信息标题",content: "内容",...JSON.parse(option.body)}}
})
// post请求
Mock.mock(/\/v5\/item/, "post", {code: 0,msg: "成功",data: [1, 2, 3, 4]
})
//mock 随机
Mock.mock(/\/v5\/user/, {code: 0,msg: "成功","data|10": [{'name': "@cname","age|1-100": 1,"price|20-50.2-5": 1,'title': "@ctitle(8,14)",'description': "@cparagraph","isLog|1": true,"friend|2-10": ["小蓝", "小绿", "小张", "小雨"],"des|2": { eye: 1, hand: 2, job: "teacher" },'tel': /1\d{10}/,'email': /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,'canMerry': function () {if (this.age > 22) {return true;} else {return false;}},'day': "@date('yyyy-MM-dd')",'time': "@time('HH:mm:ss')",'add': "@county(true)","avatar": "@dataImage('200x100','图片')"},],
});

属性值自动加 1，初始值为 number` ‘name|+step’: value
————————————————