摘要
在前端開發程序中，后端介面還沒有完全開發完成時，前端開發人員就需要學會自己模擬后端介面資料，更快更好的完成開發任務，模擬后端介面資料的js庫有很多，今天就簡單就簡單的分享下mock.js在前端開發的應用（嘿嘿，畢竟這個mock應用的開發人員較多），
內容
1.Mock的安裝
根據官方檔案安裝mock，運行安裝命令安裝即可，
npm install mockjs
2.Mock的簡單介紹
2.1.mock資料模板定義
根據官方檔案示例介紹，輸出一個亂數的‘*’字串來展示mock的資料模板，更多的示例可以參考官方來進行屬于自己的定制化資料書寫，官方示例：http://mockjs.com/examples.html
String
'name|min-max': string'
Mock.mock({
"string|1-10": "*"
})
2.2.Mock.mock()的應用
有了mock的資料模板，我們就可以進行更高一級的模擬資料開發，在實際開發程序中，介面地址是獲取資料的重要因素，為了更貼切的模擬到實際的介面開發，我們就需要應用Mock.mock(rurl，rtype，template)的模式進行開發，該模式中的三個引數分別是介面的url、介面的請求型別、介面的資料模板，（更多檔案說明參考官方檔案說明：https://github.com/nuysoft/Mock/wiki）下面是官方的簡單示例mock：
Mock.mock(/\.json/, 'post', {
type: 'post'
})
* 需要注意：
# 1.介面URL可以是URL字串或者URL正則式，實際開發程序中，個人建議寫成URL正則的方式，
# 2.介面Type必須要小寫，例如：'get'、'post'等，type型別大寫時無法請求到資料，
3.Mock實體應用
開發一個課程串列的展示，模擬后端介面書寫模擬資料，mock具體代碼如下：
3.1.引入mock
import React, { useState, useEffect } from "react";
import Mock from "mockjs";
import request from '../../utils/request';
import "./style.less";
3.2.Mock.mock()資料
Mock.mock(/\/api\/visitor\/list/, 'get', {
code: 2000,
msg: 'ok',
'data|10': [
{
'id|+1': 6,
'name': '@csentence(5)',
'tag': '@integer(6, 9)-@integer(10, 14)歲 @cword("零有", 1)基礎',
'lesson_image': "https://images.pexels.com/photos/3737094/pexels-photo-3737094.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
'lesson_package': 'L1基礎指令課',
'done': '@integer(10000, 99999)',
}
]
})
3.3.request請求資料
const Visitor = ({
history
}) => {
const [visitorList, setVisitorList] = useState([]);
// 獲取免費課串列
useEffect(() => {
const fetchFreeLesson = async () => {
try {
const res = await request.get(`/api/visitor/list`)
console.log('請求到的模擬資料', res)
setVisitorList(res)
} catch (error) {
console.log(error)
}
}
fetchFreeLesson()
}, [])
return (
<div>
mock.js的簡單應用
</div>
)
}
export default Visitor;
3.4.實體效果
# 1.實體中請求到的模擬資料：
# 2.實體模擬資料的展示：
總結
mock.js極大的簡化了前端人員的開發，讓前端獨立于后端進行開發，高效的提高團隊間前后端的合作，同時mock的用法簡單，資料型別豐富真實，擴展性能強，這些優點可能就是mock應用的開發人員較多的原因，今天就簡單的分享下mock的初級用法，希望可以給前端人員的開發作業帶來便捷，文中有錯誤的地方，請大佬在我背后指指點點一波！嘿嘿嘿，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/148157.html
標籤：JavaScript
上一篇：變數提升與函式提升
下一篇：05.JS函式