22.Express框架——2019年12月19日

2019年12月19日14:16:36

1. express简介

1.1 介绍

Express框架是后台的Node框架，所以和jQuery、zepto、yui、bootstrap都不一个东西。

Express在后台的受欢迎的程度，和jQuery一样，就是企业的事实上的标准。

原生Node开发，会发现有很多问题。比如：

■ 呈递静态页面很不方便，需要处理每个HTTP请求，还要考虑304问题

■ 路由处理代码不直观清晰，需要写很多正则表达式和字符串函数

■ 不能集中精力写业务，要考虑很多其他的东西

英语官网：http://expressjs.com/

中文官网：http://www.expressjs.com.cn/

安装Express框架，就是使用npm的命令。

--save参数，表示自动修改package.json文件，自动添加依赖项。

1.2 中间件的概念

浏览器向服务器发送一个请求后，服务器直接通过request.定位属性的方式得到通过request携带过去的数据（有用户输入的数据和浏览器本身的数据信息）。这中间就一定有一个函数将这些数据分类做了处理，已经处理好了，最后让request对象调用使用，对的，这个处理数据处理函数就是我们要说的 中间件 。由此可见，中间件可以总结以下几点：

1、封装了一些处理一个完整事件的功能函数。

2、非内置的中间件需要通过安装后，require到文件就可以运行。

3、封装了一些或许复杂但肯定是通用的功能。

1.2.1 app.use()

app.use（[path]，function）

path：是路由的url，默认参数‘/'，意义是路由到这个路径时使用这个中间件

function：中间件函数

这个中间件函数可以理解为就是function(request,response,next)

1.2.2 内置中间件

