為什么需要使用mock 腿时？
作為一個從事前端工作的程序員與后端對接時着憨，經(jīng)常會遇到臨近項目上線時才會收到后端人員的接口信息钉寝。大多數(shù)人很難在短的時間內(nèi)完成渲染和調(diào)試茬射。這時我們就需要在本地模擬后端接口用來測試前端效果 這種做法稱之為構(gòu)建前端Mock。
方案1.使用mockjs進(jìn)行Mock
安裝：
npm install mockjs --save-dev
關(guān)于Mock的API使用介紹和官方文檔請移步這里
- 在項目src目錄中創(chuàng)建一個 mock.js文件
- 在main.js入口文件中引入剛剛創(chuàng)建的mock 文件
import './mock.js'
創(chuàng)建模擬數(shù)據(jù)
在 mock.js中創(chuàng)建一條用戶信息模擬數(shù)據(jù)
import Mock from 'mockjs'
const Random = Mock.Random
// 設(shè)置全局延時梆靖，沒有延時的話控汉，有時候會檢測不到數(shù)據(jù)變化
Mock.setup({
timeout: '300-600'
})
// 創(chuàng)建一個數(shù)組用來接收模擬的數(shù)據(jù)
const mocklist = []
const count = 5;
for (let i = 0; i < count; i++) {
mocklist.push(Mock.mock({
id: '@id',
name: '@cname',
'phone|1': /^1[0-9]{10}$/,
email: '@email',
'education|1': ['本科', '大專', '碩士', '博士', '中專'],
'graduationschool|1': ['西南財經(jīng)', '北京交通大學(xué)', '重慶工商大學(xué)', '清華大學(xué)', '西南大學(xué)', '上海復(fù)旦大學(xué)'],
'profession|1': ['教授', '律師', '醫(yī)生', '公務(wù)員', '大學(xué)老師', '警察', '白領(lǐng)'],
profile: '@cparagraph'
}))
}
接下來進(jìn)一步實現(xiàn)增刪改查的各個數(shù)據(jù)接口，這里我的需求是返吻，只使用一次模擬數(shù)據(jù)姑子，后面使用 localStorage 來進(jìn)行存儲數(shù)據(jù)。
// 獲取用戶信息列表
function getList() {
// 若 localStorage 沒有數(shù)據(jù)测僵，則將 Mock 的數(shù)據(jù)存入
if (!localStorage.getItem('userlist')) {
localStorage.setItem('userlist',JSON.stringify(mocklist))
}
// 每次獲取數(shù)據(jù)時街佑，再從 localStorage 中拉取數(shù)據(jù)
var userlist = JSON.parse(localStorage.getItem('userlist'))
return userlist
}
// 獲取單個用戶信息
function getUser(options) {
// 先從 localStorage 中拉取數(shù)據(jù)
var userlist = JSON.parse(localStorage.getItem('userlist'))
// 遍歷數(shù)組，返回id 與傳來 id 相當(dāng)?shù)囊粋€對象
for( let index in userlist) {
if (userlist[index].id === options.body) {
var user = userlist[index]
return user
}
}
}
// 刪除用戶信息
function deleteUser(options) {
// 先從 localStorage 中拉取數(shù)據(jù)
var userlist = JSON.parse(localStorage.getItem('userlist'))
// 根據(jù)傳遞的 id 刪除 用戶
for( let index in userlist ) {
if (userlist[index].id === options.body) {
userlist.splice(index,1)
localStorage.setItem('userlist', JSON.stringify(userlist))
}
}
return {
data: '用戶刪除成功'
}
}
// 添加用戶信息
function addUser(options) {
// 先從 localStorage 中拉取數(shù)據(jù)
var userlist = JSON.parse(localStorage.getItem('userlist'))
// 獲取傳入用戶信息對象捍靠，是一個字符串沐旨，需要轉(zhuǎn)化為對象
var user = JSON.parse(options.body)
// 使用 mock 隨機生成一個 id
user.id = Random.id()
// 將 user 插入到 userlist 中
userlist.unshift(user)
// 重新將 userlist 存入 localStorage 中
localStorage.setItem('userlist', JSON.stringify(userlist))
return {
data: '用戶添加成功'
}
}
// 更新用戶信息
function updateUser(options) {
// 先從 localStorage 中拉取數(shù)據(jù)
var userlist = JSON.parse(localStorage.getItem('userlist'))
var user = JSON.parse(options.body)
// 遍歷 userlist 根據(jù)傳入對象的 id 更新用戶信息
for ( let index in userlist ) {
if ( userlist[index].id === user.id ) {
userlist[index] = user
}
}
localStorage.setItem('userlist', JSON.stringify(userlist))
return {
data: '用戶更新成功'
}
}
// 制作各個接口
Mock.mock('/getlist', 'get', getList)
Mock.mock('/getuser', 'post', getUser)
Mock.mock('/deleteuser', 'post', deleteUser)
Mock.mock('/adduser', 'post', addUser)
Mock.mock('/updateuser', 'post', updateUser)
// 最后將 Mock 導(dǎo)出
export default Mock
這樣在需要的組件里就可以使用相應(yīng)的接口了
案例預(yù)覽
在線效果預(yù)覽
方案2.使用json-server進(jìn)行Mock
json-server的基本使用
1.首先我們要進(jìn)行安裝
window+R 輸入cmd
安裝：
npm install json-server --save-dev
2.準(zhǔn)備一個json文件（data.json）
運行 json-server data.json
切記一定要開啟
這里有個webpack設(shè)置技巧，不用每次運行項目都來開啟
1榨婆，同時啟動端口監(jiān)視與應(yīng)用磁携，需在package.json 里面做的更改：
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
"mockdev": "npm run mock | npm run dev"
}
這樣，在啟動webpack時寫npm run mockdev就可以同時啟動了良风。
2谊迄，在使用post方法時，需要像數(shù)據(jù)庫那樣得到返回烟央，而不是更改统诺。這時候需要額外添加一個中間件在mock文件夾里，比如post-to-get.js,寫法如下：
module.exports = function (req, res, next) {
req.method = "GET";
next();
}
然后在package.json里面啟動中間件就可以了："mock": "json-server --watch mock/db.json --m mock/post-to-get.js"
項目結(jié)構(gòu)如圖：
然后我們就可以愉快的使用了（請求方式我們暫用）
1.添加數(shù)據(jù)
2.刪除數(shù)據(jù)
3.修改數(shù)據(jù)
4.查找數(shù)據(jù)
5.模糊查詢
這時data中的json數(shù)據(jù)就會隨著你的操作發(fā)生改變
方案3.使用一些提供Mock服務(wù)的第三方
例如：
easy-mock
阿里的RAP 開源接口管理工具RAP第二代 http://rap2.taobao.org
bmob后端云
