一、Express框架

1.1基本使用

創(chuàng)建http服務(wù)器特別麻煩，express框架解決了這個的問題。

Express在node界的地位，就相當(dāng)于jQuery在DOM界的地位。jQuery的核心就是“批量”，1個jQuery對象中可以封裝多個原生對象。Express的核心就是中間件，Express說大真心不大，主要是因為他做的事兒大，而不是這個框架的功能多。

?

中文官網(wǎng)（實際上也是英語的）：http://www.expressjs.com.cn/

基于 Node.js 平臺，快速、開放、極簡的 web 開發(fā)框架。

以后的項目都先創(chuàng)建項目身份證，記錄依賴： npm init 安裝依賴： npm install express --save

?

express框架的API非常簡單

var express = require("express"); //返回的是一個函數(shù) var app = express(); //創(chuàng)建app，express函數(shù)執(zhí)行返回一個app對象//當(dāng)用戶get請求訪問/的時候 app.get("/", (req,res)=>{//輸出可用end()或send()方法，而且不用設(shè)置字符集，因為express封裝好了res.send("<h1>首頁</h1>"); })//當(dāng)用戶get請求訪問/music的時候 app.get("/music", (req,res)=>{res.send("<h1>音樂頻道</h1>"); })app.listen(3000, function(err){console.log("3000端口") })

?

---

1.2路由設(shè)計

在路由字符串中“:”開頭表示一個待定文本（用戶決定）：

//當(dāng)用戶get請求訪問/music的時候 app.get("/music/:bianhao", (req,res)=>{var bh = req.params.bianhao;console.log(bh)res.send("<h1>編號為"+ bh +"音樂信息</h1>"); })

?

app.get("/:username/follower", (req,res)=>{var user = req.params.username;res.send("<h1>關(guān)注"+ user +"的人如下</h1>"); })

?

app.get("/student/:banji/:bianhao", (req,res)=>{var banji = req.params.banji;var bianhao = req.params.bianhao;res.send("<h1>"+ banji +"班的"+ bianhao +"號學(xué)生信息</h1>"); })

?

看以下兩個路由：沖突時

app.get('/music/*', function(req, res){res.send('<h1>音樂頻道子頁面</h1>'); });//當(dāng)用戶get請求訪問/music/xxx的時候 app.get('/music/:bianhao', function(req, res){var bh = req.params.bianhao;res.send("<h1>編號為"+ bh +"音樂信息</h1>"); });

描述：如果中間件請求類型一樣，而且url一樣，那么前者會覆蓋后者，先寫的就會攔截請求，不會讓請求流向下執(zhí)行。

?

注意：

l?如果遇見覆蓋問題，可以使用next()方法，而且覆蓋的函數(shù)不能有res.send()

l?帶一些數(shù)據(jù)/xxx/:username/:xuehao 獲取的時候用req.params得到url

---

1.3中間件

express可以非常方便的使用動詞來描述用戶訪問這個url的請求類型，實際上是Nodejs原生的req.method屬性封裝的。

概述：app.動詞（上行請求類型），一共26種

?http://www.expressjs.com.cn/4x/api.html#app.METHOD

?

var express = require("express"); //返回一個函數(shù) var app = express(); //創(chuàng)建app，express函數(shù)執(zhí)行返回一個app對象//當(dāng)用戶get請求訪問/的時候 app.get('/', function(req, res){res.send('<h1>我是GET請求</h1>'); });//攔截前端發(fā)過來的各種請求 //攔截POST請求 app.post('/tijiao', function(req, res){res.send('<h1>我是POST請求</h1>'); });//刪除請求 app.delete('/del', function(req, res){res.send('<h1>我是delete請求</h1>'); });//更新某一條數(shù)據(jù)的請求 app.patch('/update', function(req, res){res.send('<h1>我是patch請求</h1>'); });//更新全部數(shù)據(jù)的請求 app.checkout('/updates', function(req, res){res.send('<h1>我是checkout請求</h1>'); });app.listen(3000,function(err){console.log("3000端口") });

---

1.4響應(yīng)輸出方法

以下是node中響應(yīng)輸出的所有方法：

?

