express + mock 讓先後臺並行開發

在咱們平時項目剛啓動時，因爲後臺也是剛開始開發，咱們前端每每在開發過程當中沒有數據和接口請求的，都要造一些假數據進去或者使用mock造一些數據進去，可是這樣的話每每會偶合一些沒用的代碼進去。到時候還得刪除。

下面來介紹一種 express + mock 讓先後臺並行開發。

先後須要先商量好數據格式，等等一系列細節問題，先很少說直接上代碼

app.js

'use strict';

const express = require('express');
const app = express();

// port
let NODE_PORT = process.env.PORT || 4000;
// 監聽 /user
app.use('/user', function(req, res) {
  // 讓接口 500-1000ms 返回 好讓頁面有個loading
  setTimeout(() => {
    res.json({
      status: 1,
      msg: '查詢成功',
      data: {
          name: '張三'
      }
    });
  }, Math.random() * 500 + 500);
});

app.listen(NODE_PORT, function() {
  console.log('mock服務在' + NODE_PORT + '端口上已啓用！');
});

接下來咱們當前文件打開命令窗口運行 node app.js
而後打開瀏覽器 輸入 http://localhost:4000/user

就完成了一個簡單的模擬數據，接下來咱們完善下需求

若是咱們在本地開發中有時候 端口不一樣會報跨域問題，因此咱們須要在 app.js 添加一下代碼

const cors = require('cors');
app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['conten-Type', 'Authorization']
}));

這樣就能夠在別的端口訪問或者別的ip內網（你同時）訪問了。

若是咱們須要訪問一些靜態文件的能夠添加一下代碼

// './' 根據本身的需求本身配置
app.use(express.static(path.join(__dirname, './')));

// 配置nodeman熱更新
nodemon 能夠按照需求本身配置
接下來繼續完善， 在開發中咱們不可能只有一個接口，因此咱們在優化下。

app.js

'use strict';

const express = require('express');
const cors = require('cors');
const path = require('path');
const userRoutes = require('./user');
const areaRoutes = require('./area');
const nameListRoutes = require('./name-list');
const app = express();

app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['conten-Type', 'Authorization']
}));

// port
let NODE_PORT = process.env.PORT || 4000;
app.use(express.static(path.join(__dirname, './')));

app.use('/user', userRoutes);
app.use('/area', areaRoutes);
app.use('/nameList', nameListRoutes);

app.listen(NODE_PORT, function() {
  console.log('mock服務在' + NODE_PORT + '端口上已啓用！');
});

咱們須要在同級目錄添加如下文件
./user/index.js , /user/area.js, /name-list/index.js

./user/index.js 中的內容以下

'use strict';
const express = require('express');
const Mock = require('mockjs');
const apiRoutes = express.Router();

let random = Math.random() * 500 + 500;
// 訪問 /user/ 時
apiRoutes.get('/', function(req, res) {
  setTimeout(() => {
    res.json({
      status: 1,
      msg: '查詢成功',
      data: {
          name: '張三'
      }
    });
  }, random);
});
// 訪問 /user/1111 時
apiRoutes.get('/idList', function(req, res) {
  setTimeout(() => {
    res.json({
      status: 1,
      msg: 'OK',
      data: Mock.mock({
            'list|1-10': [{
              'id|+1': 1
            }]
        })
    });
  }, random);
});

module.exports = apiRoutes;

咱們如今在瀏覽器中訪問

咱們初步模擬數據基本就完成了。

接下須要在項目中用了

先區分環境

// 判斷是不是本地開發
const isDev = process.env.NODE_ENV ==='development';
// 設置 host 本地走mock 生產環境走相對路徑 /user/
const host = isDev ? 'http://localhost:4000' : ''

fetch(`${host}/user/`)
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data );
  });

假設咱們在本地訪問

數據都能拿到了， 在試一下 別的域名訪問

跨域問題也OK。

咱們在設置下 package.json 在你本地開發的命令後臺添加 && node xx/aap.js 或者單獨一個命令窗口運行

好了介紹到此。