express+mockjs+webpack devserver构建前端本地开发mock环境
概述
背景
实际项目开发过程中，前后端接口约定格式后，基本上就暂时的“小别离”直到联调阶段再重逢。那么这段小别离的时光中，前端如何独立于后端快速先行呢？答案就是：前端搭建自己的mock环境，本文的主要目的就是跟大家分享一下，我是如何实现一键启动前端本地开发mock环境。
涉及的主要技术点
- 1：使用express+mockjs实现动态模拟接口
- 2：使用webpack.mock.conf.js 配置mock环境
- 3：使用webpack devserver proxy 实现后端接口自动匹配到本地
- 4：package.json 配置一键启动命令
1：使用express+mock实现动态模拟接口
点击以下内容，了解express 和 mockjs
1.1：安装express
npm install --save express
在项目根目录下建立mock文件，mock文件夹中新建server.js，内容如下
var express = require("express")
var app = express();
var router = express.Router();
app.get('/', function(req, res) {
res.send('this is my mock demo');
});
app.listen(3000)
执行
node mock/server.js
浏览器输入http://localhost:3000
页面展示this is my mock demo
如果使用npm管理包，在package.json的scripts加入
"mock": "node ./mock/server.js"
只需要执行
npm run mock
启动服务即可
1.2 引入mockjs
接下来就是引入mockJs ,首先安装mockjs
npm install --save-dev mockjs
我们在mock的目录下面新建test.js加入代码，mock的语法这里不说了。请看mock文档的讲述，有很多知识点。
在mock目录下建立bm文件夹，bm文件夹建立index.js
var Mock = require("mockjs")
var express = require("express")
var router = express.Router();
router.use("/get_staff_kpi_list",function (req,res) {
//调用mock方法模拟数据
var data = Mock.mock({
'list|1-10': [
{
'qq_number|+1':"1302507089",
'operator_name': "test",
'wechat_number': "zixue0505",
'year|+1': 2019
}
],
config:{
page: 1,
page_size: 10,
total_num: 4,
total_page: 1
}
}
);
return res.json(data);
})
module.exports = router;
整体目录结构如图
在mock目录下修改server.js
var express = require("express")
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
var router = express.Router();
app.get('/', function(req, res) {
res.send('this is my mock demo');
});
router.use("/bm/",require('./bm/index'));
app.use("/mock",router)
app.listen(3000)
为了防止跨域
在webpack中的devserver中加入以下配置
'/mock':{
target:"http://localhost:3000",
secure: false
}
启动后访问结果如下图
1.3 使用webpack devserver proxy 实现后端接口自动匹配到本地
mock环境调通之后，我们需要转到dev环境进行前后端联调，那么如何实现不修改代码即可无缝切换到dev环境呢？答案就是通过webpack devserver 的proxy代码，mock环境下把访问后端的接口地址直接映射到我们的mock目录中
devserver中配置如下，其中agp是接口的根目录，需要把agp目录下的接口文件映射到本地的mock目录中
proxy: {
'/agp': {
target: 'http://localhost:3000',
filter: function (pathname, req) {
return pathname.match('^/agp')
},
pathRewrite: function(pathname, option) {
option.method = 'GET';
return pathname.replace(/^\/agp/, 'mock')
},
secure: false
}
}
1.4 package.json中设置一键启动
配置如下
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"devmock": "webpack-dev-server --inline --progress --config build/webpack.mock.conf.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.prod.conf.js",
"eject": "react-scripts eject",
"mock": "node ./mock/server.js",
"mockdev": "npm run mock & npm run devmock"
},
执行npm run mockdev 便可以使得接口映射到本地了
涉及到的目录结构如图
具体访问结果如下