express.static `是Express目前唯一内置的一个中间件。用来处理静态资源文件。

app.use(express.static(__dirname + '/public'));

启动服务： node index.js

浏览器中访问： http://localhost:1234/ 展示的/public/index.html内容

浏览器中访问： http://localhost:1234/hello.html 展示的/public/hello.html内容

1.2.3 如何自定义中间件

在上面中间件结构中，我们知道了，中间件使用时的第二个参数是一个Function，然而，要自定义一个中间件，就是倒腾一番这个Function。

这个function总共有三个参数（req，res，next）

当每个请求到达服务器时，nodejs会为请求创建一个请求对象（request），该请求对象包含客户端提交上来的数据。同时也会创建一个响应对象（response），响应对象主要负责将服务器的数据响应到客户端。而最后一个参数next是一个方法，因为一个应用中可以使用多个中间件，而要想运行下一个中间件，那么上一个中间件必须运行next()。

1.2.4 第三方中间件

有关第三方中间件，这里我们分析几个比较重要和常用的，知道这几个的使用，其它的也就会了。

body-parser ：解析body中的数据，并将其保存为Request对象的body属性。

cookie-parser ：解析客户端cookie中的数据，并将其保存为Request对象的cookie属性

express-session ：解析服务端生成的sessionid对应的session数据，并将其保存为Request对象的session属性

query：这个中间件将一个查询字符串从URL转换为JS对象，并将其保存为Request对象的query属性。这个中间件在第四个版本中已经内置了无需安装。

2. 路由

2.1 app.get()

res.send()

res.render()

app.listen()

app.get("/",function(req,res){

​ res.send("hello");

​ });

var express = require("express");
var app = express();

app.get("/",function(req,res){
    res.send("你好");
});

app.get("/haha",function(req,res){
   res.send("这是haha页面，哈哈哈哈哈哈");
});

app.get(/^\/student\/([\d]{10})$/,function(req,res){
    res.send("学生信息，学号" + req.params[0]);
});

app.get("/teacher/:gonghao",function(req,res){
    res.send("老师信息，工号" + req.params.gonghao);
});
app.listen(3000);

2.2 get访问网址

当用get请求访问一个网址的时候，做什么事情：

app.get("网址",function(req,res){

});

如果想处理这个网址的任何method的请求，那么写all

app.all("/",function(){

});

注意：

所有的GET参数，? 后面的都已经被忽略。 锚点#也被忽略

你路由到/a ， 实际/a?id=2&sex=nan 也能被处理。

2.3 正则表达式，获取get参数

正则表达式可以被使用。正则表达式中，未知部分用圆括号分组，然后可以用req.params[0]、[1]得到。

冒号是更推荐的写法。

app.get("/student/:id",function(req,res){
    var id = req.params["id"];
    var reg= /^[\d]{6}$/;   //正则验证
    if(reg.test(id)){
       res.send(id);
    }else{
        res.send("请检查格式");
    }
});

2.4 获取参数

//冒号
app.get("/:username/:oid",function(req,res){
    var username = req.params["username"];
    var oid = req.params["oid"];

    res.write(username);
    res.end(oid);
});

app.listen(3000);

2.5 处理Get,Post请求参数

GET请求的参数在URL中，在原生Node中，需要使用url模块来识别参数字符串。

在Express中，不需要使用url模块了。可以直接使用req.query对象。

app.get("/",function(req,res){
    console.log(req.query);
    res.send();
});

POST请求在express中不能直接获得，必须使用body-parser模块。使用后，将可以用req.body得到参数。

但是如果表单中含有文件上传，那么还是需要使用formidable模块。

var bodyParser = require('body-parser')

//模板引擎
app.set("view engine","ejs");

app.get("/",function(req,res){
     res.render("form");
});

//bodyParser API
app.use(bodyParser.urlencoded({ extended: false }))

app.post("/",function(req,res){
    console.log(req.body);
});

3. 静态文件访问

app.use(express.static("./public"));

app.set()

app.use()

4.模板引擎

4.1 ejs

使用了ejs的模板引擎

app.set("viwe engine","ejs");

var express = require("express");

var app = express();

app.set("view engine","ejs");

app.get("/",function(req,res){
    res.render("haha",{
        "news" : ["我是小新闻啊","我也是啊","哈哈哈哈"]
    });
});

app.listen(3000);

注意：express4.X 和express3.X 差别非常大。

4.2 传递数据 app.render(view, [locals], callback)

app.get("/",function(req,res){
    res.render("haha",{
       "news" : ["我是小新闻啊","我也是啊","哈哈哈哈"]
    });
});

5. 中间件

5.1 next参数

如果get、post回调函数中，没有next参数，那么就匹配上第一个路由，就不会往下匹配了。

如果想往下匹配的话，那么需要写next()

app.get("/",function(req,res,next){
    console.log("1");
    next();
});

app.get("/",function(req,res){
    console.log("2");
});

路由get、post这些东西，就是中间件，中间件讲究顺序，匹配上第一个之后，就不会往后匹配了。next函数才能够继续往后匹配。

5.2 use()作用

app.use()也是一个中间件。与get、post不同的是，他的网址不是精确匹配的。而是能够有小文件夹拓展的。

比如网址： http://127.0.0.1:3000/admin/aa/bb/cc/dd

app.use("/admin",function(req,res){
    res.write(req.originalUrl + "\n");   //    /admin/aa/bb/cc/dd
    res.write(req.baseUrl + "\n");  //   /admin
    res.write(req.path + "\n");   //    /aa/bb/cc/dd
    res.end("你好");
});

静态服务

//静态服务
app.use("/jingtai",express.static("./public"));

6. 内容渲染

● 大多数情况下，渲染内容用res.render()，将会根据views中的模板文件进行渲染。如果不想使用views文件夹，想自己设置文件夹名字，那么

app.set("view engine","ejs")

● 如果想写一个快速测试页，当然可以使用res.send()。这个函数将根据内容，自动帮我们设置了Content-Type头部和200状态码。

send()只能用一次，和end一样。和end不一样在哪里？能够自动设置MIME类型。

● 如果想使用不同的状态码，可以：

res.status(404).send('Sorry, we cannot find that!');

● 如果想使用不同的Content-Type，可以：

res.set('Content-Type', 'text/html');

修改时间点：

2019年10月05日12:26:16