《Web應(yīng)用開發(fā)實戰(zhàn)》課件-單元6 Express框架開發(fā)

6.1Express簡介與安裝引入原生開發(fā)框架開發(fā)框架開發(fā)可以提升開發(fā)效率，實現(xiàn)的項目性能高、擴展性強。工欲善其事必先利其器01Express簡介03搭建框架項目目錄02Express安裝基于Node.js平臺，快速、開放、極簡的Web開發(fā)框架。Express簡介中間件Express框架Connect框架類似于一個中間件(middleware)的腳手架；只提供調(diào)用邏輯，不實現(xiàn)具體的處理邏輯。在Node.js開發(fā)領(lǐng)域，Express以其簡潔的API、強大的功能和靈活的設(shè)計，成為了目前最受歡迎的Web應(yīng)用框架之一。它提供了一組強大的工具,用于快速構(gòu)建Web應(yīng)用程序和API。安裝方式Express安裝局部安裝安裝的模塊只對當(dāng)前的項目有效。全局安裝使用express命令行工具生成項目包，然后再進行開發(fā)。1.局部安裝Express安裝1.創(chuàng)建項目包4.測試運行nodeapp.js3.安裝expressnpminstallexpress定義項目開發(fā)者、版本和腳本等信息。依賴包信息會保存到package.json文件的dependencies屬性中2.生成package.json文件npminit-y運行創(chuàng)建的主程序創(chuàng)建項目文件夾，打開該文件夾。Express安裝示例創(chuàng)建app.js文件，并運行該應(yīng)用。創(chuàng)建項目包app.js主程序文件編寫與運行客戶端訪問服務(wù)器constexpress=require('express');constapp=express();app.get('/',function(req,res){//注意：客戶端訪問服務(wù)器時觸發(fā) res.send('這是首頁!');//服務(wù)器響應(yīng)文字})app.listen(3000);服務(wù)器接收到get請求，且地址為“/”時，觸發(fā)代碼，服務(wù)器向客戶端響應(yīng)字符串應(yīng)用監(jiān)聽端口3000app.js-項目主程序nodeapp.jsExpress安裝示例代碼2.全局安裝Express安裝npminstallexpress-generator-g2.全局安裝express生成器express-generator3.查看express版本express--version1.全局安裝expressnpminstallexpress-g實驗需求搭建框架項目使用express命令搭建項目環(huán)境。實驗步驟進入項目目錄并安裝依賴包02使用express生成項目包01啟動運行項目03搭建框架項目類型名稱作用目錄node_modules存放項目的依賴模塊，默認的有body-parser、cookie-parser、express、morgan、serve-favicon等常用模塊目錄bin存放啟動項目的腳本文件，默認為www，該文件中定義了HTTP訪問的默認端口為3000目錄public靜態(tài)資源文件夾，包括images、javascripts、stylesheets三個文件夾目錄routes路由文件包括index.js和users.js目錄views頁面視圖文件（或頁面模板文件），Express框架默認的為jade模板（也就是pug模板），因此，默認的有error.jade、index.jade和layout.jade文件文件app.js應(yīng)用的關(guān)鍵配置文件，項目入口文件文件package.json項目包描述文件，包含項目基本信息及依賴列表文件package-lock.json鎖定安裝時包的版本號，用來記錄當(dāng)前狀態(tài)下實際安裝的各個npm包的具體來源和版本號項目啟動命令靜態(tài)資源路由模板引擎入口文件1.使用express生成項目搭建框架項目expressprojectName生成項目2.進入項目目錄并安裝依賴包搭建框架項目cdprojectName進入項目目錄npminstall安裝依賴包3.啟動項目搭建框架項目npmstart啟動項目應(yīng)用http://localhost:3000瀏覽器訪問首頁小結(jié)Express簡介基于Node.js平臺，快速、開放、極簡的Web開發(fā)框架Express安裝局部安裝全局安裝搭建框架項目使用express生成項目進入項目目錄并安裝依賴包啟動運行項目6.2路由配置引入現(xiàn)實生活中的路由：按鍵與服務(wù)之間的映射關(guān)系..不同按鍵，呼叫不同功能引入路由：將客戶端請求映射為服務(wù)器的響應(yīng)操作..通過合理地設(shè)計路由，可以實現(xiàn)頁面跳轉(zhuǎn)、接口調(diào)用等各種需求..URIHTTP請求Server端點Endpoint01路由簡介03模塊化路由目錄02app級別路由路由介紹路由——路由是指根據(jù)用戶請求來決定服務(wù)器應(yīng)如何響應(yīng)的過程。服務(wù)器根據(jù)客戶端路由請求路徑和請求方法，將請求分發(fā)到相應(yīng)的處理函數(shù)。請求Express服務(wù)器響應(yīng)處理函數(shù)其他路由從上到下進行匹配客戶端app.get('/',fun1)app.get('/product',fun2)app.post('/login',fun3)fun1(req,res){//處理請求代碼}fun2(req,res){//處理請求代碼}fun3(req,res){//處理請求代碼}路由分發(fā)分發(fā)分發(fā)app級別路由請求路徑為“/”，也就是網(wǎng)站根目錄或首頁，請求方法為“get”，則寫為：app.get('/',function(req,res){res.send('Thisishomepage!')})app.METHOD(PATH,HANDLER)名稱含義appexpress的應(yīng)用實例METHODHTTP的請求方法，支持get、post、put、delete等所有的HTTP請求方法，注意小寫PATH請求路徑HANDLER路由匹配的時候執(zhí)行的函數(shù)

在app.js文件中定義路由app級別路由建立app級別路由..expressmyapp

cdmyappnpminstall搭建項目環(huán)境，安裝依賴包修改app.js文件，定義app級別路由npmstart啟動項目應(yīng)用測試運行打開瀏覽器查看頁面示例app級別路由varexpress=require('express');varpath=require('path');varcookieParser=require('cookie-parser');varlogger=require('morgan');varindexRouter=require('./routes/index');varusersRouter=require('./routes/users');varapp=express();定義app級別路由app.js-項目入口文件app.get('/',(req,res)=>{res.send('helloworld')})注意：加底色的代碼，在后續(xù)知識點講解中可以被替換..示例代碼npmstartapp.js-get請求方式app.get('/',function(req,res){res.send('Thisisgetpage!')})app級別路由1.路由請求請求方式app.js-post請求方式app.post('/',function(req,res){res.send('Thisispostpage!')})app.js-all請求方式，接收任意的http方法app.all('/secret',function(req,res,next){res.send('Thisisallrequestpage!')})說明：修改上一示例app.js文件中灰底色代碼，進行測試..app級別路由2.路由路徑-基于字符串的路由路徑app.js-路由路徑匹配/productapp.get('/product',function(req,res){

res.send('Productlists');})app.get('/login.php',function(req,res){

res.send('login.php');})app.js-路由路徑匹配/login.phpapp.js-路由路徑匹配根路由/app.get('/',function(req,res){

res.send('root');})app級別路由2.路由路徑-基于字符串模板的路由路徑app.js-路由路徑匹配ab(cd)?eapp.get('/ab(cd)?e',function(req,res){

res.send('ab(cd)?e');})app.js-路由路徑匹配ab?cdapp.get('/ab?cd',function(req,res){

res.send('ab?cd');})app.js-路由路徑匹配ab*cdapp.get('/ab*cd',function(req,res){

res.send('ab*cd');})app.js-路由路徑匹配ab+cdapp.get('/ab+cd',function(req,res){

res.send('ab+cd');})app級別路由2.路由路徑-基于路由正則寫法的路由路徑app.js-路由路徑匹配包含p字母的任意路徑app.get('/p/',function(req,res){

res.send('/p/');})app.js-路由路徑匹配es結(jié)尾的任意路徑app.get('/.*es$',function(req,res){

res.send('/.*es$');})app級別路由2.路由路徑-基于動態(tài)參數(shù)的路由路徑路由動態(tài)參數(shù)：用來獲取路由路徑中的值，并且該值會賦給req.params..注意：路由參數(shù)必須是由大小寫字母、數(shù)字和下劃線組成..app.get('/users/:uid/movies/:mid',function(req,res){

res.send(req.params);})app.js-路由路徑為動態(tài)路由模塊化路由Express不建議將路由直接掛載到一個app上，而是推薦將路由抽離為單獨的模塊。

模塊化路由定義的步驟創(chuàng)建路由模塊對應(yīng)的.js文件；調(diào)用express.Router()函數(shù)創(chuàng)建路由對象；向路由對象上掛載具體的路由；使用module.exports向外共享路由對象；使用app.use()函數(shù)注冊路由模塊。模塊化路由routesindex.jsusers.js在模塊化路由文件routes/index.js中響應(yīng)數(shù)據(jù)..示例模塊化路由varexpress=require('express');varrouter=express.Router();letgoods=[ { gid:'0001',

gname:'Web前端課程',

gprice:21999 },{ gid:'0002',

gname:'Java大數(shù)據(jù)課程',

gprice:24999 }, { gid:'0003',

gname:'Python人工智能課程',

gprice:24999 }]router.get('/goods',function(req,res,next){

res.json(goods);});module.exports=router;匹配“/goods”路徑時，返回商品JSON字符串創(chuàng)建模塊化路由對象routes/index.js路由文件示例代碼模塊化路由app.js-項目入口文件使用默認文件，代碼不變varindexRouter=require('./routes/index');app.use('/',indexRouter);引入index子路由掛載使用示例代碼模塊化路由npmstart小結(jié)路由簡介路由是指根據(jù)用戶請求來決定服務(wù)器應(yīng)如何響應(yīng)的過程。app級別路由定義在app.js文件中app.METHOD(PATH,HANDLER)模塊化路由定義在routes文件夾下的單獨.js文件中router.get('/goods',function(req,res,next){res.json(goods);});6.3中間件使用引入邏輯的分離，思維的獨立！在軟件工程領(lǐng)域，中間件是一個已被廣泛應(yīng)用的概念。目錄01什么是中間件義03內(nèi)置中間件02自定義中間件什么是中間件服務(wù)器的生命周期一般是：接收請求-處理請求-發(fā)出響應(yīng)。為了邏輯單元的獨立和維護的便捷，可以將處理請求拆分成一個個子單元處理，此時子單元的請求處理就是中間件。服務(wù)器接收到請求的時候，會依次執(zhí)行每個中間件，直到調(diào)用終止，發(fā)出響應(yīng)給客戶端。Express的應(yīng)用本質(zhì)上就是在調(diào)用各種中間件。請求Express服務(wù)器響應(yīng)中間件2中間件3處理完畢響應(yīng)該請求中間件1next()next()next()客戶端functionmiddleware(req,res,next){//處理業(yè)務(wù)的邏輯代碼next();//調(diào)用下一個函數(shù)}執(zhí)行邏輯代碼修改請求和響應(yīng)對象結(jié)束請求-響應(yīng)周期調(diào)用下一個中間件next()將控制權(quán)交給下一個中間件，調(diào)用下一個函數(shù)如果沒有next()的話，就不再調(diào)用下一個函數(shù)如果當(dāng)前的中間件沒有調(diào)用next()，也沒有結(jié)束請求-響的周期，請求將會被掛起。中間件的形式什么是中間件自定義中間件自定義一個獲取時間戳的中間件。示例定義中間件顯示當(dāng)前系統(tǒng)時間中間件被調(diào)用自定義中間件functiongetTimestamp(req,res,next){ lettime=newDate(); console.log(time);

next();}app.use(getTimestamp);//使用中間件app.get('/time',function(req,res){

res.send('中間件被調(diào)用！')});使用中間件app.js-自定義中間件訪問/time的get請求時服務(wù)器會先調(diào)用中間件然后再執(zhí)行該段代碼示例代碼npmstart內(nèi)置中間件Express框架的內(nèi)置中間件express.static()，指定要加載的靜態(tài)資源。內(nèi)置中間件屬性作用dotfiles是否對外輸出文件名以點“.”開頭的文件，有效值包括“allow”“deny”和“ignore”etag啟用或禁用etag生成extensions用于設(shè)置后備文件擴展名index發(fā)送目錄索引文件，設(shè)置為false可禁用建立目錄索引lastModified將lastModified的頭設(shè)置為操作系統(tǒng)上該文件的上次修改日期，有效值包括“true”、“false”maxAge設(shè)置Cache-Control頭的max-age屬性（以毫秒或者ms格式中的字符串為單位）redirect當(dāng)路徑名是目錄時重定向到結(jié)尾的“/”setHeaders用于設(shè)置隨文件一起提供的HTTP頭的函數(shù)

