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

猜你喜欢

转载自www.cnblogs.com/oneapple/p/12067701.html