vue項目實踐-添加express-mockjs進行數據模擬

mock-server

在新項目開始的時候，後端框架尚未，前端就有可以本身操做的模擬數據的服務是能夠有的

express-mockjs 是樓教主結合 express+mock-lite 造的一個輪子，能夠快速的幫助咱們在本地搭建一個 mock 服務器

相關資料：

• express-mockjs
• mock-lite
• express

安裝 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 配置
  

• 訪問示例
  

相關連接

文中的實現能夠在下面倉庫中找到，不清楚的地方能夠直接查看源碼

• 倉庫源碼: https://github.com/yimogit/me-admin-template
• 模板預覽: https://vue-admin.yimo.link