express.static(root,[options]);root為加載靜態(tài)資源的路徑；options為可選參數(shù)，具有以下屬性：內(nèi)置中間件使用內(nèi)置中間件express.static()，瀏覽器輸入CSS文件路徑及文件名，便可直接訪問服務(wù)器上的CSS文件。示例內(nèi)置中間件app.use(express.static('public',options));varoptions={dotfiles:'ignore',

etag:false,extensions:['htm','html'],index:false,

maxAge:'1d',redirect:false,

setHeaders:function(res,path,stat){

res.set('x-timestamp',Date.now());}}內(nèi)置中間件的選項參數(shù)app.js-項目入口文件內(nèi)置中間件的引用示例代碼小結(jié)中間件的定義將處理請求拆分成一個個子單元處理，子單元的請求處理就是中間件。functionmiddleware(req,res,next){//處理業(yè)務(wù)的邏輯代碼next();//調(diào)用下一個函數(shù)}內(nèi)置中間件express.static是Express框架的內(nèi)置中間件，通過該中間件可以指定要加載的靜態(tài)資源。自定義中間件在項目入口文件中自定義中間件函數(shù)，通過

app.use()語句將中間件綁定到Express中使用。執(zhí)行路由代碼時會被先執(zhí)行。6.4請求與響應(yīng)引入客戶端服務(wù)器請求（request）響應(yīng)（response）Web應(yīng)用開發(fā)的本質(zhì)可理解為客戶端和服務(wù)器之間的請求和響應(yīng)過程。01請求對象目錄02響應(yīng)對象請求對象屬性描述originalUrl獲取路由配置的URLhostname獲取請求的域名method獲取請求的方法，如get、post等params獲取路由動態(tài)參數(shù)中的內(nèi)容queryGET請求時，獲取請求的URL查詢字符串部分的參數(shù)bodyPOST請求時，獲取請求數(shù)據(jù)，需要使用body-parser中間件ip獲取請求的IP地址，可用來設(shè)置白名單path獲取URL請求中的路徑protocol獲取請求的協(xié)議，一般是HTTP或HTTPSsecure獲取是否為HTTPS請求，返回true或falsexhr獲取是否為Ajax請求(XMLHttprequest)，返回true或false包含請求的相關(guān)信息，如請求方式、路徑、參數(shù)等，以便服務(wù)器正確處理客戶端的請求。請求對象通過客戶端向服務(wù)器發(fā)送請求，輸出請求對象的詳細信息。示例varexpress=require('express');varrouter=express.Router();router.get('/aa/bb/cc/:id',function(req,res){varreqAttributes={'originalUrl':req.originalUrl,//獲取路由配置的URL 'hostname':req.hostname,//獲取用戶請求的域名 'ip':req.ip,//獲取用戶請求的IP地址 'method':req.method,//獲取用戶請求的方法

'params':req.params,

//獲取路由動態(tài)參數(shù)中的內(nèi)容 'path':req.path,//獲取URL請求中的路徑 'protocol':tocol,//獲取客戶端請求的協(xié)議 'secure':req.secure,//判斷用戶是否為HTTPS請求 'xhr':req.xhr,//判斷是否是Ajax請求

'query':req.query

//獲取URL查詢字符串部分的參數(shù)}

res.send(reqAttributes);})module.exports=router;請求對象請求對象的各個屬性值index.js請求對象常用屬性示例代碼http://localhost:3000/foods/1

匹配get('/foods/:id',function(req,res){})請求對象地址欄參數(shù)，通過req.query或req.params獲取值。req.query--{"account":"express","password":"123456"}http://www.XXXX.com/login?account=express&password=123456匹配get('/login',function(req,res){})查詢字符串參數(shù)req.params--{"id":"1"}動態(tài)參數(shù)示例地址欄參數(shù)非常重要，可以用來在同一個頁面中根據(jù)需求有區(qū)分地顯示不同信息。請求對象varexpress=require('express');varrouter=express.Router();router.get('/login',function(req,res){ //發(fā)送get請求，用req.query接收傳過來的值 letaccount=req.query.account; letpassword=req.query.password; console.log(account,password);

res.send("login!")});//獲取動態(tài)路由的值router.get('/foods/:id',(req,res)=>{ console.log(req.params.id);

