Express框架

初识Express框架

Express框架是什么

Express是一个基于Node平台的web应用开发框架，能创建各种web应用。使用npm install express命令进行下载

框架特性

  • 提供为方便简洁的路由定义方式
  • 对获取HTTP 请求参数进行了简化处理
  • 对模板引擎支持程度高，方便渲染动态HTML页面
  • 提供了中间件机制有效控制HTTP请求
  • 拥有大量第三方中间件对功能进行扩展

原生Node.js与Express框架对比

  • 原生Node.js
//实现路由
app.on('request',(req,res)=>{
    //获取客户端的请求路径
    let {pathname}=url.parse(req.url)
    //获取GET参数
    let {query}=url.parse(req.url,true);
    //获取POST参数
    let postData='';
    req.on('data',(param)=>{
        postData+=param
    })
    req.on('end',()=>{
        console.log(postData)
    })
    //根据请求路径响应该不同的内容
    if(pathname=='/'||pathname=='index'){
        res.end('欢迎来到首页')
    }
    else if(pathname=='/list'){
        res.end('欢迎来到列表页面')
    }
})
  • Express框架
//当客户端以get方式访问/时
app.get('/',(req,res)=>{
    //获取GET参数
    data=req.query
res.send('欢迎来到首页')
});
//当客户端以post方式访问/list路由时
app.post('/list',(req,res)=>{
    //获取POST参数
    bodyData=req.body
res.send('欢迎来到列表页面')
})
//引入express框架
const express=require('express')
//创建网站服务器
const app=express()
app.get('/',(req,res)=>{
//1.send方法内部会检测响应内容的类型
//2.会自动设置http状态码
//3.会帮我们自动设置响应的内容类型及编码
    res.send()
})
//监听端口
app.listen(3000)

中间件

中间件就是一堆方法，可以接收客户端发送来的请求，可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理

一个请求可以设置多个中间件，对同一个请求进行多次处理,因为默认情况下，请求从上到下依次匹配中间件，一旦匹配成功便终止匹配因此可以调用next方法将请求的控件权交给下一个中间件，直到遇到结束请求的中间件

app.get('/',(req,res,next)=>{
next()//标记请求还未结束，需要往下查找
})//next为一方法
app.get('/',(req,res)=>{
res.send('the second hello')
})
//如果next()放在res.send()之前，会跳过res.send()语句去执行下一个请求中间件

中间件主要由中间件方法以及请求处理函数构成

  • 中间件方法由Express提供，负责拦截请求
  • 请求处理函数由开发人员提供，负责处理请求
app.get('请求路径','处理函数')//接收并处理get请求
app.post('请求路径','处理函数')//接收并处理post请求
//get，post就为一个中间件

app.use中间件用法

app.use匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求，因为请求时是从上往下进行匹配的，所以use中间件最好是放在代码前面,另外如果将use放在最前方要加入next()否则后面的请求将不再执行

app.use((req,res,next)=>{
next();//
})
//aap.use第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求
app.use('/admin',(req,res,next)=>{
next();
})

中间件实际应用

  1. 路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户访问页面
app.use('/admin',(req,res,next)=>{
if(login){
res.end('登录成功')
}
else {
res.end('登录失败')
}
})
  1. 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护
app.use((req,res,next)=>{
res.send('网站正在维护')//未加next()可以不执行一下中间件，所有地址都被此中间件处理
})
  1. 自定义404页面，当页面不存在时显示自定义的网页，因为express自动将状态码赋为200，我们可以通过res.status(状态码)来更改网页状态码

错误处理中间件

在程序执行的过程中，不可避免会出现一些无法预料的错误，比如文件读取失败，数据库连接失败。错误处理中间件就为一个集中处理错误的地方。

//模拟程序执行出错
app.get('/index',(req,res)=>{
throw new Error('错误信息')//创建错误并抛出
})
//错误处理中间件
app.use((err,req,res,next)=>{
res.status(500)//服务器出错
res.send(err.message)//message为创建错误时里的错误信息
//因为nodejs中是支持链式编程的，因此以上代码可以这样写
res.status(500).send(err.message)
})

另外错误处理中间件只能捕获同步代码错误，不能捕获异步代码错误，因此在异步程序出现错误时，需要我们手动的去捕获错误并进行处理，方法为调用next()方法，将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件，如：

app.get('/',(req,res,next)=>{
fs.readFile('/file-not-exist',(err,data)=>{
    if(err){
        next(err)
        }else {
            res.send(data)
        }
    })
})



发生错误时会自动将错误信息输出到页面