app.get('/', function(req, res){// res.send('<h1>第一個輸出方法</h1>');//輸出JSON格式的數(shù)據(jù)// res.json({name:"小明", age:12, hobby:["吃飯","睡覺"]});//輸出JSONP格式的數(shù)據(jù)// res.jsonp({name:"小明", age:12, hobby:["吃飯","睡覺"]});//重定向res.redirect("http://www.baidu.com/"); });

?

前面學(xué)習(xí)過fs模塊，它主要是文件操作：

fs.readFile(path, function(err,data){})

?

在express中封裝了一個函數(shù)叫sendFile()

//渲染一個文件 app.get("/ddd",(req,res)=>{console.log(__dirname); //表示當(dāng)前文件的絕對路徑 res.sendFile(__dirname + "/images/1.jpg"); })

---

1.5靜態(tài)資源服務(wù)

概述：express框架提供了一個方法，可以靜態(tài)出一個文件夾(自動路由)；含義就是靜態(tài)出去的文件夾當(dāng)中文件之間，你可以使用相對路徑，最爽的一件事，是靜態(tài)出去的文件夾中的全部的文件你可以不用寫路由了，因為express已經(jīng)幫你做完了；

?

現(xiàn)在項目中有一個www文件夾，此時要提供自動靜態(tài)化路由：

var express = require("express"); //返回的是一個函數(shù) var app = express(); //創(chuàng)建app，express函數(shù)執(zhí)行返回一個app對象//靜態(tài)化一個文件夾（提供自動路由） app.use(express.static("www"))app.listen(3000, ()=>{console.log("3000端口") })

?

還可以給它改名：

app.use("/web", express.static("www"))

http://127.0.0.1:3000/web/

?

var express = require("express"); //返回的是一個函數(shù) var app = express(); //創(chuàng)建app，express函數(shù)執(zhí)行返回一個app對象//靜態(tài)化一個文件夾（提供自動路由） // app.use(express.static("www")) app.use("/web", express.static("www"))app.get("/", (req,res)=>{res.send("<h1>首頁</h1>") })app.listen(3000)

---

二、ejs模板引擎

ejs是JavaScript模板庫，用來從JSON數(shù)據(jù)中生成HTML字符串。

問題：我們可以呈遞一個HTML頁面，通過靜態(tài)化www文件夾，sendFile。如果HTML頁面上有待定的內(nèi)容，怎么辦？

?

使用模板引擎，模板引擎叫ejs（embed.js，嵌入式js）

npm init npm install --save express npm install --save ejs ┣ views ┃ ┣ index.ejs ┣ app.js

?

準(zhǔn)備JSON數(shù)據(jù)：

data.json：

[{"name" : "小明","url" : "xiaoming"} ..... ]

?

app.js：

var express = require("express"); var app = express();//設(shè)置默認(rèn)使用的模板引擎 app.set("view engine", "ejs");app.get("/", (req,res)=>{res.render("index"); //不需要寫res.render("./views/index.ejs"); })app.listen(3000, ()=>{console.log("3000端口") })

?

views/index.ejs文件：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>Document</title> </head> <body><h1>我是首頁!!!!</h1> </body> </html>

注意：

擴(kuò)展名必須是ejs，不是html

?

文件夾必須叫views，如果想改名，用以下方法：

app.set("views", "shitu");

?

ejs的使用類似underscore的模板標(biāo)記<% %>和<%= %>來當(dāng)做模板，與現(xiàn)有的html標(biāo)記混用。和php干的事情是一樣的。

<html> <head><title>首頁</title> </head> <body><h1>你好，我是首頁</h1><ul><% for(var i = 0; i < students.length; i++){%><li><%= students[i] %></li><%}%></ul><select><%for(var i = start; i <= end; i++){%><option value="<%= i %>"><%= i %></option><%}%></select> </body> </html>

?

此時render的時候要模板傳遞數(shù)據(jù)：

//設(shè)置默認(rèn)使用的模板引擎 app.set("view engine" , "ejs");app.get("/",(req,res)=>{res.render("index",{"students" : ["小明","小紅","小強(qiáng)","小鋼炮"],"start" :1970,"end" : 2018}); });app.listen(3000,()=>{console.log(3000); });

?

有時候render之前需要查數(shù)據(jù)，此時有點(diǎn)MVC的感覺了：

var fs = require("fs"); app.get("/",(req,res)=>{//先去讀取“模擬數(shù)據(jù)庫”fs.readFile("./data/users.json",(err,data)=>{//得到了數(shù)據(jù)var arr = JSON.parse(data.toString());//呈遞頁面 res.render("index",{"students" : arr }); }); });app.get("/:username",(req,res)=>{//得到待定用戶名 var username = req.params.username;//先去讀取“模擬數(shù)據(jù)庫”fs.readFile("./data/users.json",(err,data)=>{//得到了JSON數(shù)據(jù)var arr = JSON.parse(data.toString());//遍歷，看看誰的url和當(dāng)前username相同arr.forEach((item)=>{if(item.url == username){//呈遞頁面渲染 res.render("myhome",{"name" : item.name});}});}); });

?

data.json：

[{"name" : "小明","url" : "xiaoming"} ]

?

myhome.ejs ：

<html> <body><div class="container"><h1><%= name %>的小家</h1></div> </body> </html>

?

index.ejs：

<li><a href="<%= students[i].url %>"> <%= students[i].name %> </a></li>

---

三、復(fù)習(xí)

npm常用命令：

　　npm init 創(chuàng)建一個package.json文件npm install --save xxx 　　　從npm下載包，自動安裝到當(dāng)前目錄的node_modules文件夾，并添加依賴到package.json的dependencies對象（--save可簡寫為-S）npm install --save-dev xxx 從npm下載包，自動安裝到當(dāng)前目錄的node_modules文件夾，并添加依賴到package.json的devDependencies對象(--save-dev可簡寫為 -D）npm install xxx -g 安裝在全局環(huán)境中npm root -g 查看全局路徑npm install 自動安裝package.json的dependencies對象列出的所有依賴包（install可簡寫為i）npm uninstall express --save 卸載指定的模塊npm update express --save 更新指定的模塊npm cache 管理模塊的緩存npm cache clean 清除模塊緩存另外，要學(xué)會使用淘寶鏡像，會自己研究各種包的API。 cnpm install express --save

---

Express框架

之前用fs.readFile()配合if(req.url)來讀取靜態(tài)文件。

if(req.url == "/aaa"){fs.readFile("./images/ddd.png" , function(err , data){res.end(data)}); }

?

Express框架，提供了http服務(wù)器和很多中間件，并且簡化了路由表的編寫。

現(xiàn)在只需要一條語句就可以將一個文件夾自動提供路由。

app.use(express.static("www"));

www表示需要自動提供路由的那個文件夾，類似于Apache的根目錄。

?

在url中用冒號開頭引導(dǎo)一個變量，可以立刻用req.params.變量來得到待定值

app.get("/:nian/:yue/:ri" , function(req,res){var nian = req.params.nian;var yue = req.params.yue;var ri = req.params.ri;res.send(nian + "年" + yue + "月" + ri + "日"); });

---

?

版本號

{ "dependencies" :{ "foo" : "^1.0.0", //→固定住了1代大本版號，小版本號隨意"bar" : ">2.1.2", //→必須大于2.1.2版本號"baz" : ">1.0.2 <=2.3.4", //→且"boo" : "2.0.1", //→必須完全匹配這個版本號，下載的就是2.0.0"qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0", //→三個區(qū)間隨便選"asd" : "http://asdf.com/asdf.tar.gz", //→指定一個地址"til" : "~1.2", //→近似找到1.2，能多近就多近，能找到1.2就用1.2，不能就盡量近"elf" : "~1.2.3","thr" : "3.3.x", //→3.3必須固定，最后一位隨意"lat" : "latest", //→最新版本"dyl" : "*", //→任意版本，隨意！,"xxx" : "1.0.0 - 2.9999.9999", //→大于等于且小于等于 } }

---

?

四、Nodejs請求識別

4.1 GET和POST請求介紹

比如請求一個報名表的網(wǎng)頁，一般情況下訪問時，服務(wù)器都返回相同內(nèi)容

l?想要訪問一個頁面，返回不同的內(nèi)容，如何解決？

?

比如希望男生和女生得到的報名表不同，最簡單的辦法就是請求不同的網(wǎng)頁地址：

?

因為性別只有兩個，所以請求不同的頁面感覺不出復(fù)雜，但如果是不同的國籍，全球有190多個國家，那么頁面就太多了。

?

解決辦法有兩種：

第一種：用GET請求，通過URL地址加上?引導(dǎo)的k=v&k=v，將自己的個性化數(shù)據(jù)告訴服務(wù)器

GET是得到的意思，指的是希望以一些參數(shù)，得到豐富的網(wǎng)頁信息。

?

第二種：POST請求攜帶報文體

POST請求使用http請求的報文體來攜帶數(shù)據(jù)，傳給服務(wù)器。

POST的意思是“投遞”的意思，此時語義上，我們發(fā)出POST請求希望服務(wù)器持久這些數(shù)據(jù)。

?

淘寶買東西，你就是瀏覽器，賣家是服務(wù)器，你要將收貨信息告訴賣家，有兩種方式： 方法1：收貨地址：廣州天河區(qū)棠東東路御富科貿(mào)園D座108室（來了不要打電話直接放前臺打電話也不接否則就差評謝謝） 如同GET請求 方法2：收貨地址：廣州天河區(qū)棠東東路御富科貿(mào)園D座108室留言：（來了不要打電話直接放前臺打電話也不接否則就差評謝謝）如同POST請求

---

4.2 GET請求（使用express）

GET、POST請求，都是上行請求，都是把數(shù)據(jù)從瀏覽器帶向服務(wù)器的方式。

現(xiàn)在不是如何發(fā)送請求，表單和Ajax都能發(fā)送GET、POST請求。現(xiàn)在問題是如何用node識別瀏覽器發(fā)送過來的請求（識別傳遞過來的參數(shù)）。

?

寫一個路由，希望用get請求單獨(dú)得到某一個用戶的信息：

var url = require("url"); var express = require("express"); var app = express();//靜態(tài)化www文件夾，可以在www中寫前端代碼 // app.use(express.static("www")); var arr = [{"id" : 10001, "name":"小明", "sex":"男"},{"id" : 10002, "name":"小紅", "sex":"女"},{"id" : 10003, "name":"小黑", "sex":"男"} ]app.get("/people" , function(req,res){console.log(req.url) })app.listen(3000);

?

為了得到GET請求的id參數(shù)，使用nodejs提供的url模塊的url.parse()方法：

//當(dāng)用戶用get請求訪問people的時候 app.get("/people" , function(req,res){//得到get請求的參數(shù) var id = url.parse(req.url, true).query.id;//如果用戶沒有傳id參數(shù)，則顯示所有人信息if(!id){res.json(arr);return;}//遍歷數(shù)組，得到id和url的id參數(shù)相同的人for(var i = 0;i < arr.length;i++){if(arr[i].id == id){ res.json(arr[i])// res.send("我是服務(wù)器已經(jīng)收到請求，返回的數(shù)據(jù)是：" + arr[i].name) } }//存儲前端提交的數(shù)據(jù)到數(shù)組 arr.push(obj); console.log(arr) })

這個叫做接口，所謂的接口就是顯示JSON數(shù)據(jù)，而不是顯示HTML界面的網(wǎng)頁

?

沒有傳id參數(shù)，則顯示所有人

?

接口不是給人看的，是返回給前端的，前端用來發(fā)出Ajax請求調(diào)用得到，得到數(shù)據(jù)后渲染在頁面中。

?

前端可以借助Ajax發(fā)出請求調(diào)用接口地址，拿到數(shù)據(jù)。

<input type="text" id="idTxt"> <button>GET請求-查詢</button>//點(diǎn)擊發(fā)起查詢請求 $("button").eq(0).click(function(){$.get("/people",{id:$("#idTxt").val() }, function(data){console.log(data)}) });

?

升級一下案例：

www/index.html前端主頁

<body><p>I D ：<input type="text" class="idTxt" /></p> <p>姓名：<input type="text" class="name" /></p> <p>性別：<input type="radio" name="sex" value="男" class="sex" />男<input type="radio" name="sex" value="女" class="sex" />女 </p> <p>愛好：<input type="checkbox" class="hobby" value="游泳">游泳<input type="checkbox" class="hobby" value="看書">看書<input type="checkbox" class="hobby" value="打球">打球 </p> <button>GET請求-提交保存</button> </body>

?

前端提交的時候，復(fù)選框要寫IIFE才能遍歷多選的數(shù)組：

//點(diǎn)擊提交到后端，存儲信息 $("button").eq(1).click(function(){var id = $(".idTxt").val();var name = $(".name").val();var sex = $(".sex:checked").val();var hobby = (function(){var arr = [];$(".hobby:checked").each(function(){arr.push($(this).val())})return arr;})();//發(fā)起請求$.get("/people",{id:id,name:name,sex:sex,hobby:JSON.stringify(hobby)}, function(data){console.log(data)}) });

?

數(shù)組中jQuery中發(fā)送Ajax的時候，會自作主張的給鍵名加上[]后綴：

?

解決方法兩種：

1、前端提交JSON.stringify(數(shù)組); 后端JSON.parse(數(shù)組);

"hobby":JSON.stringify(hobbys)

?

2、使用jquery的ajax()函數(shù)的traditional參數(shù)

$.ajax({url:"/people",data: {id:id, name:name, sex:sex, hobby:hobby},success:function(data){console.log(data)},traditional:true})

前端是JS，后端也是JS，Ajax提交的參數(shù)，不變形。

?

---

4.3 POST請求（使用express）

POST請求的信息不在URL中，而是在請求的報文體中，所以不能通過req.url的形式得到數(shù)據(jù)，此時使用formidable模塊。

POST請求是用來發(fā)送大量的數(shù)據(jù)給服務(wù)器，希望服務(wù)器持久這些數(shù)據(jù)，表單的提交的。Nodejs非常害怕大內(nèi)容，因為如果你上傳1G的內(nèi)容，此時會把進(jìn)程阻塞，但是Nodejs很聰明，它把瀏覽器傳來的大內(nèi)容分成一個個包來進(jìn)行傳輸，一個包傳輸完畢，就是一個切斷點(diǎn)，nodejs就能給別的人提供服務(wù)。

?https://www.npmjs.com/package/formidable

npm install --save formidable

?

app.js后端，使用formidable包的標(biāo)準(zhǔn)語法：

//攔截前端發(fā)送的POST請求 app.post("/tijiao" , function(req,res){//下面兩行代碼是標(biāo)準(zhǔn)語法//這是formidable的構(gòu)造函數(shù)，產(chǎn)生一個form表單對象 var form = new formidable.IncomingForm();form.parse(req, function(err, data){arr.push(data); //將前端提交的數(shù)據(jù)存儲到數(shù)組中res.send("ok"); //告訴前端 }); });

?

前端發(fā)出POST請求

//************** POST請求 ***************** $("button").eq(2).click(function(){var id = $(".idTxt").val();var name = $(".name").val();var sex = $(".sex:checked").val();$.ajax({url:"/tijiao",type:"post",data: {id:id, name:name, sex:sex},success:function(data){if(data == "ok"){alert("添加成功");}},traditional:true}) });

?

formidable還能處理文件的上傳，它使用鏈路層協(xié)議進(jìn)行傳輸，比HTTP快很多：

app.post("/tijiao" , function(req,res){var form = new formidable.IncomingForm();//設(shè)置上傳的文件目錄form.uploadDir = "./uploads";//保留文件擴(kuò)展名form.keepExtensions = true;form.parse(req, function(err, fields, files) {arr.push(fields); //存儲數(shù)據(jù)console.log(fields); //fields表示普通文本（文本、單選、復(fù)選等）console.log(files); //files表示文件res.send("ok"); //告訴前端 }); });

?

用form表單提交，前端表單加上enctype屬性，文件控件要有name屬性。

<form action="/tijiao" method="post" enctype="multipart/form-data"><p><input type="file" name="files" ></p><p><input type="submit" value="提交" ></p> </form>

?

給上傳成功的文件改名：

app.post("/tijiao" , function(req,res){var form = new formidable.IncomingForm();//設(shè)置上傳的文件目錄form.uploadDir = "./uploads";//保留文件擴(kuò)展名form.keepExtensions = true;form.parse(req, function(err, fields, files) {if(files.files.name == ''){//如果表單不存在res.send("請上傳文件");return;}//改名函數(shù)fs.rename(原路徑,新路徑,callback)fs.rename("./"+ files.files.path, "./"+files.files.path + files.files.name,function(err){if(err){res.send("重命名失敗！")}else{res.send("重命名完成！")} });}); });

---

4.4其他請求識別

jquery特別符合w3c規(guī)范，express也特別符合。它們配合可以用不同的請求類型：

?

$("button").eq(3).click(function(){$.ajax({ type : "checkout",url : "/update",data : {"id":10001},success : function(data){if(data == "ok"){alert("更新成功！");}}}) }); $("button").eq(4).click(function(){$.ajax({type : "delete",url : "/remove",data : {"id":10001},success : function(data){if(data == "ok"){alert("刪除成功！");}}}) });

?

后端app.js

// 其他請求 app.checkout("/update", function(req,res){res.send("ok"); //告訴前端 });app.delete("/remove", function(req,res){res.send("ok"); //告訴前端 });

總結(jié)：

① get請求在nodejs中用url.parse(req.url,true).qurey識別

② post、checkout等所有其他請求，在Nodejs中用formidable包識別

---

?

轉(zhuǎn)載于:https://www.cnblogs.com/rope/p/10726134.html

總結(jié)

以上是生活随笔為你收集整理的前端笔记之NodeJS（三）Expressejs模板引擎请求识别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。