GitHub项目地址：git@github.com:zhangying2345/simuLocDataVue.git背景知识简单快速路由路由是指如何定义应用端点（URI）以及如何响应客户端请求。//匹配根路径的请求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('随机文本');});本质上，一个Express应用程序正在调用各种中间件。中间件（Middleware）是Web应用程序中可以访问请求对象（requestobject（req））、响应对象（responseobject（res））、请求-响应循环过程中的中间件的函数，一般命名为A下一个变量。varapp=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('RequestType:',req.method);next();});//路由和handle函数（中间件系统），处理指向/user/:GETrequestforidapp.get('/user/:id',function(req,res,next){res.send('USER');});express.Router可以使用express.Router类来创建模块化的、可挂载的路由句柄。Router实例是一个完整的中间件和路由系统，因此常被称为“小程序”。下面的示例程序创建一个路由模块，加载一个中间件，定义一些路由，并将它们挂载到应用程序路径。varexpress=require('express');varrouter=express.Router();//中间件router.use(functiontimeLog(req,res,next){console.log('Time:',Date.now());next();});//定义网站首页的路由router.get('/',function(req,res){res.send('小鸟首页');});//定义关于页面的路由router.get('/about',function(req,res){res.send('Aboutbirds');});module.exports=路由器；然后在应用程序中加载路由模块：varbirds=require('./birds');...app.use('/birds',birds);应用程序可以处理来自/birds和/birds/about的请求，并调用指定的路由timeLog中间件。webpack-dev-serverwebpack-dev-server为您提供了一个简单的Web服务器，可以实时重新加载。constpath=require('路径');constHtmlWebpackPlugin=require('html-webpack-plugin');constCleanWebpackPlugin=require('clean-webpack-plugin');module.exports={条目：{应用程序：'。/src/index.js',print:'./src/print.js'},devtool:'inline-source-map',+devServer:{+contentBase:'./dist'+},plugins:[newCleanWebpackPlugin(['dist']),newHtmlWebpackPlugin({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-中间件webpack-dev-middleware是一个容器（wrapper），它可以将webpack处理后的文件传递给一个服务器（server）。webpack-dev-server在内部使用它。模拟数据的基本原理读取本地所有json文件的相对路径需要这些相对路径读取文件内容将读取到的内容全部放到一个json文件中并在这个文件中为每个url路径设置expressroute监听每个路径使用res.send返回结果，结果是去第3步的json文件中通过url对应的key获取对应的对象varglob=require('glob');constexpress=require('express')constapp=express()varapiRoutes=express.Router()varappData=require('../data/config')vargetApi=appData['get'];//全部getrequestsconsole.log('-----',getApi);varpostApi=appData['post'];//所有post请求//查找所有json文件varentryJS={};/*https://www.mgenware.com/blog/?p=2716---使用特殊的**递归返回所有子目录下的文件，因为默认的node-glob只会返回一级子目录的内容。*/letjsonFilesList=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);returnprev;},{});//合并所有json文件为一个jsonletjsonData={};for(variinentryJS){console.log('entryJS-----',entryJS);让data=require(entryJS[i]);jsonData=Object.assign(jsonData,数据);console.log('jsonData----->',jsonData);}console.log('jsonData-->',jsonData);app.use('/',apiRoutes)然后在添加在devServerbefore(app){//get//for(vari=0;i