letid=req.params.id; if(id=='1'){

res.render('foods1'); }elseif(id=='2'){

res.render('foods2'); }})module.exports=router;query屬性獲取URL中的參數(shù)index.js獲取請求對象params屬性獲取動態(tài)路由的值示例代碼請求對象doctypehtmlhtmlheadmeta(charset="utf-8")title美食分類bodyp美食分類界面1foods1.jade-在views目錄下建立的美食頁面1foods2.jade-在views目錄下建立的美食頁面2doctypehtmlhtmlheadmeta(charset="utf-8")title美食分類bodyp美食分類界面2響應(yīng)對象方法描述res.json()返回JSON數(shù)據(jù)res.send()根據(jù)不同的內(nèi)容，返回不同格式的HTTP響應(yīng)res.render()渲染模板頁面res.redirect()重定向到指定的URLres.status()設(shè)置響應(yīng)狀態(tài)碼，如200,404,500等res.set()設(shè)置響應(yīng)報頭信息res.end()結(jié)束請求-響應(yīng)循環(huán)路由處理函數(shù)接收響應(yīng)對象，調(diào)用響應(yīng)對象的方法發(fā)送HTTP響應(yīng)到客戶端。如果路由函數(shù)不給出任何響應(yīng)，也就是不調(diào)用響應(yīng)對象的任何方法，客戶端會被掛起直到超時。響應(yīng)對象res常用方法：響應(yīng)對象varexpress=require('express');varrouter=express.Router();vargoods={ "iphonex":{ "nums":100, "price":1999.98, "color":"red" }, "car":{ "nums":100, "price":9999999, "color":"black" }}router.get('/',function(req,res,next){ //res.json():給客戶端發(fā)送json數(shù)據(jù)

res.json({error:0,data:goods});});module.exports=router;定義JSON數(shù)據(jù)響應(yīng)對象的json方法，給客戶端發(fā)送JSON數(shù)據(jù)1.返回JSON數(shù)據(jù)res.json()響應(yīng)對象varexpress=require('express');varrouter=express.Router();vargoods={ "iphonex":{ "nums":100, "price":1999.98, "color":"red" }, "car":{ "nums":100, "price":9999999, "color":"black" }}router.get('/',function(req,res,next){ //res.send()發(fā)送數(shù)據(jù)給客戶端，字符串、JSON對象或Buffer

res.send('success'); //res.send(goods); //res.send(Buffer.from('Hi,Harrison!'));});module.exports=router;定義JSON數(shù)據(jù)res.send()除了可以返回字符串，也可是JSON對象或Buffer數(shù)據(jù)。2.返回數(shù)據(jù)res.send()響應(yīng)對象varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){ //res.render()渲染指定模板給客戶端

res.render('index',{title:'Hi,Housir!'});});module.exports=router;渲染指定模板給客戶端3.渲染模板頁面res.render()響應(yīng)對象varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){

res.redirect('/login');//res.redirect():重定向});router.all('/login',(req,res,next)=>{

res.render('index',{title:'請登錄'});})module.exports=router;將路由重定向至“/login”渲染指定模板給客戶端4.重定向地址res.redirect()響應(yīng)對象varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){//

res.status()設(shè)置響應(yīng)header狀態(tài)碼，比如200,301,404,500等res.status(200).send('success');});module.exports=router;狀態(tài)碼設(shè)為“200”通過res.send()響應(yīng)“success”5.設(shè)置狀態(tài)碼res.status()響應(yīng)對象varexpress=require('express');varrouter=express.Router();router.get('/header',function(req,res,next){ //res.set()設(shè)置響應(yīng)報頭信息，如content-type，content-lenght等

res.setHeader('Content-Type','text/html;charset=utf8');

res.set({'Content-Type':'application/json'});

res.write("響應(yīng)報頭信息:");res.end(res.get('Content-Type'));});module.exports=router;設(shè)置響應(yīng)的報頭信息獲取報頭信息6.設(shè)置響應(yīng)報頭res.set()響應(yīng)對象varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){ //res.end()結(jié)束請求響應(yīng)循環(huán)

res.end('Helloworld!');});module.exports=router;結(jié)束請求響應(yīng)循環(huán)，返回字符串至客戶端7.結(jié)束響應(yīng)res.end()小結(jié)請求對象包含請求的相關(guān)信息，如請求方式、路徑、參數(shù)等，以便服務(wù)器正確地處理客戶端的請求。req.query和req.params屬性非常重要。響應(yīng)對象路由處理函數(shù)也會接收響應(yīng)對象，調(diào)用響應(yīng)對象的方法發(fā)送HTTP響應(yīng)到客戶端。6.5模板引擎模板引擎數(shù)據(jù)頁面輸出引入模板引擎可以讓程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離,業(yè)務(wù)代碼與邏輯代碼的分離,這就提升了開發(fā)效率,良好的設(shè)計也使得代碼復(fù)用變得更加容易。01pug模板引擎目錄02ejs模板引擎pug模板——Express框架的默認模板引擎。pug集成模板pug集成模板與HTML標(biāo)簽一致pug不需要關(guān)閉標(biāo)簽用縮進表示標(biāo)簽直接的嵌套關(guān)系HTML頁面與pug模板的對比。示例pug集成模板標(biāo)簽不成對，縮進表示嵌套關(guān)系HTML標(biāo)簽一般成對出現(xiàn)doctypehtmlhtml head meta(charset='utf-8') titleFirstfileofpug

