一.初识Mock.js
- 什么是mock.js
mock.js:是一款模拟数据生成器，可以生成随机数据，拦截 Ajax 请求
它的官网是mockjs - 为什么要使用mock.js
由于很多公司，后端还没有做好接口,写好接口文档，有了mock.js前端就不需要等待后端实现接口再写代码。
前端可以通过mock.js 参考接口文档自己先模拟数据
写业务代码，等待后端准备好，在用后端接口替换自己写模拟数据实现前后端同时开发
二.Mock.js的安装
- 使用CDN
- 使用本地文件
（1）在cmd中，回到自己的项目项目cd /项目名，然后npm i mockjs -D进行安装
npm i mockjs -D
（2）使用
import Mock from 'mockjs'
Mock.mock(url,data)
(3) main.js导入
import ‘@/utils/mock’
三.Mock.js的基本语法
- mock(url,data)
- mock(url,method,data)
- mock(url,method,function(option){
return data
})
注释：其中的url，可以是正则，也可以是字符串，method方法包含有:post,get,put,delete，option包含：url 请求地址、method请求方法、body 请求第参数 - 随机是一个很重要的知识点
（1）数字
整数“num|1-100"
小数点"price|25-50.2-3":1
递增
(2)字符串随机
文字 “score|1-5”:“★”
中文本标题 “title”:“@ctitle(8,14)”
中文段落 “des”:“@paragraph”
(3) 布尔值
“bol|1”:true
(4)数组
“friend|1”:[1,2,3]
“friend|2”:[1,2,3]
复制两份
(5)对象
“des|2”：{}
随机从对象取两个属性
(6) 其他常用
"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', ' ')"
}
四.Mock.js的应用案例
- 实例如下
- 代码如下
// 导入mock
import Mock from 'mockjs';
// mock随机
Mock.mock(/\/v5\/user/,
{
code:0,
msg:"成功",
"data|10":[
{
"id|+1":1024,
"name":"@cname",
"age|1-100":1,
"price|25-50.2-5":1,
"score|1-5":"★",
"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', ' ')"
}
]
}
)
// 拦截ajax，生成伪数据,拦截地址“/v5/list”
// 只要网络地址匹配到这个正则就会拦截
Mock.mock(/\/v5\/list/, {
name: "mumu",
age: 18
})
// post参数,option前端请的数据
// option.url请求的地址
// option.type请求的方式
// option.body请求的字参数（需要JSON.parase转对象）
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(/\/api\/app\/v3\/category/,{
"message":"success","code":200,"data":{
"top":[{
"cat_id":0,"cat_name":"\u63a8\u8350\u5206\u7c7b"},{
"cat_id":1,"cat_name":"\u6587\u5316\u7eb8"},{
"cat_id":2,"cat_name":"\u5305\u88c5\u7eb8"},{
"cat_id":3,"cat_name":"\u827a\u672f\u7eb8"},{
"cat_id":4,"cat_name":"\u5de5\u4e1a\u7528\u7eb8"},{
"cat_id":7,"cat_name":"\u767d\u5361\u7eb8"},{
"cat_id":11,"cat_name":"\u590d\u5370\u7eb8"},{
"cat_id":12,"cat_name":"\u65b0\u95fb\u7eb8"},{
"cat_id":14,"cat_name":"\u9ed1\u5361\u7eb8"},{
"cat_id":15,"cat_name":"\u53cc\u80f6\u7eb8"},{
"cat_id":6,"cat_name":"\u74e6\u695e\u7eb8"},{
"cat_id":94,"cat_name":"\u519c\u526f\u4ea7\u54c1"},{
"cat_id":86,"cat_name":"\u65e0\u78b3\u7eb8"},{
"cat_id":89,"cat_name":"\u4e0d\u5e72\u80f6"},{
"cat_id":91,"cat_name":"\u677f\u7247"}],"recommend":{
"categorys":[{
"cat_id":35,"cat_name":"\u8f7b\u6d82\u7eb8","logo":"https:\/\/cdn.toodudu.com\/159514020603cf70ec9a2f3f952f2e18.jpg"},{
"cat_id":38,"cat_name":"\u65b0\u95fb\u7eb8","logo":"https:\/\/cdn.toodudu.com\/f45dbe288b1cc478fe507ad054317267.jpg"},{
"cat_id":51,"cat_name":"\u767d\u5e95\u94dc\u7248\u5361\u7eb8","logo":"https:\/\/cdn.toodudu.com\/169ef046e96665819ba91d9aee18f701.jpg"},{
"cat_id":52,"cat_name":"\u7070\u5e95\u94dc\u7248\u5361\u7eb8","logo":"https:\/\/cdn.toodudu.com\/16178dcc248c8098d7d460654f900ba5.jpg"},{
"cat_id":1,"cat_name":"\u6587\u5316\u7eb8","logo":"https:\/\/cdn.toodudu.com\/a5d9f2db2abed10a1306bc7495601801.jpg"},{
"cat_id":2,"cat_name":"\u5305\u88c5\u7eb8","logo":"https:\/\/cdn.toodudu.com\/bad951f04bbdd4c9b0f4bffa298b9042.jpg"},{
"cat_id":3,"cat_name":"\u827a\u672f\u7eb8","logo":"https:\/\/cdn.toodudu.com\/36e7ec095717b72014cfd53752baa01d.jpg"},{
"cat_id":4,"cat_name":"\u5de5\u4e1a\u7528\u7eb8","logo":"https:\/\/cdn.zdoodoo.com\/aab27872e1e188d2fe070d2a40051c9a.alicdn"},{
"cat_id":7,"cat_name":"\u767d\u5361\u7eb8","logo":"https:\/\/cdn.toodudu.com\/3c294fc36b3e2e794d765da2ee60f6d1.jpg"},{
"cat_id":11,"cat_name":"\u590d\u5370\u7eb8","logo":"https:\/\/cdn.zdoodoo.com\/e3deb62e3f2c77c9e531c435cf075db4.jpg"},{
"cat_id":12,"cat_name":"\u65b0\u95fb\u7eb8","logo":"https:\/\/cdn.zdoodoo.com\/40b89317a8230db4e582541649b4c93d.jpg"},{
"cat_id":14,"cat_name":"\u9ed1\u5361\u7eb8","logo":"https:\/\/cdn.toodudu.com\/cf609a216df70af19f6247d518d0b5a7.jpg"},{
"cat_id":15,"cat_name":"\u53cc\u80f6\u7eb8","logo":"https:\/\/cdn.toodudu.com\/08a4f33d564cb2727a834f3f807a4706.jpg"},{
"cat_id":6,"cat_name":"\u74e6\u695e\u7eb8","logo":"https:\/\/cdn.toodudu.com\/5443180758be1cb65077ae9aff595796.jpg"},{
"cat_id":69,"cat_name":"\u9759\u7535\u590d\u5370\u7eb8","logo":"https:\/\/cdn.toodudu.com\/26bbb6338c0ed7ab3ed22781707e9827.jpg"},{
"cat_id":70,"cat_name":"\u7eb8\u7bb1","logo":"https:\/\/cdn.zdoodoo.com\/64dcc60944cbc3bc6af538aa1eeb2835.alicdn"},{
"cat_id":71,"cat_name":"\u7070\u5e95\u767d\u677f\u7eb8","logo":"https:\/\/cdn.toodudu.com\/58f3efbe6b60b7e8cdc67c08503d489a.jpg"},{
"cat_id":72,"cat_name":"\u7bb1\u677f\u7eb8","logo":"https:\/\/cdn.toodudu.com\/beeaf57e831a5dde998341e2493cd31a.jpg"},{
"cat_id":36,"cat_name":"\u94dc\u7248\u7eb8","logo":"https:\/\/cdn.toodudu.com\/44cf483c3ebb41c8bc859be63f515cb3.jpg"},{
"cat_id":42,"cat_name":"\u725b\u76ae\u5361\u7eb8","logo":"https:\/\/cdn.toodudu.com\/b9fb9f5c0697168123e454400419f822.jpg"},{
"cat_id":43,"cat_name":"\u7bb1\u677f\u7eb8","logo":"https:\/\/cdn.toodudu.com\/39aec0797e9ff59dbbe024df2133cb04.jpg"},{
"cat_id":45,"cat_name":"\u74e6\u695e\u7eb8\u677f","logo":"https:\/\/cdn.toodudu.com\/dae179c37ce76eb89eb4bf913cca3898.jpg"},{
"cat_id":66,"cat_name":"\u80f6\u7248\u7eb8","logo":"https:\/\/cdn.toodudu.com\/a5e9549092026564e7958231727e0a74.jpg"}],"brands":[{
"brand_id":13,"brand_name":"\u4f73\u76ca\u7eb8\u4e1a","brand_logo":"https:\/\/cdn.toodudu.com\/13d295fdff8f0a5078ee97e10b6f702c.jpg"},{
"brand_id":2,"brand_name":"\u535a\u5927\u7eb8\u4e1a","brand_logo":"https:\/\/cdn.toodudu.com\/2d4b1900354a879d459cab54cd7ff5cc.jpg"},{
"brand_id":7,"brand_name":"\u53cb\u987a\u7eb8\u4e1a","brand_logo":"https:\/\/cdn.toodudu.com\/979753d9e2229c5146ba8c74efc095fc.jpg"},{
"brand_id":9,"brand_name":"\u6d2a\u56fe","brand_logo":"https:\/\/cdn.toodudu.com\/45c561db526f3dc8b9aadeb94bf35965.jpg"},{
"brand_id":19,"brand_name":"\u6c38\u6052\u7eb8\u4e1a","brand_logo":""},{
"brand_id":22,"brand_name":"\u6c5f\u95e8\u661f\u8f89\u9020\u7eb8","brand_logo":"https:\/\/cdn.toodudu.com\/ee42e315348da804381125c5eb5b0cb2.png"},{
"brand_id":137,"brand_name":"\u6c5f\u82cf\u76db\u5b9d\u4ed1\u7eb8\u4e1a","brand_logo":""},{
"brand_id":138,"brand_name":"\u9e3f\u5a1c\u7eb8\u4e1a","brand_logo":""}]},"banner":[{
"id":239,"cateid":71,"image":"https:\/\/cdn.zdoodoo.com\/2020\/04\/24\/FwQyo3sKuwEnb2lkJ8s26O5vLRr8bIXHbICtiNtt.jpeg","title":null,"url":"","web_url":"","app_path":"","web_path":"","mini_url":"","theme_color":"rgb(118, 198, 241)"}]}})
// 01获取数据
/* Mock.mock("http://abc.com/v5/list", {
name: "mumu",
age: 18
})
*/
//