摘要：下面的實(shí)例程序創(chuàng)建了一個(gè)路由模塊，并加載了一個(gè)中間件，定義了一些路由，并且將它們掛載至應(yīng)用的路徑上。該路由使用的中間件定義網(wǎng)站主頁(yè)的路由定義頁(yè)面的路由然后在應(yīng)用中加載路由模塊應(yīng)用即可處理發(fā)自和的請(qǐng)求，并且調(diào)用為該路由指定的中間件。

GitHub項(xiàng)目地址：git@github.com:zhangying2345/simuLocDataVue.git

路由是指如何定義應(yīng)用的端點(diǎn)（URIs）以及如何響應(yīng)客戶端的請(qǐng)求。

// 匹配根路徑的請(qǐng)求
app.get("/", function (req, res) {
  res.send("root");
});

// 匹配 /about 路徑的請(qǐng)求
app.get("/about", function (req, res) {
  res.send("about");
});

// 匹配 /random.text 路徑的請(qǐng)求
app.get("/random.text", function (req, res) {
  res.send("random.text");
});

從本質(zhì)上來(lái)說(shuō)，一個(gè) Express 應(yīng)用就是在調(diào)用各種中間件。
中間件（Middleware） 是一個(gè)函數(shù)，它可以訪問(wèn)請(qǐng)求對(duì)象（request object (req)）, 響應(yīng)對(duì)象（response object (res)）, 和 web 應(yīng)用中處于請(qǐng)求-響應(yīng)循環(huán)流程中的中間件，一般被命名為 next 的變量。

var app = express();

// 沒(méi)有掛載路徑的中間件，應(yīng)用的每個(gè)請(qǐng)求都會(huì)執(zhí)行該中間件
app.use(function (req, res, next) {
  console.log("Time:", Date.now());
  next();
});

// 掛載至 /user/:id 的中間件，任何指向 /user/:id 的請(qǐng)求都會(huì)執(zhí)行它
app.use("/user/:id", function (req, res, next) {
  console.log("Request Type:", req.method);
  next();
});

// 路由和句柄函數(shù)(中間件系統(tǒng))，處理指向 /user/:id 的 GET 請(qǐng)求
app.get("/user/:id", function (req, res, next) {
  res.send("USER");
});

可使用 express.Router 類創(chuàng)建模塊化、可掛載的路由句柄。Router 實(shí)例是一個(gè)完整的中間件和路由系統(tǒng)，因此常稱其為一個(gè) “mini-app”。

下面的實(shí)例程序創(chuàng)建了一個(gè)路由模塊，并加載了一個(gè)中間件，定義了一些路由，并且將它們掛載至應(yīng)用的路徑上。

var express = require("express");
var router = express.Router();

// 該路由使用的中間件
router.use(function timeLog(req, res, next) {
  console.log("Time: ", Date.now());
  next();
});
// 定義網(wǎng)站主頁(yè)的路由
router.get("/", function(req, res) {
  res.send("Birds home page");
});
// 定義 about 頁(yè)面的路由
router.get("/about", function(req, res) {
  res.send("About birds");
});

module.exports = router;

然后在應(yīng)用中加載路由模塊：

var birds = require("./birds");
...
app.use("/birds", birds);

應(yīng)用即可處理發(fā)自 /birds 和 /birds/about 的請(qǐng)求，并且調(diào)用為該路由指定的 timeLog 中間件。

webpack-dev-server 為你提供了一個(gè)簡(jiǎn)單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載(live reloading)。

const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CleanWebpackPlugin = require("clean-webpack-plugin");

  module.exports = {
    entry: {
      app: "./src/index.js",
      print: "./src/print.js"
    },
    devtool: "inline-source-map",
 +   devServer: {
 +     contentBase: "./dist"
 +   },
    plugins: [
      new CleanWebpackPlugin(["dist"]),
      new HtmlWebpackPlugin({
        title: "Development"
      })
    ],
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
  };

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問(wèn)文件。類似于通過(guò) Express 內(nèi)置的 express.static 托管靜態(tài)文件，例如圖片、CSS、JavaScript 文件等，通過(guò)文件路徑就可以訪問(wèn)文件了。

devServer.before

提供在服務(wù)器內(nèi)部的所有其他中間件之前執(zhí)行定制中間件的功能。 這可以用來(lái)定義自定義處理程序，例如：

  app.get("/some/path", function(req, res) {
    res.json({ custom: "response" });
  });
}

webpack-dev-middleware 是一個(gè)容器(wrapper)，它可以把 webpack 處理后的文件傳遞給一個(gè)服務(wù)器(server)。 webpack-dev-server 在內(nèi)部使用了它。

讀取本地所有json文件的相對(duì)路徑

require這些相對(duì)路徑讀取文件內(nèi)容

把讀取到的內(nèi)容全部放到一個(gè)json文件中

對(duì)每個(gè)本文件中的url路徑設(shè)置express的路由監(jiān)聽(tīng)

監(jiān)聽(tīng)到的每個(gè)路徑采用res.send返回結(jié)果，結(jié)果是通過(guò)url對(duì)應(yīng)的key去往步驟3的json文件中去取對(duì)應(yīng)的對(duì)象

var glob = require("glob");
const express = require("express")
const app = express()
var apiRoutes = express.Router()
var appData = require("../data/config")
var getApi= appData["get"];//所有的get請(qǐng)求
console.log("-----",getApi);
var postApi= appData["post"];//所有的post請(qǐng)求

//查找所有的json文件
var entryJS = {};
/*https://www.mgenware.com/blog/?p=2716---使用特殊的**來(lái)遞歸返回所有子目錄內(nèi)的文件，因?yàn)槟J(rèn)node-glob只會(huì)返回一級(jí)子目錄下得內(nèi)容。*/
let jsonFilesList = glob.sync("./data/**/*.json");
console.log("jsonFilesList-----",jsonFilesList);
/*獲取所有json文件的相對(duì)路徑（相對(duì)于本文件)））*/
entryJS = jsonFilesList.reduce(function (prev, curr) {
  console.log("curr------",curr);
  console.log("curr.slice(7)------",curr.slice(7));
  console.log("prev[curr.slice(7)---------",prev[curr.slice(7)]);
  prev[curr.slice(7)] = "."+curr;
  console.log("prev---",prev);
  return prev;
}, {});

//合并所有的json文件到一個(gè)json中
let jsonData={};
for (var i in entryJS){
  console.log("entryJS-----",entryJS);
  let data = require(entryJS[i]);
  jsonData = Object.assign(jsonData, data);
  console.log("jsonData----->",jsonData);
}
console.log("jsonData--All--->",jsonData);
app.use("/", apiRoutes)

然后在devServer中添加

before (app) {
      //get//
      for(var i = 0;i < getApi.length; i++){
        console.log("getApi------->",getApi);
        var getData = jsonData[getApi[i].key];
        console.log("getData----->",getData);
        app.get(getApi[i].url, function (req, res) {
          res.json(getData);
        });
      }
      //post
      /*for(var i = 0;i < postApi.length; i++){
        var postData = jsonData[postApi[i].key];
        app.post(postApi[i].url,function (req, res) {
          res.json(postData);
        });
      }*/
    }
    ////////////////////////////

config.js中

let data={
  "get":[
    {
      "url":"/api/goods",
      "key":"goods"
    },
    {
      "url":"/api/sells",
      "key":"sells"
    }
  ],
  "post":[{
    "url":"api/sell",
    "key":"sells"
  }]
}
module.exports = data;

就可以模擬本地?cái)?shù)據(jù)了。