GitHub項目地點：git@github.com:zhangying2345/simuLocDataVue.git

背景學問

簡樸的express路由

路由是指怎樣定義運用的端點（URIs）以及怎樣相應客戶端的要求。

// 婚配根途徑的要求
app.get('/', function (req, res) {
  res.send('root');
});

// 婚配 /about 途徑的要求
app.get('/about', function (req, res) {
  res.send('about');
});

// 婚配 /random.text 途徑的要求
app.get('/random.text', function (req, res) {
  res.send('random.text');
});

從本質上來講，一個 Express 運用就是在挪用種種中間件。
中間件（Middleware） 是一個函數，它可以接見要求對象（request object (req)）, 相應對象（response object (res)）, 和 web 運用中處於要求-相應輪迴流程中的中間件，平常被命名為 next 的變量。

var app = express();

// 沒有掛載途徑的中間件，運用的每一個要求都邑實行該中間件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 掛載至 /user/:id 的中間件，任何指向 /user/:id 的要求都邑實行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函數(中間件體系)，處置懲罰指向 /user/:id 的 GET 要求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});

express.Router

可運用 express.Router 類豎立模塊化、可掛載的路由句柄。Router 實例是一個完全的中間件和路由體系，因而常稱其為一個 “mini-app”。

下面的實例順序豎立了一個路由模塊，並加載了一个中間件，定義了一些路由，而且將它們掛載至運用的途徑上。

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

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

module.exports = router;

然後在運用中加載路由模塊：

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

運用即可處置懲罰發自 /birds 和 /birds/about 的要求，而且挪用為該路由指定的 timeLog 中間件。

webpack-dev-server

webpack-dev-server 為你供應了一個簡樸的 web 效勞器，而且可以及時從新加載(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 下豎立效勞，將 dist 目錄下的文件，作為可接見文件。類似於經由過程 Express 內置的 express.static 託管靜態文件，比方圖片、CSS、JavaScript 文件等，經由過程文件途徑就可以接見文件了。

• devServer.before

供應在效勞器內部的一切其他中間件之前實行定製中間件的功用。 這可以用來定義自定義處置懲罰順序，比方：

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

webpack-dev-middleware

webpack-dev-middleware 是一個容器(wrapper)，它可以把 webpack 處置懲罰后的文件傳遞給一個效勞器(server)。 webpack-dev-server 在內部運用了它。

模仿數據基本原理

1. 讀取當地一切json文件的相對途徑
2. require這些相對途徑讀取文件內容
3. 把讀取到的內容悉數放到一個json文件中
4. 對每一個本文件中的url途徑設置express的路由監聽
5. 監聽到的每一個途徑採納res.send返回效果，效果是經由過程url對應的key去往步驟3的json文件中去取對應的對象

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要求
console.log('-----',getApi);
var postApi= appData['post'];//一切的post要求

//查找一切的json文件
var entryJS = {};
/*https://www.mgenware.com/blog/?p=2716---運用特別的**來遞歸返回一切子目錄內的文件，由於默許node-glob只會返回一級子目錄下得內容。*/
let jsonFilesList = glob.sync('./data/**/*.json');
console.log('jsonFilesList-----',jsonFilesList);
/*獵取一切json文件的相對途徑（相對於本文件)））*/
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文件到一個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;

就可以模仿當地數據了。