Node.js學(xué)習(xí)筆記（十六、Express 框架）

express是一個(gè)簡(jiǎn)潔而靈活的node.js Web應(yīng)用框架, 提供了一系列強(qiáng)大特性幫助你創(chuàng)建各種Web應(yīng)用，和豐富的HTTP工具。

使用express可以快速地搭建一個(gè)完整功能的網(wǎng)站。

Express 框架核心特性包括：

可以設(shè)置中間件來(lái)響應(yīng)HTTP請(qǐng)求。

定義了路由表用于執(zhí)行不同的HTTP請(qǐng)求動(dòng)作。

可以通過(guò)向模板傳遞參數(shù)來(lái)動(dòng)態(tài)渲染HTML頁(yè)面。

新建一個(gè)目錄express_demo，執(zhí)行命令，

npm init

1

在當(dāng)前目錄下生成一個(gè) package.json 文件。

安裝命令：

cnpm install express --save

1

Express 框架安裝在當(dāng)前目錄的 node_modules 目錄中，-save 的意思是，創(chuàng)建好之后，會(huì)修改 package.json 文件，表示當(dāng)前項(xiàng)目要依賴 express。

除此之外，還需要幾個(gè)模塊：

**? body-parser **- node.js 中間件，用于處理 JSON, Raw, Text 和 URL 編碼的數(shù)據(jù)。

nbsp;cookie-parser - 這就是一個(gè)解析Cookie的工具。通過(guò)req.cookies可以取到傳過(guò)來(lái)的cookie，并把它們轉(zhuǎn)成對(duì)象。

multer - node.js 中間件，用于處理 enctype=“multipart/form-data”（設(shè)置表單的MIME編碼）的表單數(shù)據(jù)。

這個(gè)實(shí)例只是用來(lái)輸出“Hello World”,

express_demo.js:

var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

執(zhí)行：

訪問(wèn)地址：http://127.0.0.1:8081

Express 應(yīng)用使用回調(diào)函數(shù)的參數(shù)： request 和 response 對(duì)象來(lái)處理請(qǐng)求和響應(yīng)的數(shù)據(jù)。