Express框架排名_Express

捕获错误

在nodejs中异步API的错误信息都是通过回调函数获取的，支持Promise对象的异步API发生错误可以通过catch方法捕获，异步函数执行如果发生错误要如何捕获？

try catch可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能捕获其他类型的API发生的错误

//try catch语法
try{
//将可能会出错的代码放在此位置
}catch(exception){
//将程序出错后要执行的代码放在此位置
}

Express请求处理

构建模块化路由

  • 模块路由基础代码
const express=require('express')
//创建路由对象
const home=express.Router()//返回的是一个路由对象
//将路由和请求路径进行匹配
app.use('/home',home)//意思是当访问home这一路径时使用home路由进行处理
//在home路由下继续创建路由
home.get('/index',()=>{//相当于访问home目录下的index页面===/home/index
    
})
  • 构建模块化路由
    首先构建一个home路由
//home.js
const home=express.Router();
home.get('/index',()=>{
res.send('welcome')
});
module.exports=home;//如果其他模块要用到home就要将其进行导出才能使用

再构建一个admin路由

//admin.js
const admin=express.Router()
admin.get('/index',()=>{
    res.send('welcom admin');
})
module.exports=admin;

再将前两个路由导进需要使用的文件中

//app.js
const home=require('./route/home.js')
const admin=require('./route/admin.js');
app.use('/home',home);
app.use('/admin',admin);

GET参数的获取 

Express框架中使用req.query即可获取GET参数，框架内部会将GET参数转换为对象并返回

POST参数的获取

express中接收post请求参数需要借助第三方包body-parser

下载第三方模块：npm install body-parser
//引入body-parser模块
const bodyParser=require('body-parser')
//配置body-parser模块
app.use(bodyParser.urlencoded({extended:false}))//urlencoded方法对请求进行处理，会先检测当前请求中是否包含请求参数，
//如果包含请求参数便会接收请求参数并将参数转化成对象，
//再为req请求对象添加一个属性，属性名叫body，并且将请求参数作为值赋值给body，最后在方法内部调用next()方法将请求控制权交给了另一个中间件
//接收请求
app.post('/add',(req,res)=>{
    //接收请求参数
    console.log(req.body)//请求参数成功添加到req中
})

bodyParser.urlencoded({extended:false})中的extended参数，当其为false时：方法内部使用nodeJs系统模块querystring方法模块对参数格式进行处理

当其为true时：使用第三方模块qs进行处理，功能比querystring更强

Express路由参数

app.get('/find/:id/:name',(req,res)=>{
console.log(req.params)//获取请求参数，express在req中添加了一个参数为params而params存储的就是请求参数
})//id相当于一个占位符
//在浏览器地址栏的格式为：localhost:3000/find/123/zs

在以上方式下在浏览器访问find地址时必须加上要请求的参数否则是不能匹配到相对应的路由

静态资源的处理

通过Express内置的express.static可以方便地托管静态文件，如img，CSS，js文件等

app.use('static',express.static('public'))

方法中判断发来的请求是否是静态资源请求，如果是方法内部直接将静态资源响应给客户端并终止当前的请求，如果不是则会调用next()方法将请求控制权交给下一个中间件

访问时

http://localhost:3000/static/'public中的相关文件名'
如：http://localhost:3000/static/default.html，就会访问public下的default.html文件

express-art-template模块引擎

为了使art-template模板引擎能更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template

npm install art-template express-art-template//安装模板引擎
//art为模板的后缀,require('...')为要使用的模板引擎
//渲染后缀为art的模板时，使用express-art-template
app.engine('art',require('express-art-template'))
//设置模板存放的目录，views为模板的名字，告诉express框架模板存放的位置，
//views是固定写法，是express的配置项文件，一般情况下所有的模板都应存放在views文件下（需要自己手动创建views文件）
app.set('views',path.join(__dirname,'views'))
//设置模板的默认后缀，express框架允许在一个项目中使用多种模板引擎，模板后缀也有多种，渲染模板时不写后缀，默认拼接art后缀
app.set('view engine','art')
//渲染模板
app.get('/',(req,res)=>{
res.render('index',{msg:'message'})//index为模板名称,msg为传给模板的变量 
})
//render做了以下事情:
//1.拼接模板路径
//2.拼接模板后缀
//3.哪一个模板和哪一个数据进行拼接
//4.将拼接结果响应给客户端

app.locals对象

将各个模板中都可能用到的数据放在app.locals下，那么这个数据在所有模板中都可以获取到如：

app.locals.users=[{
name:'张三',
age:20
}]