J.J.'s Blogs

J.J. Huang   2020-02-09   Node.js   瀏覽次數：次   {{moment(1581255000000).fromNow()}}

Node.js | Express 框架(下)

📑 目錄
  1. 簡介
  2. GET 方法
    1. index.html
    2. server.js
  3. POST 方法
    1. index.html
    2. server.js
  4. 文件上傳
    1. 安裝 multer
    2. index.html
    3. server.js
  5. Cookie 管理
    1. 安裝 cookie-parser
    2. express_cookie.js

簡介

詳細簡介可以先參考前一篇Express 框架(上)的文章。

GET 方法

通過GET方法提交兩個參數，我們可以使用server.js文件內的process_get路由器來處理輸入。

index.html

1
2
3
4
5
6
7
8
9
10
<html>
   <body>
      <form action="http://0.0.0.0:8081/process_get" method="GET">
         First Name: <input type="text" name="first_name"> <br>
          
         Last Name: <input type="text" name="last_name">
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

server.js

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
var express = require('express');
var app = express();
 
app.use('/public', express.static('public'));
 
app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
 
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.write('<head><meta charset="utf-8"></head>');
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, '0.0.0.0', function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("瀏覽地址為 http://%s:%s", host, port)
 
})

執行結果如下：​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌‌​​‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌‌​​​

1
2
$ node server.js
瀏覽地址為 http://0.0.0.0:8081

開啟瀏覽器瀏覽：

1
http://0.0.0.0:8080/index.html

Node.js - 圖 1 (01)

POST 方法

通過POST方法提交兩個參數，我們可以使用server.js文件內的process_post路由器來處理輸入。​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌‌​​‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌‌​​​

index.html

1
2
3
4
5
6
7
8
9
10
<html>
   <body>
      <form action="http://0.0.0.0:8081/process_post" method="POST">
         First Name: <input type="text" name="first_name"> <br>
          
         Last Name: <input type="text" name="last_name">
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

server.js

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
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
 
// 建立 application/x-www-form-urlencoded 編碼解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
app.use('/public', express.static('public'));
 
app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
 
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.write('<head><meta charset="utf-8"></head>');
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, '0.0.0.0', function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("瀏覽地址為 http://%s:%s", host, port)
 
})

執行結果如下：

1
2
$ node server.js
瀏覽地址為 http://0.0.0.0:8081

開啟瀏覽器瀏覽：

1
http://0.0.0.0:8080/index.html

Node.js - 圖 2 (02)​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌‌​​‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌‌​​​

文件上傳

建立一個用於上傳文件的表單，使用POST方法，表單enctype屬性設置為multipart/form-data。

安裝 multer

multer是一個node.js檔案上傳中介軟體，它是在busboy的基礎上開發的。

multer必須指定enctype="multipart/form-data"。​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌‌​​‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌‌​​​

1
npm install multer --save

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
   <head>
      <title>文件上傳表單</title>
   </head>
   <body>
      <h3>文件上傳：</h3>
      選擇一個文件上傳: <br />
      <form action="/file_upload" method="post" enctype="multipart/form-data">
         <input type="file" name="image" size="50" />
         <br />
         <input type="submit" value="上傳文件" />
      </form>
   </body>
</html>

server.js

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
45
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.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
 
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.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
          res.end( JSON.stringify( response ) );
       });
   });
})
 
var server = app.listen(8081, '0.0.0.0', function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("瀏覽地址為 http://%s:%s", host, port)
 
})

執行結果如下：

1
2
$ node server.js
瀏覽地址為 http://0.0.0.0:8081

開啟瀏覽器瀏覽：

1
http://0.0.0.0:8080/index.html

Node.js - 圖 3 (03)​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌‌​​‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌‌​​​

1
npm install cookie-parser --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var express      = require('express')
var cookieParser = require('cookie-parser')
var util = require('util');
 
var app = express()
app.use(cookieParser())
 
app.get('/', function(req, res) {
    console.log("Cookies: " + util.inspect(req.cookies));
})
 
var server = app.listen(8081, '0.0.0.0', function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("瀏覽地址為 http://%s:%s", host, port)
 
})

執行結果如下：

1
2
$ node express_cookie.js
瀏覽地址為 http://0.0.0.0:8081

開啟瀏覽器瀏覽：

1
http://0.0.0.0:8080/

Server控制台輸出結果：​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌‌​​‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌‌​​​

1
2
3
$ node express_cookie.js
瀏覽地址為 http://0.0.0.0:8081
Cookies: [Object: null prototype] {}

Node.js - 圖 4 (04)


註：以上參考了
Node.js Express 框架

📚 相關文章

📄 公開段落採 CC BY 3.0 TW 授權，可自由轉載引用，需署名出處。
🔒 付費 / 會員段落 © J.J. Huang，保留所有權利，禁止轉載。