body h1Thisismyfirstpug

div .div1 pthatsomecontentinhere

ipoint

firstDemo.pug沒有關(guān)閉標(biāo)簽示例代碼pug集成模板不同層次縮進，表示標(biāo)簽之間層級關(guān)系<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>Firstfileofpug</title> </head> <body> <h1>Thisismyfirstpug</h1> <div></div> <divclass="div1"> <p>thatsomecontentinhere</p> <i>point</i></div> </body></html>firstDemo.html標(biāo)簽通常成對示例代碼pug集成模板ejs模板引擎中標(biāo)簽主要有以下形式：<%

：“腳本”標(biāo)簽，用于流程控制等，無輸出；<%_

：刪除其前面的空格符；<%=：輸出變量的值到模板中；<%-

：輸出非轉(zhuǎn)義的原始內(nèi)容到模板，解析HTML標(biāo)簽；<%#

：注釋標(biāo)簽，不執(zhí)行、不輸出內(nèi)容；<%%

：輸出字符串

'<%'；%>：

一般結(jié)束標(biāo)簽；-%>

：刪除緊隨其后的換行符；_%>

：將結(jié)束標(biāo)簽后面的空格符刪除。ejs模板引擎<%if(product){%><h2><%=%></h2><%}%>ejs模板

——模板引擎的標(biāo)簽寫法同HTML一致，還支持直接在標(biāo)簽內(nèi)書寫簡單、直白的JavaScript代碼，最后生成HTML頁面。<body> <%-include("./top.ejs")%> <main> //此處省略代碼 </main> <%-include("./bottom.ejs")%></body>

