一.初識(shí)Mock.js

什么是mock.js
mock.js:是一款模擬數(shù)據(jù)生成器，可以生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求
它的官網(wǎng)是mockjs

為什么要使用mock.js
由于很多公司，后端還沒有做好接口,寫好接口文檔，有了mock.js前端就不需要等待后端實(shí)現(xiàn)接口再寫代碼。
前端可以通過mock.js 參考接口文檔自己先模擬數(shù)據(jù)
寫業(yè)務(wù)代碼，等待后端準(zhǔn)備好，在用后端接口替換自己寫模擬數(shù)據(jù)實(shí)現(xiàn)前后端同時(shí)開發(fā)

二.Mock.js的安裝

使用CDN

使用本地文件

（1）在cmd中，回到自己的項(xiàng)目項(xiàng)目cd /項(xiàng)目名，然后npm i mockjs -D進(jìn)行安裝

npm i mockjs -D

（2）使用

import Mock from 'mockjs' Mock.mock(url,data)

(3) main.js導(dǎo)入

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 請(qǐng)求地址、method請(qǐng)求方法、body 請(qǐng)求第參數(shù)

隨機(jī)是一個(gè)很重要的知識(shí)點(diǎn)
（1）數(shù)字
整數(shù)“num|1-100"
小數(shù)點(diǎn)"price|25-50.2-3":1
遞增
(2)字符串隨機(jī)
文字 “score|1-5”:“★”
中文本標(biāo)題 “title”:“@ctitle(8,14)”
中文段落 “des”:“@paragraph”
(3) 布爾值
“bol|1”:true
(4)數(shù)組
“friend|1”:[1,2,3]
“friend|2”:[1,2,3]
復(fù)制兩份
(5)對(duì)象
“des|2”：{}
隨機(jī)從對(duì)象取兩個(gè)屬性
(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的應(yīng)用案例

實(shí)例如下

代碼如下

// 導(dǎo)入mock import Mock from 'mockjs';// mock隨機(jī) 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":["小紅","小綠","小藍(lán)"],"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，生成偽數(shù)據(jù),攔截地址“/v5/list” // 只要網(wǎng)絡(luò)地址匹配到這個(gè)正則就會(huì)攔截 Mock.mock(/\/v5\/list/, {name: "mumu",age: 18 }) // post參數(shù),option前端請(qǐng)的數(shù)據(jù) // option.url請(qǐng)求的地址 // option.type請(qǐng)求的方式 // option.body請(qǐng)求的字參數(shù)（需要JSON.parase轉(zhuǎn)對(duì)象） Mock.mock(/\/v5\/jok/,"post",function(option){return {code:0,msg:"參數(shù)成功",data:{title:"信息標(biāo)題",content:"內(nèi)容",...JSON.parse(option.body)}} })// post請(qǐng)求 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獲取數(shù)據(jù)/* Mock.mock("http://abc.com/v5/list", {name: "mumu",age: 18 })*/ //

總結(jié)

以上是生活随笔為你收集整理的十分钟带你了解mock.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。