express+mock+webpack devserver构建前端本地开发mock环境

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

• 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;

整体目录结构如图

page1.png

在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
       } 

启动后访问结果如下图

page2.png

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 便可以使得接口映射到本地了

涉及到的目录结构如图

page4.png

具体访问结果如下

page3.png