node.js四

发表于 | 分类于

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具

Express 框架核心特性

1
2
3
可以设置中间件来响应 HTTP 请求
定义了路由表用于执行不同的 HTTP 请求动作
可以通过向模板传递参数来动态渲染 HTML 页面

安装 Express

1
cnpm install express --save

Express 框架实例

创建 express_demo.js 文件，代码如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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("应用实例，访问地址为 http://%s:%s", host, port)
})

执行以上代码

1
node express_demo.js

在浏览器中访问 http://127.0.0.1:8081，结果如下图所示

1
hello world

Express 路由

创建 express_demo2.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
var express = require('express');
var app = express();
//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})
//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})
//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})
//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})
// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

执行以上代码

1
node express_demo2.js

在浏览器中访问 http://127.0.0.1:8081/list_user，结果如下图所示

1
用户列表页面

在浏览器中访问 http://127.0.0.1:8081/abcd，结果如下图所示

1
正则匹配

在浏览器中访问 http://127.0.0.1:8081/abcdefg，结果如下图所示：

1
Cannot GET/abcdefg

静态文件

Express 提供了内置的中间件 express.static 来设置静态文件如：图片， CSS, JavaScript 等。
你可以使用 express.static 中间件来设置静态文件路径。例如，如果你将图片， CSS, JavaScript 文件放在 public 目录下，你可以这么写

1
app.use(express.static('public'));

我们可以到 public/images 目录下放些图片,如下所示

1
public/images/logo.png

创建 express_demo3.js 文件，代码如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var express = require('express');
var app = express();
app.use(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("应用实例，访问地址为 http://%s:%s", host, port)
})

执行以上代码

1
node express_demo3.js

在浏览器中访问 http://127.0.0.1:8081/images/logo.png

1
显示图片

GET 方法

index.htm 文件代码

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<form action="http://127.0.0.1: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
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/index.htm', 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().address
  var port = server.address().port
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

执行以上代码

1
node server.js

浏览器访问 http://127.0.0.1:8081/index.htm，

1
输入值，点击按键，跳转到另外一个页面，显示字符串，内容为刚才输入的值

POST 方法

index.htm 文件代码

1
2
3
4
5
6
7
8
9
10
<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 文件代码

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
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(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("应用实例，访问地址为 http://%s:%s", host, port)
})

执行以上代码

1
node server.js

浏览器访问 http://127.0.0.1:8081/index.htm

1
输入值，点击按键，跳转到另外一个页面，显示字符串，内容为刚才输入的值