摘要:下面的实例程序创建了一个路由模块,并加载了一个中间件,定义了一些路由,并且将它们挂载至应用的路径上。该路由使用的中间件定义网站主页的路由定义页面的路由然后在应用中加载路由模块应用即可处理发自和的请求,并且调用为该路由指定的中间件。
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-serverwebpack-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 在内部使用了它。
模拟数据基本原理读取本地所有json文件的相对路径
require这些相对路径读取文件内容
把读取到的内容全部放到一个json文件中
对每个本文件中的url路径设置express的路由监听
监听到的每个路径采用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;
就可以模拟本地数据了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95607.html
摘要:实现前后端分离的心得对目前的来说,前后端分离已经变得越来越流行了,越来越多的企业网站都开始往这个方向靠拢。前后端工作分配不均。 实现前后端分离的心得 对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢? 为什么选择前后端分离 在以前传统的网站开发中,前端一般扮演的只是切图的工作...
摘要:如何去解决这些问题前后端分离大部分的互联网公司都分成了前端团队和后端团队。方案一采用架构业界很多公司会采用,单页应用的架构,这种架构是天然的前后端分离的。方案二淘宝的大前端方案中途岛上图是淘宝基于的前后端分离分层,以及的职责范围。 我们遇到了什么问题? 1.前端无法调试后端未完成的 API:如果后端同学还没有完成 API 开发,那么前端同学就不能对这个 API 进行开发。之前我们都是在...
摘要:优雅的使用框架,爬取唐诗别苑网的诗人诗歌数据同时在几种动态加载技术中对比作选择虽然差不多两年没有维护,但其本身是一个优秀的爬虫框架的实现,源码中有很多值得参考的地方,特别是对爬虫多线程的控制。 优雅的使用WebMagic框架,爬取唐诗别苑网的诗人诗歌数据 同时在几种动态加载技术(HtmlUnit、PhantomJS、Selenium、JavaScriptEngine)中对比作选择 We...
摘要:爬虫介绍二爬虫的分类通用网络爬虫全网爬虫爬行对象从一些种子扩充到整个,主要为门户站点搜索引擎和大型服务提供商采集数据。 分分钟教你用node.js写个爬虫 写在前面 十分感谢大家的点赞和关注。其实,这是我第一次在segmentfault上写文章。因为我也是前段时间偶然之间才开始了解和学习爬虫,而且学习node的时间也不是很长。虽然用node做过一些后端的项目,但其实在node和爬虫方面...
阅读 3093·2021-11-24 09:39
阅读 946·2021-09-07 10:20
阅读 2364·2021-08-23 09:45
阅读 2220·2021-08-05 10:00
阅读 516·2019-08-29 16:36
阅读 815·2019-08-29 11:12
阅读 2795·2019-08-26 11:34
阅读 1824·2019-08-26 10:56