摘要:在向頁面發(fā)送內(nèi)容時,程序也不會往下執(zhí)行我們也可以裝在一組中間件路由級中間件路由級中間件和應(yīng)用級中間件一樣,只是它綁定的對象為。安裝所需功能的模塊,并在應(yīng)用中加載,可以在應(yīng)用級加載,也可以在路由級加載。
Express 框架
根據(jù)官方的介紹,Express 是一個基于 Node.js 平臺的極簡、靈活的 web 應(yīng)用開發(fā)框架,可以輕松的創(chuàng)建各種 web 或者移動端應(yīng)用
今天就來簡單的了解一下 Express 框架
安裝首先安裝 Express ,新建一個工作文件夾,并命名為 myapp ,在此文件夾下進行環(huán)境的初始化:
npm init
官方推薦的入口文件名為 app.js
entry point: (index.js) app.js
當然也可以使用 npm 默認的 index.js 的文件名
接下來安裝 Express
npm install express --save
環(huán)境準備完成,現(xiàn)在嘗試創(chuàng)建一個 Express 應(yīng)用
進入 myapp 目錄,新建一個 app.js 的文件,復(fù)制如下代碼:
const express=require("express"); const app=express(); app.get("/",(req,res)=>{ res.send("這是一個 Express 應(yīng)用") }); var server=app.listen(3000,()=>{ console.log("服務(wù)已啟動 http://localhost:3000") })
上面的代碼啟動一個服務(wù)并監(jiān)聽從 3000 端口進入的所有連接請求。他將對所有 (/) URL 或 路由 返回 “這是一個 Express 應(yīng)用” 字符串。對于其他所有路徑全部返回 404
啟動這個應(yīng)用
node app.jsExpress 應(yīng)用生成器
Express 應(yīng)用生成器可以快速創(chuàng)建一個應(yīng)用的骨架
安裝:
npm install express-generator -gd
安裝完畢,創(chuàng)建一個名為myapp的應(yīng)用:
express myapp
這條命令會在當前目錄下創(chuàng)建 myapp 文件夾,并生成應(yīng)用骨架
安裝依賴包
cd myapp npm install
依賴安裝完成就可以啟動此app了
Windows 平臺在 cmd 內(nèi)輸入:
set DEBUG=myapp & npm start
Mac 或者 Linux 平臺輸入:
DEBUG=myapp npm start
然后在瀏覽器中打開 http://localhost:3000/ 網(wǎng)址就可以看到這個應(yīng)用了
當應(yīng)用首次啟動以后,下次啟動只需要輸入 npm start 就行了
打開 package.json 文件,應(yīng)用程序的啟動實際上是依賴于這句代碼:
"scripts": { "start": "node ./bin/www" }路由
Express 的主要內(nèi)容有兩個:
路由
中間件
先來說路由
路由(Routing)是由一個 URI(或者叫路徑)和一個特定的 HTTP 方法(GET、POST 等)組成的,涉及到應(yīng)用如何響應(yīng)客戶端對某個網(wǎng)站節(jié)點的訪問。
每一個路由都可以有一個或者多個處理器函數(shù),當匹配到路由時,這個或者這些函數(shù)將被執(zhí)行。
先寫一個簡單的路由
在 routes 目錄下新建一個 orders.js 的文件:
var express=require("express"); var router=express.Router(); router.get("/",function(req,res,nest){ res.render("orders",{msg:"訂單首頁"}) }) router.get("/list",function(req,res,next){ res.send("訂單列表") }) //導(dǎo)出 module.exports=router;
頁面文件寫好以后需要在在app.js中進行掛載,
var orders=require("./routes/orders"); ··· app.use("/orders",orders)
這兩句最好和其他的路由組件寫在一起
在地址欄輸入對應(yīng)的 url 即可打開響應(yīng)的頁面
路由方法實例:
// 對網(wǎng)站首頁的訪問返回 "Hello World!" 字樣 app.get("/", function (req, res) { res.send("Hello World!"); }); // 網(wǎng)站首頁接受 POST 請求 app.post("/", function (req, res) { res.send("Got a POST request"); }); // /user 節(jié)點接受 PUT 請求 app.put("/user", function (req, res) { res.send("Got a PUT request at /user"); }); // /user 節(jié)點接受 DELETE 請求 app.delete("/user", function (req, res) { res.send("Got a DELETE request at /user"); });中間件
中間件(Middleware) 是一個函數(shù),它可以訪問請求對象(request object (req)), 響應(yīng)對象(response object (res)), 和 web 應(yīng)用中處于請求-響應(yīng)循環(huán)流程中的中間件,一般被命名為 next 的變量。
中間件的分類:
應(yīng)用級中間件
路由級中間件
錯誤處理中間件
內(nèi)置中間件
第三方中間件
應(yīng)用級中間件應(yīng)用級中間件綁定到 app 對象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是需要處理的 HTTP 請求的方法,例如 get , put , post 等
var app = express(); // 沒有掛載路徑的中間件,應(yīng)用的每個請求都會執(zhí)行該中間件 app.use(function (req, res, next) { console.log("Time:", Date.now()); next(); }); // 掛載至 /user/:id 的中間件,任何指向 /user/:id 的請求都會執(zhí)行它 app.use("/user/:id", function (req, res, next) { console.log("Request Type:", req.method); next(); }); // 路由和句柄函數(shù)(中間件系統(tǒng)),處理指向 /user/:id 的 GET 請求 app.get("/user/:id", function (req, res, next) { res.send("USER"); });
在執(zhí)行完一個中間件之后,next() 會使程序繼續(xù)執(zhí)行下一個中間件,如果沒有 next(),程序則不會往下執(zhí)行。
在向頁面發(fā)送內(nèi)容時,程序也不會往下執(zhí)行
我們也可以裝在一組中間件
app.use("/user/:id",function(req,res,next){ console.log("Request URL:", req.originalUrl); next(); },function(req,res,next){ console.log("Request Type:", req.method); next(); })路由級中間件
路由級中間件和應(yīng)用級中間件一樣,只是它綁定的對象為 express.Router()。
在上一節(jié)中,我們自己寫的 orders.js ,其內(nèi)容就是一個路由級中間件
路由級使用 router.use() 或 router.VERB() 加載。
上述在應(yīng)用級創(chuàng)建的中間件系統(tǒng),可通過如下代碼改寫為路由級:
var app = express(); var router = express.Router(); // 沒有掛載路徑的中間件,通過該路由的每個請求都會執(zhí)行該中間件 router.use(function (req, res, next) { console.log("Time:", Date.now()); next(); }); // 一個中間件棧,顯示任何指向 /user/:id 的 HTTP 請求的信息 router.use("/user/:id", function(req, res, next) { console.log("Request URL:", req.originalUrl); next(); }, function (req, res, next) { console.log("Request Type:", req.method); next(); }); // 一個中間件棧,處理指向 /user/:id 的 GET 請求 router.get("/user/:id", function (req, res, next) { // 如果 user id 為 0, 跳到下一個路由 if (req.params.id == 0) next("route"); // 負責將控制權(quán)交給棧中下一個中間件 else next(); // }, function (req, res, next) { // 渲染常規(guī)頁面 res.render("regular"); }); // 處理 /user/:id, 渲染一個特殊頁面 router.get("/user/:id", function (req, res, next) { console.log(req.params.id); res.render("special"); }); // 將路由掛載至應(yīng)用 app.use("/", router);錯誤處理中間件
錯誤處理中間件和其他中間件定義類似,只是要使用 4 個參數(shù),而不是 3 個,其簽名如下: (err, req, res, next)。
app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send("Something broke!"); });
在其他 app.use() 和路由調(diào)用后,最后定義錯誤處理中間件,比如:
var bodyParser = require("body-parser"); var methodOverride = require("method-override"); app.use(bodyParser()); app.use(methodOverride()); app.use(function(err, req, res, next) { // 業(yè)務(wù)邏輯 });
在我們創(chuàng)建的這個app中,app.js 內(nèi)的錯誤處理中間件是這樣寫的:
app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get("env") === "development" ? err : {}; // render the error page res.status(err.status || 500); res.render("error"); });
錯誤中間件執(zhí)行時,會調(diào)用 views 目錄下的 error.jade 文件,在頁面中打印詳細的錯誤信息
內(nèi)置中間件express.static(root,[options])
express.static 是 Express 唯一內(nèi)置的中間件。它基于 serve-static,負責在 Express 應(yīng)用中提托管靜態(tài)資源。
在 app.js 文件內(nèi)也可以找到這個內(nèi)置中間件
app.use(express.static(path.join(__dirname, "public")));
詳細信息參閱官方文檔:www.expressjs.com.cn/guide/using-middleware.html
第三方中間件通過使用第三方中間件從而為 Express 應(yīng)用增加更多功能。
安裝所需功能的 node 模塊,并在應(yīng)用中加載,可以在應(yīng)用級加載,也可以在路由級加載。
實際上,我們創(chuàng)建的這個應(yīng)用已經(jīng)引入了兩個第三方的中間件,在 package.json 中就可以找到
"dependencies": { "body-parser": "~1.18.2", "cookie-parser": "~1.4.3", "debug": "~2.6.9", "express": "~4.15.5", "jade": "~1.11.0", "morgan": "~1.9.0", "serve-favicon": "~2.4.5" }
其中 body-parser 和 cookie-parser 就是兩個第三方中間件
模板引擎Express 默認的模板引擎是 jade 。現(xiàn)在 jade 已經(jīng)更名為 pug ,沒錯,似李,巴扎嘿!
pug 的語法請參閱 pug 文檔:
https://pug.bootcss.com/api/g...
我們在 views 目錄下創(chuàng)建一個 orders.jade 的文件
doctype html html head title 訂單 body h1 #{msg} p before the time begian
然后使用路由渲染它:
router.get("/",function(req,res,nest){ res.render("orders",{msg:"訂單首頁"}) })
在向主頁請求時,orders.jade 會被渲染為 HTML 文檔
進程管理器在編寫程序時,我們發(fā)現(xiàn),每次更改文件之后,都需要在命令行內(nèi)停止當前的服務(wù),然后輸入 npm start ,很麻煩。我們需要一款自動刷新的工具
這里介紹一下 pm2
安裝:
npm install pm2 -gd
安裝完畢,運行我們的程序吧:
還記得我們之前說的 npm start 的啟動路徑?jīng)]
> pm2 start ./bin/www --watch [PM2] Applying action restartProcessId on app [www](ids: 0) [PM2] [www](0) ? [PM2] Process successfully started ┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────────┬──────────┐ │ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────────┼──────────┤ │ www │ 0 │ fork │ 14448 │ online │ 0 │ 0s │ 0% │ 8.6 MB │ pureview │ enabled │ └──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────────┴──────────┘ Use `pm2 show` to get more details about an app
當顯示 status 為 online 時,說明程序啟動成功
現(xiàn)在可以打開 http://localhost:3000 就可以看到運行的程序了
從命令行中我們可以看出我們的 app 名稱, id ,狀態(tài),內(nèi)存和 cpu 占用,監(jiān)視狀態(tài)等信息
啟動完成之后我們就可以根據(jù)我們程序的id進行控制了
下次啟動可以輸入
pm2 start 0 --watch
別忘了 --watch ,沒有它,程序是無法自動刷新的
停止應(yīng)用:
pm2 stop 0
重啟
pm2 restart 0
顯示程序信息
pm2 show 0
刪除程序
pm2 delete 0
查看程序列表
pm2 list好了,這次關(guān)于 Express 的介紹就到這里了,謝謝大家
官方文檔地址:http://www.expressjs.com.cn
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/89196.html
摘要:從本章開始,正式學習如何使用搭建一個博客。但通常我們都會有許多環(huán)境,如本地開發(fā)環(huán)境測試環(huán)境和線上環(huán)境等,不同的環(huán)境的配置不同,我們不可能每次部署時都要去修改引用或者。會根據(jù)環(huán)境變量的不同從當前執(zhí)行進程目錄下的目錄加載不同的配置文件。 從本章開始,正式學習如何使用 Nodejs + Express + Mysql 搭建一個博客。 開發(fā)環(huán)境 首先說下開發(fā)環(huán)境安裝的核心依賴版本: Node....
摘要:前言目前最新版本是所以本文分析也基于這個版本。源碼分析直接切入主題由于目前是一個獨立的路由和中間件框架。所以分析的方向也以這兩個為主。源碼去年的時候有分析過現(xiàn)在對比分析思考下。 前言 目前express最新版本是4.16.2,所以本文分析也基于這個版本。目前從npm倉庫上來看express使用量挺高的,express月下載量約為koa的40倍。所以目前研究下express還是有一定意義...
摘要:缺點需要增加本地的代碼量,以及需要配置實現(xiàn)攔截優(yōu)點數(shù)據(jù)通過會更豐富。缺點修改內(nèi)容溝通成本高,跟后端扯皮利用去模擬優(yōu)點可控內(nèi)容以及實現(xiàn)動態(tài)。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一:使用場景 哎喲,好煩啊,這個需求還么結(jié)束就來下一個需求,程序員不要排期的嗎? 沒辦法啊,資本主義的XX嘴臉啊 來吧,技術(shù)評審我倆把接口...
摘要:下面來介紹一種讓前后臺并行開發(fā)。服務(wù)在端口上已啟用我們需要在同級目錄添加以下文件中的內(nèi)容如下訪問時查詢成功張三訪問時我們現(xiàn)在在瀏覽器中訪問我們初步模擬數(shù)據(jù)基本就完成了。 在我們平時項目剛啟動時,由于后臺也是剛開始開發(fā),我們前端往往在開發(fā)過程中沒有數(shù)據(jù)和接口請求的,都要造一些假數(shù)據(jù)進去或者使用mock造一些數(shù)據(jù)進去,但是這樣的話往往會偶合一些沒用的代碼進去。到時候還得刪除。 下面來介紹一...
閱讀 3070·2021-10-12 10:12
閱讀 1577·2021-09-09 11:39
閱讀 1907·2019-08-30 15:44
閱讀 2349·2019-08-29 15:23
閱讀 2903·2019-08-29 15:18
閱讀 2971·2019-08-29 13:02
閱讀 2696·2019-08-26 18:36
閱讀 744·2019-08-26 12:08