生活随笔
收集整理的這篇文章主要介紹了
十分钟带你了解mock.js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.初識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的應用案例
實例如下
代碼如下
import Mock
from 'mockjs';
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', ' ')"}]
}
)
Mock
.mock(/\/v5\/list/, {name: "mumu",age: 18
})
Mock
.mock(/\/v5\/jok/,"post",function(option){return {code:0,msg:"參數成功",data:{title:"信息標題",content:"內容",...JSON.parse(option
.body
)}}
})
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)"}]}})
總結
以上是生活随笔為你收集整理的十分钟带你了解mock.js的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