include

命令

——

將相對于模板路徑中的模板片段包含進來。

比如：模板頁面要包含“./top.ejs”和“./bottom.ejs”兩個模板文件。ejs模板引擎示例ejs模板文件生成HTML頁面。cdmyejsnpminstallejs搭建項目環(huán)境，下載安裝ejs編寫js文件代碼測試運行nodeejs_demo.jsejs_demo.jsejs模板引擎varejs=require("ejs");varpeople=['geddy','neil','alex'];varhtml=

ejs.render('<%=people.join(",");%>',{people:people});console.log(html);ejs_demo.js設(shè)置三個元素的列表變量輸出數(shù)據(jù)到模板，渲染頁面示例代碼ejs模板引擎小結(jié)pug模板引擎pug是Express框架的默認模板引擎。pug模板文件體積小，但是學(xué)習(xí)成本高。ejs模板引擎ejs模板引擎標(biāo)簽寫法與HTML一致，不如pug模板的整潔。6.6Express中集成模板引擎引入Express框架模板引擎如何在Express框架中集成模板引擎進行應(yīng)用開發(fā)？01Express中集成pug模板引擎02Express中集成ejs模板引擎目錄Express中集成模板引擎模板引擎可以實現(xiàn)顯示界面與邏輯處理的分離，Expess框架中可集成pug或ejs模板引擎進行開發(fā)，效率特別高。1.集成pug模板引擎--默認模板引擎--案例：商品信息顯示2.集成ejs模板引擎--創(chuàng)建項目包時聲明為ejs模板引擎--案例：留言簿Express中集成pug模板引擎Express框架項目中，使用pug模板進行商品信息顯示。示例Express中集成pug模板引擎npminstallpug安裝第三方模塊pug創(chuàng)建pug文件views/goods.pug修改路由index.jsroutes/index.js測試運行npmrunstart或nodemonapp.js瀏覽器打開http://localhost:3000/pugexpressmyexpresspugcdmyexpresspugnpminstall搭建項目環(huán)境，安裝依賴包Express框架項目中集成pug模板的開發(fā)步驟：doctypehtmlhtmlheadmeta(charset='utf-8’)title商品頁面（pug）body

