摘要:下面的實例程序創建了一個路由模塊,并加載了一個中間件,定義了一些路由,并且將它們掛載至應用的路徑上。該路由使用的中間件定義網站主頁的路由定義頁面的路由然后在應用中加載路由模塊應用即可處理發自和的請求,并且調用為該路由指定的中間件。
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;
就可以模擬本地數據了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95607.html
摘要:實現前后端分離的心得對目前的來說,前后端分離已經變得越來越流行了,越來越多的企業網站都開始往這個方向靠攏。前后端工作分配不均。 實現前后端分離的心得 對目前的web來說,前后端分離已經變得越來越流行了,越來越多的企業/網站都開始往這個方向靠攏。那么,為什么要選擇前后端分離呢?前后端分離對實際開發有什么好處呢? 為什么選擇前后端分離 在以前傳統的網站開發中,前端一般扮演的只是切圖的工作...
摘要:如何去解決這些問題前后端分離大部分的互聯網公司都分成了前端團隊和后端團隊。方案一采用架構業界很多公司會采用,單頁應用的架構,這種架構是天然的前后端分離的。方案二淘寶的大前端方案中途島上圖是淘寶基于的前后端分離分層,以及的職責范圍。 我們遇到了什么問題? 1.前端無法調試后端未完成的 API:如果后端同學還沒有完成 API 開發,那么前端同學就不能對這個 API 進行開發。之前我們都是在...
摘要:優雅的使用框架,爬取唐詩別苑網的詩人詩歌數據同時在幾種動態加載技術中對比作選擇雖然差不多兩年沒有維護,但其本身是一個優秀的爬蟲框架的實現,源碼中有很多值得參考的地方,特別是對爬蟲多線程的控制。 優雅的使用WebMagic框架,爬取唐詩別苑網的詩人詩歌數據 同時在幾種動態加載技術(HtmlUnit、PhantomJS、Selenium、JavaScriptEngine)中對比作選擇 We...
摘要:爬蟲介紹二爬蟲的分類通用網絡爬蟲全網爬蟲爬行對象從一些種子擴充到整個,主要為門戶站點搜索引擎和大型服務提供商采集數據。 分分鐘教你用node.js寫個爬蟲 寫在前面 十分感謝大家的點贊和關注。其實,這是我第一次在segmentfault上寫文章。因為我也是前段時間偶然之間才開始了解和學習爬蟲,而且學習node的時間也不是很長。雖然用node做過一些后端的項目,但其實在node和爬蟲方面...
閱讀 3109·2021-11-24 09:39
閱讀 968·2021-09-07 10:20
閱讀 2389·2021-08-23 09:45
閱讀 2254·2021-08-05 10:00
閱讀 565·2019-08-29 16:36
閱讀 833·2019-08-29 11:12
閱讀 2812·2019-08-26 11:34
閱讀 1839·2019-08-26 10:56