mock-server
在新項目開始的時候，后端框架還沒有，前端就有能夠自己操作的模擬數據的服務是可以有的
express-mockjs 是樓教主結合 express+mock-lite 造的一個輪子，可以快速的幫助我們在本地搭建一個 mock 服務器
相關資料：
安裝 express-mockjs 到項目
安裝 express-mockjs(v0.4.9): npm install express-mockjs --save-dev
安裝 nodemon 到項目 以監聽 mock 代碼修改
安裝 nodemon(v1.17.4): npm install nodemon --save-dev
新建 mock-server/index.js 編寫啟動服務器代碼
var path = require('path')
var express = require('express')
var mockjs = require('express-mockjs')
var app = express()
// 自定義路徑 前綴： '/api'
var config = {
port: 3000
}
//以/api為前綴，尋找api目錄下的所有接口
app.use('/api', mockjs(path.join(__dirname, 'api')))
// 獲取port參數 可通過 --port自 定義啟動端口
var args = process.argv
for (let i = 0; i < args.length; i++) {
if (args[i] === '--port' && i < args.length - 1 && args[i + 1] > 0) {
config.port = args[i + 1]
break
}
}
console.log('mock-server[mockjs-lite]:http://localhost:' + config.port)
// console.log('mockjs-lite定義：http://mockjs-lite.js.org/docs/examples.html')
app.listen(config.port)
編寫接口文件
在 mock-server 文件夾創建 api 文件夾，並安裝 expess-mockjs 的文檔編寫 json/js
json
/**
* Interface function description
*
* @url /api-access-path
*
* Parameter description and other instructions.
* uid: user ID
* name: username
* email: the email
* etc.
*/
{
"code": 0,
"result|5": [
{
"uid|+1": 1,
"name": "@name",
"email": "@email"
}
]
}
js
/**
* home page links
*
* @url /home-links
*
* Here you can write a detailed description
* of the parameters of the information.
*/
module.exports = {
code: function() {
// simulation error code, 1/10 probability of error code 1.
return Math.random() < 0.1 ? 1 : 0
},
'list|5-10': [{ title: '@title', link: '@url' }]
}
運行 mock 服務器
在項目的 package.json 中添加 mock 命令並運行：npm run mock
"scripts": {
"dev":
"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0 --port 5555",
//...
"mock": "nodemon --watch mock-server node mock-server/index.js --port 6543"
},
代碼圖示
-
json 定義
-
package.json 配置
-
訪問示例
相關鏈接
文中的實現可以在下面倉庫中找到，不清楚的地方可以直接查看源碼