1. Getting to know Mock.js
- What is mock.js
mock.js: It is a simulated data generator that can generate random data and intercept Ajax requests.
Its official website is mockjs - Why use mock.js
Because many companies do not have a good interface on the back end, and have written interface documents. With the mock.js front end, there is no need to wait for the back end to implement the interface before writing code.
The front-end can use the mock.js reference interface document to simulate the data and write the business code first
, wait for the back-end to be ready, and then use the back-end interface to write the simulated data by itself to achieve simultaneous development of the front-end and back-end
2. Installation of Mock.js
- use a CDN
- use local files
(1) In cmd, go back to your project cd / project name, then npm i mockjs -D to install
npm i mockjs -D
(2) use
import Mock from 'mockjs'
Mock.mock(url,data)
(3) main.js import
import ‘@/utils/mock’
3. Basic syntax of Mock.js
- mock(url,data)
- mock(url,method,data)
- mock(url,method,function(option){ return data }) Note: the url can be regular or string, the method method includes: post, get, put, delete, option includes: url request address , method request method, body request parameter
- Random is a very important knowledge point
(1) number
integer "num|1-100"
decimal point "price|25-50.2-3": 1
increment
(2) string random
text "score|1-5": "★ "
Chinese text title "title": "@ctitle(8,14)"
Chinese paragraph "des": "@paragraph"
(3) Boolean value
"bol|1": true
(4) Array
"friend|1":[ 1,2,3]
"friend|2": [1,2,3]
copy two
(5) object
"des|2": {}
Randomly take two attributes from the object
(6) Other commonly used
"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', ' ')"
}
4. Application cases of Mock.js
- Examples are as follows
- code show as below
// 导入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
})
*/
//