node战斗课程（6）—— express框架_express6框架

express框架

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。

既然要说，那么我就带大家，通过exprss搭建个简易的node服务器项目。
开始之前先说说基础：

Express 框架核心特性：

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

这3点总结就是： 请求——>响应+跳转——>页面。一个项目的整体流程不过如此。

一个简单Express 框架实例

之前在没说express框架的时候，做了一个简单的页面响应为hello word的js，代码如下：

// 导入http模块:
var http = require('http');

// 创建http server，并传入回调函数:
var server = http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end('<h1>Hello world!</h1>');
});

// 让服务器监听8080端口:
server.listen(8080);
console.log('Server is running at http://127.0.0.1:8080/');
1
2
3
4
5
6
7
8
9
10
11
12

这块代码意义在于让只要访问127.0.0.1:8080这个端口，无论后面跟的是什么，都返回hello word

这次我们用express 实现以下：

如何快速建立一个项目，记得以前说过，现在就快速的带大家过一遍：

npm init
1

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

请求和响应

request 和 response 对象的具体介绍：

Request 对象 - request 对象表示 HTTP 请求，包含了请求查询字符串，参数，内容，HTTP 头部等属性。常见属性有：

req.baseUrl：获取路由当前安装的URL路径
req.body / req.cookies：获得「请求主体」/ Cookies
req.fresh / req.stale：判断请求是否还「新鲜」
req.hostname / req.ip：获取主机名和IP地址
req.originalUrl：获取原始请求URL
req.params：获取路由的parameters
req.path：获取请求路径
req.protocol：获取协议类型
req.query：获取URL的查询参数串
req.route：获取当前匹配的路由
req.subdomains：获取子域名
req.accepts()：检查可接受的请求的文档类型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：返回指定字符集的第一个可接受字符编码
req.get()：获取指定的HTTP请求头
req.is()：判断请求头Content-Type的MIME类型

Response 对象 - response 对象表示 HTTP 响应，即在接收到请求时向客户端发送的 HTTP 响应数据。常见属性有：

res.append()：追加指定HTTP头
res.cookie(name，value [，option])：设置Cookie
res.clearCookie()：清除Cookie
res.download()：传送指定路径的文件
res.get()：返回指定的HTTP头
res.json()：传送JSON响应
res.jsonp()：传送JSONP响应
res.redirect()：设置响应的Location HTTP头，并且设置状态码302
res.send()：传送HTTP响应
res.sendFile(path [，options] [，fn])：传送指定路径的文件 -会自动根据文件extension设定Content-Type
res.set()：设置HTTP头，传入object可以一次设置多个头
res.status()：设置HTTP状态码
res.type()：设置Content-Type的MIME类型

路由

我们已经了解了 HTTP 请求的基本应用，而路由决定了由谁(指定脚本)去响应客户端请求。
在HTTP请求中，我们可以通过路由提取出请求的URL以及GET/POST参数。
接下来我们扩展 Hello World，添加一些功能来处理更多类型的 HTTP 请求。

先看如下代码：

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
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

看看上面，这就是路由的基本用法。

静态文件

Express 提供了内置的中间件 express.static 来设置静态文件如：图片， CSS, JavaScript 等。

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

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

然后修改下以前的代码：

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

一个完整的页面的请求到服务端接受信息（以get请求为例）

页面代码：

<html>
<body>
<form action="http://127.0.0.1:8081/gzy/getInfor" 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>
1
2
3
4
5
6
7
8
9
10

服务端接口：

var express = require('express');
var app = express();
var router = express.Router();

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


router.get('/gg', function (req, res) {
    //console.log(__dirname);
    //res.send('Hello World');
    res.sendFile( __dirname + "/" + "index.html" );
})

router.get('/getInfor',function(req, res){
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    var response = {
        "first_name":req.query.first_name,
        "last_name":req.query.last_name
    };
    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
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

这里再介绍一下express的脚手架：

全局安装：

npm install express-generator -g
1

执行下面指令：

express app
1

ps：app是你想要创建项目的名称。