开发那点事（十四）大前端威武！！！一招教你再也不用苦苦等待后台接

写在前面的话

公司开发一直是前后端分离的模式。每次接口联调时间，跟后台的沟通的成本都比较大，自从封装了这个基于express框架的接口模拟项目，也算是真正意义上的独立开发了。评审需求，出UI以及接口文档，一把键盘干到上线。

核心思路

• express项目模拟后台接口请求
• nodemon热更新
• 根据接口文档，配置config.js文件

上干货
点我查看 欢迎star

• config.js

将项目接口的内容封装在一个config.js文件中

/*
* 路由配置文件
* method 取值  get   post
* path 路由地址
* status 返回状态码
* response 返回json内容
* */
module.exports = [
    {
        method: 'get',
        path: '/invoice/invoiceOrder/list',
        status: 200,
        response:
            {
                "responseCode": 0,
                "responseMessage": "成功",
                "data": {
                    "orderInfos": [{
                        "orderId": "7454671230101132S5I0VB9OHVH",
                        "stationName": "xxx",
                        "startChargeTime": "2020-05-22 14:40:00",
                        "totalFee": 18,
                        "paidAmount": 2,
                        "discountAmount": 16,
                        "invoiceAmount": 17
                    }]
                }
            }
    }
    , {
        method: 'get',
        path: '/invoice/order/list',
        status: 400,
        response:
            {
                "responseCode": 0,
                "responseMessage": "成功",
                "data": {
                    "totalCount": 100,
                    "totalAmount": 9999,
                    "orderInfos": [{
                        "id": "7454671230101132S5I0VB9OHVH",
                        "stationName": "xxx",
                        "startChargeTime": "2020-05-22 14:40:00",
                        "sendStartChargeTime": "2020-05-22 14:40:00",
                        "totalFee": 18,
                        "paidAmount": 16,
                        "discountAmount": 2,
                        "invoiceAmount": 17
                    }]
                }
            }
    }
]

• 在router/index.js文件中引入配置好的数组通过for循环设置相关的路由信息

var express = require('express');
var router = express.Router();
var dataArray = require('../util/config');

function routerCallBack(req, res, next, item) {
    res.status(item.status);
    //如果状态码为400 返回统一自定义错误
    if (item.status === 400) {
        res.json({
            responseCode: -1,
            responseMessage: '此错误为模拟请求错误',
            data: null
        });
        return;
    }
    //如果状态码为500 返回统一自定义错误
    if (item.status === 500) {
        res.json({
            responseCode: -1,
            responseMessage: '此错误为模拟接口报错',
            data: null
        });
        return;
    }
    res.json(item.response);
}

dataArray.forEach(item => {
    if (item.method !== undefined && item.method === 'post') {
        router.post(item.path, function (req, res, next) {
            routerCallBack(req, res, next, item)
        })
    } else {
        router.get(item.path, function (req, res, next) {
            routerCallBack(req, res, next, item)
        });
    }
})

module.exports = router;

• 安装nodemon

npm install --save nodemon

在package.json中配置

{
  "name": "analog",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon  ./bin/www"   
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "opn": "^6.0.0"
  }
}