Express框架定制路由實(shí)例分析
1、序言
上一節(jié)快速搭建Express開發(fā)系統(tǒng)步驟,對如何使用express-generator創(chuàng)建一個WEB項(xiàng)目進(jìn)行了說明,本節(jié)我們會對這個項(xiàng)目的代碼進(jìn)行分析,完成一個路由功能的開發(fā)。涉及的知識點(diǎn)有以下幾個:
- 開發(fā)一個路由模塊(可以支持get和post請求)
- 測試(get請求用瀏覽器驗(yàn)證、post請求呢,我就用postman簡單處理一下,因?yàn)楸竟?jié)課程沒有想去講web端post請求的知識,后續(xù)有機(jī)會單獨(dú)講解吧)
2、開發(fā)一個路由模塊
在上一篇文章中講到,我們以http://localhost:3000/system 路由為例,制作它的get和post請求路由。步驟如下:
2.1 在routes目錄下創(chuàng)建system.js文件
代碼內(nèi)容如下
var express = require("express");var router = express.Router();// get routerrouter.get("/", function(req, res, next) { res.send("<p>這是get請求/system返回的資源</p>")});// post routerrouter.post("/:id", function(req, res, next) { var id = req.params.id; //注意這里的id是/:id指定的路由參數(shù) var name = req.body.name; var tel = req.body.tel; res.json({status:"ok",message:"你發(fā)送的內(nèi)容("+ id + "、" + name + "、" + tel +")服務(wù)器已經(jīng)收到" });});module.exports = router;
解釋一下,router.get用于響應(yīng)http的get請求,router.post用于響應(yīng)http的post請求。我們在第三部分驗(yàn)證時,分別會通過瀏覽器和postman分別來對/system路由發(fā)起get和post請求。
此外,/:id這部分會映射到用戶的url請求路徑中,如你的請求鏈接是http://localhost:3000/system/2402040134,那么在post的處理函數(shù)中,會將:id匹配到2402040134這個值,相當(dāng)于是一個url參數(shù)。同時,要注意,在代碼中獲取id的值時,使用的是req.params這個對象。不可與req.body混淆。
2.2、如何使路由模塊生效
不過,目前這個代碼還沒有被注冊到/system路徑下,接下來我們需要在app.js中添加幾行代碼。
注:在app.js中第9行引入我們的system.js模塊,第24行,將這個模塊注冊在/system路徑上。
3、測試驗(yàn)證
在vs code中沒有顯示powershell控制臺時,可以使用ctrl+` 喚醒。然后輸入npm start
,啟動我們的項(xiàng)目。
3.1 驗(yàn)證router.get
這里我們通過瀏覽器訪問/system,就可以執(zhí)行到router.get后邊的方法,看看是否會得到預(yù)期的返回(是一段Html內(nèi)容)。
3.2 驗(yàn)證router.post
安裝postman的過程我不在這里描述了,大家自行安裝一下。以下截圖是我請求界面的信息及驗(yàn)證結(jié)果。
注意,在上圖中url中的2402040134即路由參數(shù),下方的name和tel是post的請求body內(nèi)容。最后,可以看到,返回了我們預(yù)期的json內(nèi)容。
4、總結(jié)
內(nèi)容不是很復(fù)雜,寫得比較簡單,為了方便初學(xué)的朋友跟著練習(xí)。當(dāng)然,不忘預(yù)告一下,下一章節(jié)我會以本文中提到的router.get請求為重點(diǎn),引入ejs模板的使用,讓大家可以通過res對象,通過數(shù)據(jù)+模板的方式,完成服務(wù)器端渲染生成頁面。
相關(guān)文章:
1. 使用本機(jī)IIS?Express開發(fā)Asp.Net?Core應(yīng)用圖文教程2. Vue+express+Socket實(shí)現(xiàn)聊天功能3. express框架通過ejs模板渲染輸出頁面實(shí)例分析4. IIS Express 取代 ASP.NET Development Server的配置方法5. 初學(xué)者如何快速搭建Express開發(fā)系統(tǒng)步驟詳解6. express框架+bootstrap美化ejs模板實(shí)例分析7. Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進(jìn)行日期格式化的實(shí)現(xiàn)方法8. Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)9. VUE+Express+MongoDB前后端分離實(shí)現(xiàn)一個便簽墻
