vue项目实践-添加express-mockjs进行数据模拟

易墨2018年7月29日大约 2 分钟

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"

    }

  ]

}


/**

 * 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 配置
图片
访问示例
图片