參考:Node.js Express 框架 | 菜鳥教程
第一個 Express 框架實例
接下來我們使用 Express 框架來輸出 "Hello World"。
以下實例中我們引入了 express 模塊,并在客戶端發起請求后,響應 "Hello World" 字符串。
創建 express_demo.js 文件,代碼如下所示:
//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().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})
執行以上代碼:
在瀏覽器中訪問 http://127.0.0.1:8081,結果如下圖所示:
靜態文件
Express 提供了內置的中間件?express.static?來設置靜態文件如:圖片, CSS, JavaScript 等。
你可以使用?express.static?中間件來設置靜態文件路徑。例如,如果你將圖片, CSS, JavaScript 文件放在 public 目錄下,你可以這么寫:
app.use('/public', express.static('public'));
我們可以到 public/images 目錄下放些圖片,如下所示:
讓我們再修改下 "Hello World" 應用添加處理靜態文件的功能。
創建 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().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})
執行以上代碼:
在瀏覽器中訪問 http://127.0.0.1:8081/public/1.jpg,結果如下圖所示:
GET 方法
以下實例演示了在表單中通過 GET 方法提交兩個參數,我們可以使用 server.js 文件內的?process_get?路由器來處理輸入:
index.html 文件代碼:
<html>
<body>
<form action="/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 文件代碼:
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.end(JSON.stringify(response));
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})
執行以上代碼:
瀏覽器訪問 http://127.0.0.1:8081/index.html,如圖所示:
現在你可以向表單輸入數據,并提交,如下演示:
POST 方法
以下實例演示了在表單中通過 POST 方法提交兩個參數,我們可以使用 server.js 文件內的?process_post?路由器來處理輸入:
index.html 文件代碼:
<html>
<body>
<form action="http://127.0.0.1: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 文件代碼:
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.end(JSON.stringify(response));
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})
執行以上代碼:
瀏覽器訪問 http://127.0.0.1:8081/index.html,如圖所示:
現在你可以向表單輸入數據,并提交,如下演示:
文件上傳
以下我們創建一個用于上傳文件的表單,使用 POST 方法,表單 enctype 屬性設置為 multipart/form-data。
index.html 文件代碼:
<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 文件代碼:
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.end( JSON.stringify( response ) );});});
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})
執行以上代碼:
要執行如下命令安裝multer:
npm install multer
然后發現package.json文件里多了一個依賴,啟動:
瀏覽器訪問 http://127.0.0.1:8081/index.html,如圖所示:
現在你可以向表單輸入數據,并提交,如下演示:
然后,發現在項目目錄下多了一個pdf文件
Cookie 管理
我們可以使用中間件向 Node.js 服務器發送 cookie 信息,以下代碼輸出了客戶端發送的 cookie 信息:
express_cookie.js 文件代碼:
// express_cookie.js 文件
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));
})app.listen(8081)
執行以上代碼:
要執行
npm install cookie-parser
現在你可以訪問 http://127.0.0.1:8081 并查看終端信息的輸出,如下演示: