資訊專欄INFORMATION COLUMN
摘要：模板在模板中生成多條數(shù)據(jù)后返回?cái)?shù)據(jù)請(qǐng)求攔截響應(yīng)攔截封裝輸出引入使用數(shù)據(jù)模板數(shù)據(jù)占位符數(shù)據(jù)模板在官網(wǎng)都沒有定義。使用占位符表示。后記網(wǎng)上有好多關(guān)于的文章。
mock會(huì)攔截下指定的請(qǐng)求，并返回由mock計(jì)算出的數(shù)據(jù)。
mock攔截下的請(qǐng)求不會(huì)在network里出現(xiàn)。
mock方便前端脫離后端進(jìn)行開發(fā)。
先來一個(gè)dome說明怎么使用。mock怎么與項(xiàng)目結(jié)合使用。
npm i mockjs // 安裝mockjs
創(chuàng)建src/mock.js // 用來生成mock數(shù)據(jù)。
在main.js引入src/mock.js require("./mock.js") // 全項(xiàng)目都可使用mock接口。
編輯一個(gè)vue文件。first.vue // 用來使用mock.js的數(shù)據(jù)。
創(chuàng)建api.js，建議放在"src/lib/api.js"。 // 用來封裝axios。這樣做對(duì)于項(xiàng)目規(guī)范。非要每個(gè)請(qǐng)求都實(shí)例出axios也行。
在first.vue文件引入api.js。
做了以上5步，就可以在first.vue文件時(shí)使用api.js調(diào)用mock了。
下面是具體代碼。
// mock.js
import Mock from "mockjs"
const Random = Mock.Random
let name = [] // 模板
for (let i = 0; i < 3; i++) { // 在模板中生成多條數(shù)據(jù)
name.push({
name: Random.string(3, 8),
age: Mock.mock({
"number|1-100": 100
})
})
}
let age = {
ages: Mock.mock({
"number|1-100": 100
})
}
Mock.setup({
timeout: "200" // 2s-2s后返回?cái)?shù)據(jù)
})
Mock.mock("/data/name", "post", name)
Mock.mock("/data/age", "get", age)
// main.js
require("./mock.js")
// first.vue
basic
// api.js
import axios from "axios"
// 請(qǐng)求攔截
axios.interceptors.request.use(res => {
return res
}, error => {
return Promise.reject(error)
})
// 響應(yīng)攔截
axios.interceptors.response.use(res => {
console.log("res", res)
return res
}, error => {
return Promise.reject(error)
})
// 封裝post
const fetch = (url, params) => {
return new Promise((resolve, reject) => {
axios({url: url, params: params, method: "post"}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// 輸出
export default {
mockData (url, params) {
return fetch(url, params)
},
mockDataAge (url, params) {
return new Promise((resolve, reject) => {
axios({url: url, params: params, method: "get"}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
}
// first.vue
// 引入
import api from "../../lib/api.js"
// 使用
getData () {
api.mockData("/data/name").then(res => {
this.dataName = res
})
},
getDataAge () {
api.mockDataAge("/data/age").then(res => {
this.dataAge = res
})
}
數(shù)據(jù)模板 數(shù)據(jù)占位符
數(shù)據(jù)模板在官網(wǎng)都沒有定義。我理解是數(shù)據(jù)模板就是Mock.mock()里使用的對(duì)象。
數(shù)據(jù)占位符是數(shù)據(jù)模板中用來生成指定類型數(shù)據(jù)的占位符。使用@占位符(params[,params])表示。
Mock.Random是一個(gè)工具類，用來生成各種隨機(jī)數(shù)據(jù)。
數(shù)據(jù)模板中@占位符(params[,params]) 是占位符，用來生成相應(yīng)數(shù)據(jù)。有人把占位符理解為mock內(nèi)置模板。畢竟Mock.mock()使用它們作為參數(shù)。
網(wǎng)上有好多關(guān)于mock的文章。都沒說清楚模板是什么，做什么的，怎么用。占位符是什么，做什么的，怎么用。
官網(wǎng)上也不寫demo.看了好幾遍就看到api.能不能從大到小寫文檔？
為什么進(jìn)入官網(wǎng)學(xué)教程又進(jìn)入git里的wiki?
優(yōu)點(diǎn)是官網(wǎng)的api寫的好?？梢栽赾onsole里運(yùn)行。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109964.html
摘要：想到函數(shù)有延遲網(wǎng)絡(luò)請(qǐng)求稀釋事件延遲執(zhí)行的效果，于是將模板函數(shù)用包裹起來，如下結(jié)果出現(xiàn)有意思的事情當(dāng)請(qǐng)求比較頻繁，在延遲時(shí)間內(nèi)，本次請(qǐng)求得到的響應(yīng)數(shù)據(jù)是上次請(qǐng)求的結(jié)果。 vue-cli 中使用 Mockjs 詳解 背景 前端在早期jQuery時(shí)代時(shí)，前端功能和后端工程基本上都是合在一起，典型的就是常見的maven工程下面的webapp目錄包含前端各類靜態(tài)資源文件。這個(gè)時(shí)候，我們總是會(huì)遇...
摘要：用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用模擬返回?cái)?shù)據(jù)，從而可以完全脫離后端進(jìn)行開發(fā)安裝使用這里作用等價(jià)于拓展周杰倫林俊杰鄧紫棋方大同自定義的拓展函數(shù)同理，用占位符和調(diào)用具體的函數(shù)等價(jià)可模擬整形數(shù)組的長(zhǎng)度和值可模擬某一 MockJs 用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用MockJs模擬返回?cái)?shù)據(jù)，從而可以完全脫離后端進(jìn)行開發(fā) 安裝 npm...
摘要：用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用模擬返回?cái)?shù)據(jù)，從而可以完全脫離后端進(jìn)行開發(fā)安裝使用這里作用等價(jià)于拓展周杰倫林俊杰鄧紫棋方大同自定義的拓展函數(shù)同理，用占位符和調(diào)用具體的函數(shù)等價(jià)可模擬整形數(shù)組的長(zhǎng)度和值可模擬某一 MockJs 用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用MockJs模擬返回?cái)?shù)據(jù)，從而可以完全脫離后端進(jìn)行開發(fā) 安裝 npm...
摘要：用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用模擬返回?cái)?shù)據(jù)，從而可以完全脫離后端進(jìn)行開發(fā)安裝使用這里作用等價(jià)于拓展周杰倫林俊杰鄧紫棋方大同自定義的拓展函數(shù)同理，用占位符和調(diào)用具體的函數(shù)等價(jià)可模擬整形數(shù)組的長(zhǎng)度和值可模擬某一 MockJs 用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用MockJs模擬返回?cái)?shù)據(jù)，從而可以完全脫離后端進(jìn)行開發(fā) 安裝 npm...
摘要：接下來我們就來看看學(xué)到什么程度才算是真正學(xué)會(huì)可以去一展身手。一確立目標(biāo)了解需求做什么事情都要先確定好目標(biāo)，才不至于迷失方向。 大家在學(xué)習(xí)Python的時(shí)候，有人會(huì)問Python要學(xué)到什么程度才能出去找工作，對(duì)于在Python培訓(xùn)機(jī)構(gòu)學(xué)習(xí)Python的同學(xué)來說這都不是問題，因?yàn)榘凑誔ython課程大綱來，一般都不會(huì)有什么問題，而對(duì)于自學(xué)Python來說，那就比較難掌握，冒然出去找工作非常...
閱讀 3430·2021-11-24 10:30
閱讀 3302·2021-11-22 15:29
閱讀 3737·2021-10-28 09:32
閱讀 1336·2021-09-07 10:22
閱讀 3378·2019-08-30 15:55
閱讀 3651·2019-08-30 15:54
閱讀 3535·2019-08-30 15:54
閱讀 2863·2019-08-30 15:44