app.get('/', function (req, res) { // -- })

1

2

3

**Request 對(duì)象 **- request 對(duì)象表示 HTTP 請(qǐng)求，包含了請(qǐng)求查詢字符串，參數(shù)，內(nèi)容，HTTP 頭部等屬性。常見(jiàn)屬性有：

req.app：當(dāng)callback為外部文件時(shí)，用req.app訪問(wèn)express的實(shí)例

req.baseUrl：獲取路由當(dāng)前安裝的URL路徑

req.body / req.cookies：獲得「請(qǐng)求主體」/ Cookies

req.fresh / req.stale：判斷請(qǐng)求是否還「新鮮」

req.hostname / req.ip：獲取主機(jī)名和IP地址

req.originalUrl：獲取原始請(qǐng)求URL

req.params：獲取路由的parameters

req.path：獲取請(qǐng)求路徑

req.protocol：獲取協(xié)議類(lèi)型

req.query：獲取URL的查詢參數(shù)串

req.route：獲取當(dāng)前匹配的路由

req.subdomains：獲取子域名

req.accepts()：檢查可接受的請(qǐng)求的文檔類(lèi)型

req.acceptsCharsets / req.acceptsEncodings / ?req.acceptsLanguages：返回指定字符集的第一個(gè)可接受字符編碼

req.get()：獲取指定的HTTP請(qǐng)求頭

req.is()：判斷請(qǐng)求頭Content-Type的MIME類(lèi)型

Response 對(duì)象 - response 對(duì)象表示 HTTP 響應(yīng)，即在接收到請(qǐng)求&時(shí)向客戶端發(fā)送的 HTTP 響應(yīng)數(shù)據(jù)。常見(jiàn)屬性有：

res.app：同req.app一樣

res.append()：追加指定HTTP頭

res.set()在res.append()后將重置之前設(shè)置的頭

res.cookie(name，value [，option])：設(shè)置Cookie

opition: domain / expires / httpOnly / maxAge / path / secure / signed

res.clearCookie()：清除Cookie

res.download()：傳送指定路徑的文件

res.get()：返回指定的HTTP頭

res.json()：傳送JSON響應(yīng)

res.jsonp()：傳送JSONP響應(yīng)

res.location()：只設(shè)置響應(yīng)的Location HTTP頭，不設(shè)置狀態(tài)碼或者close response

res.redirect()：設(shè)置響應(yīng)的Location HTTP頭，并且設(shè)置狀態(tài)碼302

res.render(view,[locals],callback)：渲染一個(gè)view，同時(shí)向callback傳遞渲染后的字符串，如果在渲染過(guò)程中有錯(cuò)誤發(fā)生next(err)將會(huì)被自動(dòng)調(diào)用。callback將會(huì)被傳入一個(gè)可能發(fā)生的錯(cuò)誤以及渲染后的頁(yè)面，這樣就不會(huì)自動(dòng)輸出了。

res.send()：傳送HTTP響應(yīng)

res.sendFile(path [，options] [，fn])：傳送指定路徑的文件 -會(huì)自動(dòng)根據(jù)文件extension設(shè)定Content-Type

res.set()：設(shè)置HTTP頭，傳入object可以一次設(shè)置多個(gè)頭

res.status()：設(shè)置HTTP狀態(tài)碼

res.type()：設(shè)置Content-Type的MIME類(lèi)型

前面路由是由router.js實(shí)現(xiàn)的，但Express提供了更便捷的方式。

實(shí)例，express_demo2.js：

var express = require('express'); var app = express(); // 主頁(yè)輸出 "Hello World" app.get('/', function (req, res) { console.log("主頁(yè) GET 請(qǐng)求"); res.send('Hello GET'); }) // POST 請(qǐng)求 app.post('/', function (req, res) { console.log("主頁(yè) POST 請(qǐng)求"); res.send('Hello POST'); }) // /del_user 頁(yè)面響應(yīng) app.get('/del_user', function (req, res) { console.log("/del_user 響應(yīng) DELETE 請(qǐng)求"); res.send('刪除頁(yè)面'); }) // /list_user 頁(yè)面 GET 請(qǐng)求 app.get('/list_user', function (req, res) { console.log("/list_user GET 請(qǐng)求"); res.send('用戶列表頁(yè)面'); }) // 對(duì)頁(yè)面 abcd, abxcd, ab123cd, 等響應(yīng) GET 請(qǐng)求 app.get('/ab*cd', function(req, res) { console.log("/ab*cd GET 請(qǐng)求"); res.send('正則匹配'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

啟動(dòng)：

分別訪問(wèn)不同的地址：

Express 提供了內(nèi)置的中間件 express.static 來(lái)設(shè)置靜態(tài)文件如：圖片， CSS, JavaScript 等。

可以使用 express.static 中間件來(lái)設(shè)置靜態(tài)文件路徑。例如，一般將圖片， CSS, JavaScript 文件放在 public 目錄下。

app.use('/public', express.static('public'));

1

新建目錄：

E:\project\express_demo\public\images

1

在這個(gè)目錄下存放一張圖片haha.jpg。

處理靜態(tài)文件實(shí)例，express_demo3.js:

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

啟動(dòng)：

訪問(wèn)地址：http://127.0.0.1:8081/public/images/haha.jpg

以下實(shí)例演示了在表單中通過(guò) GET 方法提交兩個(gè)參數(shù)，可以使用 server.js 文件內(nèi)的 process_get 路由器來(lái)處理輸入：

index.htm:

1

2

3

4

5

6

7

8

9

10

server.js:

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.htm" ); }) app.get('/process_get', function (req, res) { // 輸出 JSON 格式 var response = { "first_name":req.query.first_name, "last_name":req.query.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

執(zhí)行以后，

訪問(wèn)地址：http://127.0.0.1:8081/index.htm

提交表單：

同樣地，應(yīng)對(duì)post請(qǐng)求，process_post 路由器來(lái)處理。

index.htm:

1

2

3

4

5

6

7

8

9

10

server.js:

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); // 創(chuàng)建 application/x-www-form-urlencoded 編碼解析 var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use('/public', express.static('public')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.htm" ); }) app.post('/process_post', urlencodedParser, function (req, res) { // 輸出 JSON 格式 var response = { "first_name":req.body.first_name, "last_name":req.body.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

執(zhí)行以后，

訪問(wèn)地址：http://127.0.0.1:8081/index.htm

文件上傳用的是post方法，上傳表單 enctype 屬性設(shè)置為 multipart/form-data。

index.htm:

文件上傳：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

server.js:

var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); app.use('/public', express.static('public')); app.use(bodyParser.urlencoded({ extended: false })); app.use(multer({ dest: '/tmp/'}).array('image')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.htm" ); }) app.post('/file_upload', function (req, res) { console.log(req.files[0]); // 上傳的文件信息 var des_file = __dirname + "/" + req.files[0].originalname; fs.readFile( req.files[0].path, function (err, data) { fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'File uploaded successfully', filename:req.files[0].originalname }; } console.log( response ); res.end( JSON.stringify( response ) ); }); }); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

執(zhí)行以后，

訪問(wèn)地址：http://127.0.0.1:8081/index.htm

【1】、https://www.runoob.com/nodejs/nodejs-express-framework.html

【2】、https://www.w3cschool.cn/nodejs/nodejs-express-framework.html

【3】、http://how2j.cn/k/nodejs/nodejs-express-start/1766.html

Express JavaScript Node.js

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。