開發那點事（十四）大前端威武！！！一招教你再也不用苦苦等待後臺接口

寫在前面的話

公司開發一直是前後端分離的模式。每次接口聯調時間，跟後臺的溝通的成本都比較大，自從封裝了這個基於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"
  }
}