【Node.js】初见Express框架

Express框架

一、基本概念

01.是什么

• Express是一个基于Node平台的web应用开发框架
• 它提供了一系列的强大特性，帮助你创建各种Web应用我们
• 可以使用npm install express命令进行下载

02.特性

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

03.下载

npm install express

04.引用

const express = require("express");

• 返回一个方法

05.创建网站服务器

• 调用这个express()方法就可以创建网站服务器

  • 不需要再调用http模块

  // 创建服务器
  const app = express();
  // 监听端口
  app.listen(3000);
  

06.创建路由

• 创建路由以响应客户端请求，与router模块使用类似

  app.get("/", (req,res) =>{
      res.send();
  });
  

  注意，不再使用end()方法进行响应，而是send()

  ---

  send()方法：

  1. 会自动检测响应内容的类型
  2. 自动设置http状态码，主动设置使用res.status()
  3. 设置响应的内容类型与编码
  4. 可以输入对象

二、中间件

01.基本概念

• 概念：

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

• 组成：

  中间件主要由两部分构成：

  1. 中间件方法：中间件方法由Express提供，负责拦截请求

  2. 请求处理函数：请求处理函数由开发人员提供，负责处理请求

• 处理：

  1. 可以针对同一个请求设置多个中间件，对同一个请求进行多次处理

  2. 默认情况下，请求从上到下依次匹配中间件，匹配成功，终止匹配

  3. 可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件

02.app.use中间件

• app.use匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求

  因为中间件按顺序执行，所以该中间件要放在最前面

  app.use( (req,res,next)=>{
      next();
  } );
  

• app.use第一个参数可以传入请求地址

  • 代表不论什么请求方式，只要是这个请求地址就接收这个请求

  app.use("/list",(req,res,next)=>{
     next(); 
  });
  

03.中间件应用

• 路由保护

  客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态

  用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面

• 网站维护公告

  在所有路由的最上面定义接收所有请求的中间件，

  直接为客户端做出响应，网站正在维护中

  ---

  res.send();
  

• 自定义404

  res.status(404).send("。。。");
  

04.错误处理中间件

• 错误处理中间件是一个集中处理错误的地方

  在程序执行的过程中，不可避免的会出现一些无法预料的错误

  比如文件读取失败，数据库连接失败

  app.get( ()=>{
      throw new Error("程序错误");
  });
  

  app.use( (err,req,res,next)=>{
      res.status(500).send(err.message);
  } );
  

• 异步错误的处理：手动触发

  当程序出现错误时，调用next()方法，并且将错误信息通过参数的形式传递给**next()方法**，即可触发错误处理中间件

  app.get((req,res,next)=>{
      fs.readFile(" ", (err,data)=>{
          if(err){
              next(err);
          }
      });
  });
  

05.捕获错误

在 node.js中，异步API的错误信息可以通过回调函数获取

支持Promise对象的异步API发生错误，可以通过catch()方法捕获

---

那么，异步函数执行如果发生错误要如何捕获错误呢？

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

  app.get("", async ()=>{
   	try{
          await 可能出现错误的代码
      }catch(ex){
          next(ex);
      }    
  });
  

  将可能出现错误的代码放入try中，程序会尝试执行这个代码

  如果没有错误，则继续执行try catch后面的代码

  如果有错误，就执行catch语句中的代码， 触发错误处理中间件

---

三、构建模块化路由

01.构建模块化路由的基础代码

• 创建路由对象

  const home = express.Router();
  

• 将路由和请求路径进行匹配

  app.use("/home",home);
  

  在客户端请求这个路径"/home"时，用home路由进行这个处理

• 在home路由下继续创建路由（二级路由）

  home.get("/index", ()=>{
      res.send();
  });
  

  这是home路由下的处理

  ---

  当用户访问/home时，进入home路由，然后在/home路径下访问/index路径时，就进行home路由里面的处理，

  即实际客户端访问：localhost:3000/home/index时，才会进入这个路由

• 导出home路由

  module.exports = home;
  

四、Express请求处理

01.GET参数的获取

• Express框架中使用 req.query即可获取GET参数

  • 框架内部会将GET参数转换为对象并返回
  • 地址栏中问号后面的参数

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

02.POST参数的获取

• Express中接收POST请求参数需要借助第三方包 body-parser

  const bodyParser = require("body-parser");
  
  app.use(bodyParser.urlencoded({ extended:false }));
  
  app.post("/", (req,res)=>{
     console.log(req.body);
  });
  

  bodyParser.urlencoded这个方法对请求进行处理，如果含有参数，就将参数转换为对象类型

  然后为req这个请求对象添加一个body属性，并把参数对象赋值给这个属性

  最后在内部调用next()方法，进行下一个中间件的执行

03.Express路由参数

• 语法示例

  app.get("./find/:id",(req,res)=>{
      req.params
  });
  

  • 在请求地址的后面显示添加参数
    • 以冒号 : 的形式进行分隔，后面写参数
    • 这个id 是一个占位符，表示这个路由要接收一个id参数
  • req.params：存储路由参数的对象

  如：请求地址：

  localhost:3000/find/123456

  则，req.params = { “id”: “123456” };

  • 可以拼接多个

    app.get("./find/:id/:name/:age",(req,res)=>{
        req.params
    });
    
    localhost:3000/find/123456/ccc/234
    

04.静态资源的处理

• 通过 Express内置的 express.static可以方便地托管静态文件

  • 接收静态资源目录参数

  例如img、CSS、 Javascript文件等

---

模板页面需要静态资源的处理

这是因为模板中的相对路径，实际是相对于浏览器地址栏中的请求路径

并不是相对于模板所在路径

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

• 这样就可以直接访问public文件夹下的文件

五、模板引擎

01.express-art-template模板引擎

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

• 需要同时下载两个模块

  npm install art-template express-art-template
  

• 语法示例

  // 配置：在渲染art模板时，使用express-art-template模块
  app.engine("art",require("express-art-template"));
  // 设置模板存放目录
  app.set("views", path.join(__dirname,"views"));
  // 设置模板的默认后缀，默认拼接.art后缀
  app.set("view engine", "art");
  
  app.get("/", (req,res)=>{
      // 渲染模板：模板名称+对象数据
      // 会将结果直接响应给客户端
      res.render("index");
  })
  

  当请求地址是"/“时，就渲染”/index"到页面中

02.app.locals对象

只查询公共数据一次，所有模板都可以获取数据

• 变量设置到 app.locals对象下面，这个数据在所有的模板中都可以获取到

• 语法示例

  app.locals.users = [{...}];
  

  在模板中可以直接使用模板语法以导入数据，不需要再次请求数据