下面演示的是我總結(jié)的一個(gè)使用示例，幫助大家參考學(xué)習(xí)，看完后，如果大家有其他需求，可以參考Mock.js 的官方文檔，需要生成哪些格式的數(shù)據(jù)，復(fù)制樣例代碼即可，本案例重在演示如何使用Mock.js和json server自動(dòng)生成前端開發(fā)測試用的接口數(shù)據(jù)。
先創(chuàng)建一個(gè)項(xiàng)目文件夾，取名為mock，初始化一下項(xiàng)目：
npm init -y
之后安裝mock.js：
npm install mockjs --save-dev
安裝json-server，可以選擇全局安裝：
npm install -g json-server
安裝好這兩個(gè)依賴后，在項(xiàng)目根目錄下面新建一個(gè)db.js（名字任取），然后編寫如下的代碼:
const Mock = require('mockjs')
// Mock.Random 是一個(gè)工具類，用于生成各種隨機(jī)數(shù)據(jù)。
const Random = Mock.Random
// 導(dǎo)出數(shù)據(jù)
module.exports = () => {
// 定義要導(dǎo)出的數(shù)據(jù)
let data = { news: [] }
// 生成數(shù)據(jù)
for (let i = 0; i < 20; i++) {
data.news.push({
id: i,
content: Random.paragraph(),
createTime: Mock.mock('@date("yyyy-MM-dd HH:mm:ss")'),
})
}
// 把數(shù)據(jù)導(dǎo)出
return data
}
在mock.js的官方樣例文檔中，有很多種類數(shù)據(jù)的樣例代碼，用到復(fù)制粘貼即可，不需要背。
最后我們啟動(dòng)json-server，就可以模擬生成后端數(shù)據(jù)了：
json-server --watch --port 3333 --host 127.0.0.1 db.js
之后就可以訪問 http://127.0.0.1:3333/news 就可以訪問到數(shù)據(jù)了，甚至可以通過json server對數(shù)據(jù)進(jìn)行增刪改查等的操作。文章來源：http://www.zghlxwxcb.cn/news/detail-401645.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-401645.html
(′?? ? ??)(′?? ? ??) 如果這篇文章對你有幫助，可以幫忙點(diǎn)個(gè)贊嗎？謝謝了(′?? ? ??)(′?? ? ??)。
到了這里，關(guān)于使用Mock.js和json server快速生成前端測試數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
