express+mockjs+nodemon 搭建一个mock服务,方便前端开发 (demo已经上传到github,地址:https://github.com/Amosyue/mockServe
使用mockjs的方式
1、在项目入口文件中直接引入配置好的mock文件
这种方法需要在项目内引入mock并创建相关配置文件,根据环境来配置,代码耦合度太高
2、配合express启一个服务
这样就相当于模拟了真实的接口,netWork可以看到请求,并且可以不在该项目中做任何配置直接向服务发起请求即可。
这里我们只说下第二种情况,这样项目和mock数据分离,需要mock数据的时候只需要启动本地mock服务即可,代码耦合度低。
实例操作配置
1、安装express,mockjs
npm i express mockjs --save-dev
2、在项目的根目录创建index.js
const app = require('express')(); //实例化express // 代理部分请求 app.get('/proxy/lanmu1/test2', function (req, res) { console.log('post /lanmu1/test2') res.send({ code: 200, data: 'token string', msg: 'mock-server:模拟数据' }) }); app.get('/mock/api', function (req, res) { // mockjs中属性名‘|’符号后面的属性为随机属性,数组对象后面的随机属性为随机数组数量,正则表达式表示随机规则,+1代表自增 res.json({"name":'ss999999'}); }); // 监听3001端口 app.listen('3001');
3、设置启动命令
如果不设置启动命令,那么此步骤可省略。启动命令默认是 node index.js.
如果配置启动命令如下:
"scripts": { "mock": "node index.js" }
这样只需要npm run mock就可以了
到这里其实简单的mock服务已经配置好了,运行npm run mock,项目就可以启动了,你可以在其他项目中调用你写在mock服务里的接口了。
4、配置nodemon
到第3步,其实已经配置好了,但是有个小问题,如果你添加或者删除了默写数据接口,你必须重启服务,没有热更新,这步就是为了解决这个问题。
1、安装nodemon
npm i nodemon --save-dev
2、在根目录创建serve.js
var nodemon = require('nodemon'); //引入nodemon模块 /** * script 重启的脚本 * ext 检测的文件类型 * watch 监听哪些文件,文件夹,如果配置此字段,那么nodemon就会匹配当前字段下的文件 * ignore 忽略哪些文件 */ nodemon({ script: './index.js', ignore:[], watch: [ 'api/', 'index.js' ], ext: 'js json' }); nodemon.on('start', function () { console.log('mockServer has started'); }).on('quit', function () { console.log('mockServer has quit'); process.exit(); }).on('restart', function (files) { console.log('mockServer restarted due to: ', files); });
3、配置启动命令
"scripts": { "serve": "node serve.js" }
到此已经完成,启动服务 npm run serve。这样你就重新添加了接口数据,服务会自动重新启动。
demo地址:https://github.com/Amosyue/mockServe](https://github.com/Amosyue/mockServe