一压怠、mockjs定義
攔截
ajax請求池充，生成偽數(shù)據(jù)
應(yīng)用場景:在工作中,后端已經(jīng)出接口文檔,還沒有實(shí)現(xiàn)代碼
由前端依照接口文檔模擬偽數(shù)據(jù),實(shí)現(xiàn)前端開發(fā)功能
二桩引、mockjs安裝
npm i mockjs -D
三 、mockjs使用
- 1定義
/mock/index.js
import Mock from 'mockjs'
Mock.mock(" /api/feed",{json數(shù)據(jù)})
- 2在
main.js導(dǎo)入
import '../mock/index.js'
此時發(fā)送
ajax請求訪問/api/feed就會被mock攔截收夸，獲取到json模板對應(yīng)的虛擬數(shù)據(jù)坑匠，并且在瀏覽器的network之中看不到發(fā)起的請求，如果需要在network中看到發(fā)起的請求可以利用devserve攔截請求咱圆，僅使用mock生成模擬數(shù)據(jù)
四笛辟、mockjs方法
mock(data)
mock(url,data)
mock(url,type,data)
mock(url,type,function)
data：數(shù)據(jù)
url：攔截地址(可以是正則)
type：攔截請求類型(post,get,put,delete),默認(rèn)get請求
function：通過函數(shù)返回數(shù)據(jù),參數(shù)用config 請求的配置
五功氨、mockjs語法
"id":"@id"
"star|1-2":"?" 字符串重復(fù)1-2次
"price|100-200.2-3”小數(shù)點(diǎn)2-3位
"data | 10"";[{name:"名稱")]數(shù)組的內(nèi)容重復(fù)10遍
"live | 1":true,隨機(jī)返回true,false
"tel":/13\d{9}/ 手機(jī)號碼
"des":function(){ return this.start+this.price}
"name":"@cname" 表示中文名稱
"address":"@country(true)" 地址
"description":"@cparagraph(1序苏，3）”隨機(jī)段落2-3行
"pic":@datalmage(200x100）;圖示"
更多語法示例可以到官網(wǎng)的示例中：http://mockjs.com/examples.html