ul.goodseachvalindata

//data為變量，渲染該模板時賦值 li

img(src=val.img) .title#{val.title} .price#[span(style="color:red;")#{val.price}]元views/goods.pug商品頁面定義商品頁面Express中集成pug模板引擎示例代碼varexpress=require('express');varrouter=express.Router();vargoods=[{ "price":"69.9", "title":"德芙", "img":"/images/58170f6dN6b9a12bf.jpg!q50.jpg.webp" }, { "price":"63", "title":"費列羅", "img":"/images/54c34525Nb4f6581c.jpg!q50.jpg.webp" },{ "price":"29.9", "title":"大米", "img":"/images/54e011deN3ae867ae.jpg!q50.jpg.webp" }]//調(diào)用pug模板router.get('/pug',(req,res,next)=>{

res.render('goods.pug',{

data:goods });});module.exports=router;routes/index.js商品數(shù)據(jù)渲染定義商品信息調(diào)用pug模板，將商品信息渲染到頁面中Express中集成pug模板引擎示例代碼指定引擎為ejs0102已默認設(shè)置模板引擎02express-eexpressAppName創(chuàng)建項目時指定引擎為ejs指定引擎為ejs后，在安裝依賴包時會自動下載第三方模塊ejs。app.set('views',path.join(__dirname,'views'));app.set('viewengine','ejs');app.js已設(shè)置引擎的文件路徑和后綴Express中集成ejs模板引擎渲染頁面時可不用每次都輸入文件的

ejs后綴名。Express框架項目中成ejs模板的開發(fā)步驟。示例留言簿：Express框架中集成ejs模板引擎。Express中集成ejs模板引擎運行項目，瀏覽頁面03編寫ejs模板引擎和路由代碼02創(chuàng)建項目包時指定模板引擎為ejs安裝依賴包01Express中集成ejs模板引擎cmd中切換到要存放項目包的目錄下express-e

