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;

就可以模拟本地数据了。