node学习--express框架

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('登录失败')
   }
   })

2. 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护

   app.use((req,res,next)=>{
   res.send('网站正在维护')//未加next()可以不执行一下中间件，所有地址都被此中间件处理
   })

3. 自定义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)
        }
    })
})

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

捕获错误

在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
}]