msgApp創(chuàng)建項目包，指定模板引擎為ejs0102cdmsgAppnpminstall切換到msgApp目錄下，并安裝依賴包1.創(chuàng)建項目包，安裝依賴包Express中集成ejs模板引擎views/form.ejs創(chuàng)建留言表單頁面0103routes/index.js修改路由文件，處理表單提交數(shù)據(jù)2.編寫模板引擎和路由代碼views/index.ejs創(chuàng)建留言列表頁面02Express中集成ejs模板引擎<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title><%=title%></title><linkrel='stylesheet'href='/stylesheets/style.css'/></head><body><div><formmethod="post"action="/form"><h1>發(fā)布留言</h1><br>標(biāo)題：<inputtype="text"size="38"name="title"/><br><br>作者：<inputtype="text"size="38"name="author"/><br><br>內(nèi)容：<textareacols="40"rows="10"

name="content"></textarea><br><inputtype="submit"value="發(fā)布"></input></form></div></body></html>views/form.ejs添加留言頁面新留言發(fā)布表單輸入?yún)^(qū)域必須有name屬性表單內(nèi)要有提交按鈕要傳遞參數(shù)的變量Express中集成ejs模板引擎示例代碼<!DOCTYPEhtml><html><head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title><%=title%></title><linkrel='stylesheet'href='/stylesheets/style.css'/></head><body><divstyle="text-align:center;"> <h1><%=title%></h1> <p><ahref="/form">發(fā)表新留言</a></p><br> <divclass="msg"> <span><%-msg%></span> </div></div></body></html>views/index.ejs留言列表頁面Express中集成ejs模板引擎示例代碼留言顯示信息//渲染發(fā)布留言頁面router.get('/form',function(req,res,next){res.render('form',{title:'發(fā)布留言'});});//留言提交以后寫入文件router.post('/form',function(req,res,next){vartitle=req.body.title;varauthor=req.body.author;varcontent=req.body.content;varmsg="<br>標(biāo)題："+title+"<br>作者："+author+"<br>內(nèi)容："+content+"<br>";fs.appendFile('./message.txt',msg,function(err){ console.log("留言寫入成功！");})res.redirect('/');//跳轉(zhuǎn)到首頁，起到刷新作用});module.exports=router;routes/index.js(續(xù))路由文件服務(wù)器接收到post請求時，說明留言表單已輸入提交Express中集成ejs模板引擎將用戶留言追加寫入到文件message.txt中示例代碼varexpress=require('express');varrouter=express.Router();varfs=require("fs");//讀取留言文件，顯示在頁面router.get('/',function(req,res,next){fs.readFile("./message.txt",function(err,result){ varmessage=result.toString(); console.log(message);//控制臺測試輸出 res.render('index',{title:'留言列表',msg:message}); });});routes/index.js路由文件首頁即顯示留言列表讀取txt文件內(nèi)容發(fā)到模板引擎Express中集成ejs模板引擎讀取文件返回Buffer要轉(zhuǎn)換成字符串示例代碼3.運行項目進入項目文件夾，打開CMD窗口nodemonapp.jshttp://localhost:3000/formhttp://localhost:3000/Express中集成ejs模板引擎小結(jié)Express框架中集成pug模板引擎默認模板引擎注意標(biāo)簽縮進表示層次關(guān)系Express框架中集成ejs模板引擎express-eexpressAppNamehtml文件可另存為ejs文件進行開發(fā)6.7Session引入sessionid存儲Session存儲登錄用戶賬號、用戶個性配置，購物車商品數(shù)據(jù)等。登錄sessionid請求（sessionid）Yes!Iknowyou!cookie01Session工作原理目錄02Session安裝配置與獲取什么是SessionSession--稱為“會話控制”，是用于維持客戶端和服務(wù)器之間會話狀態(tài)的技術(shù)。Session數(shù)據(jù)特征：--可以跨頁面被訪問；--有一定的訪問時延。Session工作原理用戶是無法修改的，用戶離開網(wǎng)站后Session才會被注銷。4.服務(wù)器檢查是否存在這個sessionid：不存在：新建一個sessionid（重復(fù)步驟1-2的流程）存在：找到與sessionid相對應(yīng)的信息，后續(xù)的請求都會交換這個sessionid，進行有狀態(tài)的會話。存儲在服務(wù)器中，記錄特定用戶會話所需的屬性及配置信息。1-1.第一次請求服務(wù)器2.服務(wù)器將生成的sessionid通過cookie的方式返回給客戶端3-2.客戶端再次訪問服務(wù)器時，就會攜帶該sessionid3-1.客戶端收到sessionid后將它保存在cookie中1-2.服務(wù)器會生成一個sessionidSession安裝配置與獲取express-session——處理session數(shù)據(jù)的第三方模塊。app.use(session(option))app.js引入express-session后進行配置路由文件中獲取請求對象中sessionreq.session配置session的option參數(shù)：屬性含義namecookie的名字，默認為connect.sidstoresession存儲實例secret對sessioncookie簽名，防止被篡改cookiesessioncookie設(shè)置，默認為{path:'/',httpOnly:true,secure:false,maxAge:null}genid生成新sessionID的函數(shù)rolling在每次請求時強行設(shè)置cookie，這將重置cookie過期時間，默認為falseresave強制保存session，默認為true，建議設(shè)為falseproxy當(dāng)設(shè)置了securecookies時，信任反向代理。當(dāng)設(shè)定為true時，“x-forwarded-proto”的header信息將被使用；當(dāng)設(shè)定為false時，所有headers將被忽略。當(dāng)該屬性沒有被設(shè)定時，將使用Express的trustproxysaveUninitialized強制將未初始化的session存儲。當(dāng)新建了一個session且未設(shè)定屬性或值時，它就處于未初始化狀態(tài)。在設(shè)定一個cookie前，這對于登陸驗證、減輕服務(wù)端存儲壓力以及權(quán)限控制是有幫助的，默認為trueunset控制req.session是否取消，可以使session保持存儲狀態(tài)但忽略修改或刪除的請求，默認為keepSession安裝配置與獲取示例Session的安裝配置與設(shè)置獲取。expressmysessioncdmysessionnpminstall搭建項目環(huán)境，安裝依賴包測試運行npmrunstart或nodemonapp.js瀏覽器打開http://localhost:3000/loginSession安裝配置與獲取安裝第三方中間件express-sessionnpminstallexpress-session修改index.js文件，

