搭建本地 mock 伺服器 ---為了更好的前端開發
工作中，有時候前端的很多工作需要後端的支援，但是可能後端的介面還沒有開發完，或者有些時候在聯調階段，修復某個 bug 的時候，環境掛了。。。 那麼這個時候，我們的很多工作無法順利的進行下去。於是萌生了搭建本地伺服器的想法。
首先粗略的說一下它的好處
- 前端更加獨立，在開發階段對於後端的依賴性大大降低。
- 聯調和開發截斷，對於新增加的介面，只需要後端提供介面文件就好，不需要等到他們真正的開發完成，前端就可以自己進入聯調。
- 修復和定位 bug 更加便捷，自測階段中對於某些極端的邊界條件，我們自己就可以實現構造資料，模擬邊界條件。
mock 資料的方式（這裡我提供了三種，可自行選擇）
線上 mock 網址： Easy mock （缺點: 當需要修改大量資料和新增很多 api 的時候，比較繁瑣）
jsonserver+gulp 實現（ 缺點：大部分需求都能滿足，但是對於需要動態解析引數的介面，支援的不夠完美 ）
node+express 實現 （ 可實現幾乎所有介面的情況，但是配置起來比第二種麻煩 ）
EasyMock
官網提供詳細的文件和說明，上手比較快，但是對於保密性比較強的公司，建議捨棄這種方式。
JsonServer+Gulp+MockJs
技術選型
- JsonSever 開啟埠，提供服務。
- Gulp 實現監聽檔案和熱更新的功能。
- MockJs 一個成熟的 mock 資料平臺，通過其提供的 api，可以快速的生成大量測試資料。
- babel 配置 es6語法。
專案目錄預覽
介紹
- api 為資料資料夾，配置不同的專案所需要的不同介面以及其返回值，在 index中進行繼承 然後暴露給 mock/db 下 最後暴露給 server。（這個可以自行更改，只要最後暴露出去就可以 api/project.projectOne
let projectOne = {
'getList': {
code: '0',
data: [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher']
}]
},
getInfo: {
error_no: 0,
errMessage: '',
data: {
info: {
'name': 'BeJson',
'url': 'http://www.bejson.com',
'page': 88,
'isNonProfit': true,
'address': {
'street': '科技園路.',
'city': '江蘇蘇州',
'country': '中國'
},
'links': [{
'name': 'Google',
'url': 'http://www.google.com'
},
{
'name': 'Baidu',
'url': 'http://www.baidu.com'
},
{
'name': 'SoSo',
'url': 'http://www.SoSo.com'
}
]
}
}
}
}
module.exports = {
...projectOne
}
複製程式碼api/index (支援 es5 和 es6共存寫法)
const test = require('./test/test.js')
import projectOne from './project/projectOne'
module.exports = {
...test,
...projectOne
}
複製程式碼- mock 資料夾 集中 mock 平臺，我們想要通過 mock 平臺生成的介面放在這個資料夾。 mock/db.js
// var Mock = require('mockjs')
import Mock from 'mockjs'
var api = require('../api')
module.exports = {
...api,
getComment: Mock.mock({
'error': 0,
'message': 'success',
'result|40': [{
'author': '@name',
'comment': '@cparagraph',
'date': '@datetime'
}]
}),
addComment: Mock.mock({
'error': 0,
'message': 'success',
'result|5': [{
'comment': '@cparagraph'
}]
}),
// post/1 和post/2 返回不同的內容
'posts': [{
'id': 1,
'title': 'json-server',
'author': 'typicode'
},
{
'id': 2,
'title': 'json-server',
'author': 'typicode'
}
],
'comments': [{
'id': 1,
'body': 'some comment',
'postId': 1
}],
'profile': {
'name': 'typicode'
}
}
複製程式碼- router資料夾 大致結構和 api 資料夾相似，暴露路由（支援 es6 和 es5 的寫法共存）
import test from './test/test'
const projectOne = require('./project/projectOne')
module.exports = {
...test,
...projectOne
}
複製程式碼router/project/projectOne
module.exports = {
'/localMock/*': '/$1',
'/localMock/getList': '/getList',
'/localMock/getInfo': '/getInfo',
/*
如果沒有'/localMock/*': '/$1',
下面介面連線無法訪問到
*/
'/localMock/getInfo?123456+.2345.3434': '/getInfo'
}
複製程式碼- gulpfile 提供監聽檔案和介面熱更新的功能
- main.js 中 提供babel 配置 es6 的寫法
- server.js 中 啟動埠，配置路由和介面返回值。
執行預覽
如何執行？
git clone https://github.com/majunchang/localMock.git
cd localMock
npm i
npm dev | npm run start | npm run mock (都可以啟動)
npm run gulp ( 啟動並且可以熱更新 )
複製程式碼在查詢了關於jsonserver 的 router 配置方式以後，總感覺對於動態執行引數的介面支援的不太好，於是就有了 nodemock（什麼分頁，什麼查詢等，處理起來就是一把梭！ 複製貼上 就是剛！）
NodeMock(node+express+嗯？...)
專案目錄
- api 配置介面以及介面返回值（類似與上面的 localmock 的配置）
api/projectOne
import Mock from 'mockjs'
let projectOne = {
getme: {
name: 'xiaohong',
age: 21,
gender: '男',
xuexi: 'cha11'
},
getshe: Mock.mock({
'error': 0,
'message': 'success',
'result|1': [{
'author': '@name',
'comment': '@cparagraph',
'date': '@datetime'
}]
}),
liyitong: Mock.mock({
'error': 0,
'message': 'success',
'result|3': [{
'author': '@name',
'comment': '@cparagraph',
'date': '@datetime'
}]
})
}
export default projectOne
複製程式碼- controller 配置動態查詢引數的請求 示例中給出了 get 和 post 的兩種情況
controller/project.js
import Mock from 'mockjs'
export function test(req, res) {
var arr = Mock.mock({
'error': 0,
'message': 'success',
'result|10': [{
'author': '@name',
'comment': '@cparagraph',
'date': '@datetime'
}]
})
res.json({
arr
})
}
export function geturl(req, res) {
// 對於介面中的 get 引數 我們使用 query 獲取即可
const {
num
} = req.query
res.json({
name: 111,
age: 11,
message: req.originalUrl,
num: `get 請求中的介面 num 為${num}`,
})
}
export function postUrl(req, res) {
// 針對普通的 post 請求 如果是表單格式的需要單獨配置一下
res.json({
name: `post 請求的介面中，post引數為${req.body}`,
age: 11,
message: req.originalUrl,
})
}
複製程式碼- router 中為路由配置
- app.js 啟動埠服務，接受路由和介面配置
- main.js babel 配置es6 語法
執行預覽
這個專案，沒有預覽所有介面的功能。感興趣的讀者可以自己新增(當訪問指定連結時，獲取router 中的資訊 進行展示出來，解決方法不唯一，可以查文件 自己新增)。
專案啟動
git clone https://github.com/majunchang/node-mock
cd node-mock
npm i
npm run dev
複製程式碼End
文章如有錯誤和不正之處，歡迎指正和批評，同時也希望大家多多支援,非常感謝。