設(shè)置并獲取session

routes/index.jsconstexpress=require("express");constsession=require("express-session");varrouter=express.Router();//配置中間件router.use(session({ secret:"keyboardcat", resave:false,

saveUninitialized:true, cookie:('name','value’,{

maxAge:5*60*1000,//5分鐘 secure:false })}));app.js使用中間件，配置session參數(shù)引入第三方中間件express-sessionSession安裝配置與獲取示例代碼router.use('/login',function(req,res){//登錄//設(shè)置sessionreq.session.userinfo='管理員';res.send("登錄成功！");});router.use('/',function(req,res){//首頁//獲取sessionif(req.session.userinfo){res.send("你好，"+req.session.userinfo+"，歡迎訪問本站！");}else{res.send("未登錄");}});module.exports=router;已有信息：顯示歡迎語句沒有信息：提示未登錄設(shè)置session的參數(shù)值routes/index.jsSession安裝配置與獲取示例代碼小結(jié)Session工作原理稱為“會話”，是用于維持客戶端和服務(wù)器之間會話狀態(tài)的技術(shù)。Session對象在服務(wù)器端存儲特定用戶會話所需的屬性及配置信息，安全性好。Session安裝配置與獲取在Express框架中，處理Session數(shù)據(jù)的第三方模塊為express-session。在項目入口文件app.js中配置Session。6.8multiparty實現(xiàn)圖片上傳功能引入如何實現(xiàn)圖片的上傳功能？01multiparty模塊簡介02使用multiparty實現(xiàn)圖片上傳目錄multiparty

--主要用于解析表單提交的文本和文件內(nèi)容，可以對接收到的表單上傳數(shù)據(jù)進行分割過濾。--是輕量級的第三方模塊，使用前需本地安裝。--用于上傳表單頁面，獲取表單提交文件。multiparty模塊簡介multiparty模塊簡介屬性含義encoding設(shè)置傳入表單域的編碼。默認為utf-8（一般不用修改）maxFieldsSize設(shè)置限制所有字段分配的內(nèi)存數(shù)量，如果數(shù)據(jù)超過了這個值系統(tǒng)會觸發(fā)error事件，默認值是2MB。maxFilesSize限制所有接受的合并文件的字節(jié)數(shù)。如果超過了設(shè)置值，系統(tǒng)會觸發(fā)一個錯誤事件。autoFiles啟動文件事件和禁用部分文件事件。如果你添加了一個文件監(jiān)聽器這個值自動設(shè)置為true。uploadDir文件上傳的位置目錄。僅當(dāng)autoFiles是true時有意義。multiparty模塊常用屬性使用multiparty實現(xiàn)圖片上傳通過表單實現(xiàn)商品圖片上傳功能。示例編寫代碼index.html01表單頁面文本框：商品名、價格文件框：商品圖片server.js02服務(wù)端文件使用multiparty模塊獲取表單提交數(shù)據(jù)圖片上傳到指定文件夾中使用multiparty實現(xiàn)圖片上傳注意：multiparty需事先局部安裝<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body>

<form

action="http://localhost:8080"enctype="multipart/form-data"method="post"><h1>商品信息：</h1><inputtype="text"name="name"placeholder="name"><br><inputtype="text"name="price"placeholder="price"><br><inputtype="file"name="upload"><br><inputtype="submit"value="提交"></form></body> </html>

index.html-圖片上傳表單文件框type="file"示例代碼action-表單提交后的處理地址enctype-表單數(shù)據(jù)編