2020 September 11 Web开发

Nodejs后端开发(四)-Express框架搭建后台服务器

Express框架简介及初体验

Express框架是什么
1. Express是一个基于Node平台的第三方web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。
2. 使用原生JS创建应用是非常复杂的，比如：
  1. 实现路由功能，需要引入模块，需要对请求地址进行解析，需要各种判断
  2. 实现静态资源访问功能，要引入文件读取模块对文件内容读取，还需要设置相应模板类型
  3. 接收post请求参数的代码，还需对请求对象添加事件，手动拼接请求参数，要对参数格式进行转化等等
  4. 以上跟都跟业务逻辑没有关系
3. Express能够使用更加简洁的代码实现各种强大的应用，Express已经成为企业创建web的标准
Express框架特性
1. 提供了方便简洁的路由定义方式
2. 对获取HTTP请求参数进行了简化处理
3. 对模板引擎支持程度高，方便渲染动态HTML页面
4. 提供了中间件机制有效控制HTTP请求
5. 拥有大量第三方中间件对功能进行扩展

原生Node.js与Express框架对比之路由

原生Node.js

 app.on('request', (req, res) => {
     // 获取客户端的请求路径
     let { pathname } = url.parse(req.url);
     // 对请求路径进行判断 不同的路径地址响应不同的内容
     if (pathname == '/' || pathname == 'index') {
         res.end('欢迎来到首页'); 
     } else if (pathname == '/list') {
         res.end('欢迎来到列表页页'); 
     } else if (pathname == '/about') {
         res.end('欢迎来到关于我们页面') 
     } else {
         res.end('抱歉, 您访问的页面出游了');
     }
 });

使用Express框架

 // 当客户端以get方式访问/时
 app.get('/', (req, res) => {
     // 对客户端做出响应
     res.send('Hello Express');
 });
 // 当客户端以post方式访问/add路由时
 app.post('/add', (req, res) => {
     res.send('使用post方式请求了/add路由'); 
 });

原生Node.js与Express框架对比之获取请求参数

原生Node.js

 app.on('request', (req, res) => {
     // 获取GET参数
     let {query} = url.parse(req.url, true);
     // 获取POST参数
     let postData = '';
     req.on('data', (chunk) => { 
         postData += chunk; 
     });
     req.on('end', () => {
         console.log(querystring.parse(postData) 
     })); 
 });

使用Express框架

 app.get('/', (req, res) => {
     // 获取GET参数
     console.log(req.query); 
 });
 app.post('/', (req, res) => {
     // 获取POST参数
     console.log(req.body);
 })

Express初体验

使用Express框架创建web服务器及其简单，调用express模块返回的函数即可。

 // 引入Express框架
 const express = require('express');
 // 使用框架创建web服务器
 const app = express();
 // 当客户端以get方式访问/路由时
 app.get('/', (req, res) => {
     // 对客户端做出响应 send方法会根据内容的类型自动设置响应头
     res.send('Hello Express'); // <h2>Hello Express</h2> {say: 'hello'}
 });
 // 程序监听3000端口
 app.listen(3000);

注意res.send()方法：
1. 该方法可以向客户端做出响应
2. 会自动检测响应内容的类型，将内容类型自动设置到响应头中(Content-type)
3. 自动设置响应内容的类型编码（比如UTF-8），防止出现乱码
4. 会自动设置http状态码为200
  1. 当返回错误码时，需要手动设置：
    res.status(400).send('<h4>邮件地址或者密码错误</h4>');

Express中间件

什么是中间件
1. 中间件就是一堆方法，可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。中间件的作用是专门用来接收请求、处理请求的
2. 中间件主要由两部分构成: 中间件方法以及请求处理函数。
  1. 中间件方法由Express提供，负责拦截请求
  2. 请求处理函数由开发人员提供，负责处理请求。
```
 app.get('请求路径', '处理函数') // 接收并处理get请求
 app.post('请求路径', '处理函数') // 接收并处理post请求
```
3. 可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。
4. 默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配。
5. 可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。
```
 app.get('/request', (req, res, next) => { 
     req.name = "张三"; 
     //没有next就会卡在这，不会自动向下匹配
     next(); 
 });
 app.get('/request', (req, res) => {
     //结束请求的中间件
     res.send(req.name);
 });
```
app.use中间件用法
1. app.use 匹配所有的请求方式（get/post/put…），可以直接传入请求处理函数，代表接收所有的请求。
```
 app.use((req, res, next) => {
     console.log(req.url);
     next();
 });
```
2. app.use 第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求
```
 app.use('/admin', (req, res, next) => { 
     console.log(req.url); next(); 
 });
```

中间件应用

路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。
网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。
自定义404页面

 // 引入Express框架
 const express = require('express');
 // 使用框架创建web服务器,不需要在引入http模块了
 const app = express();
    
 //网站维护公告
 // app.use((req,res,next)=>{
 //    res.end('当前网站正在维护'); 
 // })
    
 // 路由保护
 app.use('/admin',(req,res,next)=>{
     let isLogin = false;
     if(isLogin){
         next();
     }else{
         res.send('您还没有登录请登录')
     }
 })
    
 //当客户端以get方式访问/路由时
 app.get('/admin',(req,res)=>{
     // 对客户端做出响应
     res.send('您已经登录！');
 })
    
 // 自定义404页面
    
 app.use((req,res,next)=>{
     res.status(404).send('当前访问的页面不存在');
 })
    
 // 程序监听3000端口
 app.listen(3000);
 console.log('服务器启动成功！');

错误处理中间件

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败，数据库连接失败。错误处理中间件是一个集中处理错误的地方。
```
 app.use((err, req, res, next) => { 
     res.status(500).send('服务器发生未知错误'); 
 })
```

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

 app.get("/", (req, res, next) => { 
     fs.readFile("/file-does-not-exist", (err, data) => {
         if (err) {
             next(err);
         }
     });
 });

代码举例：

 // 引入express框架
 const express = require('express');
 const fs = require('fs');
 // 创建网站服务器
 const app = express();
 app.get('/index', (req, res, next) => {
     // 自定义错误对象，然后抛出
     // throw new Error('程序发生了未知错误')
     fs.readFile('./01.js', 'utf8', (err, result) => {
         if (err != null) {
             next(err)
         }else {
             res.send(result)
         }
     })
     // res.send('程序正常执行')
 })
        
 // 错误处理中间
 app.use((err, req, res, next) => {
     res.status(500).send(err.message);
 })
        
 // 监听端口
 app.listen(3000);
 console.log('网站服务器启动成功');

捕获错误

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

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

 app.get("/", async (req, res, next) => { 
     try { 
         await User.find({name: '张三'}) 
     }catch(ex) { 
         next(ex); 
     }
 });

代码举例：

 // 引入express框架
 const express = require('express');
 const fs = require('fs');
 const promisify = require('util').promisify;
 const readFile = promisify(fs.readFile);
 // 创建网站服务器
 const app = express();
 app.get('/index', async (req, res, next) => {
     try {
         await readFile('./aaa.js')
     }catch (ex) {
         next(ex);
     }
 })
 // 错误处理中间
 app.use((err, req, res, next) => {
     res.status(500).send(err.message);
 })
 // 监听端口
 app.listen(3000);
 console.log('网站服务器启动成功');

Express框架请求处理

构建模块化路由

什么是模块化路由？
1. 目前尽管可以通过app.get/app.post方法创建路由，但是在真正项目当中路由的数量是非常多的，如果都写在一个文件当中，那是非常大的
2. 因此，为了解决这个问题，Express框架就有了模块化路由这个概念
3. 可以根据某种条件将路由进行分类，将不同路由类别放置再不同模块中，方便管理

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

 // 引入express框架
 const express = require('express');
 // 创建网站服务器
 const app = express();
 // 创建路由对象（一级路由）
 const home = express.Router();
 // 为路由对象匹配请求路径(一级路径)
 app.use('/home', home);
 // 创建二级路由，客户端访问：/home/index，会到这里
 home.get('/index', (req, res) => {
     res.send('欢迎来到博客首页页面')
 })
    
 // 端口监听
 app.listen(3000);

构建模块化路由

app.js

 // app.js 
 // 引入express框架
 const express = require('express');
 // 创建网站服务器
 const app = express();
 //模块路由导入
 const home = require('./route/home');
 const admin = require('./route/admin');
        
 //为路由对象匹配请求路径
 app.use('/home', home);
 app.use('/admin', admin);
 // 端口监听
 app.listen(3000);

home.js

 // home.js
 // 引入express框架
 const express = require('express');
 const home = express.Router();
 home.get('/index', () => {
     res.send('欢迎来到博客展示页面');
 });
 module.exports = home;

admin.js

 // admin.js
 // 引入express框架
 const express = require('express');
 const admin = express.Router();
 admin.get('/index', () => {
     res.send('欢迎来到博客管理页面');
 });
 module.exports = admin;

GET/POST参数的获取

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

 // 接收地址栏中问号后面的参数 
 // 例如: http://localhost:3000/?name=zhangsan&age=30
 app.get('/', (req, res) => {
     console.log(req.query); // {"name": "zhangsan", "age": "30"} 
 });

Express中接收表单类型（form）(不带上传文件的表单)的post请求参数需要借助第三方包 body-parser。

 //下载安装body-parser：npm install body-parser
 // 引入express框架
 const express = require('express');
 // 引入body-parser模块
 const bodyParser = require('body-parser');
 // 创建网站服务器
 const app = express();
 // 配置body-parser模块
 // 拦截所有请求
 // extended: false 方法内部使用querystring模块处理请求参数的格式
 // extended: true 方法内部使用第三方模块qs处理请求参数的格式
 app.use(bodyParser.urlencoded({ extended: false }));
 // 接收请求
 app.post('/add', (req, res) => {
     // 接收请求参数
     console.log(req.body);
     res.send(req.body)
 })
 // 端口监听
 app.listen(3000);

Express中接收表单类型（form）(带上传文件的表单)的post请求参数需要借助第三方包 formidable。

如果表单中有文件上传，那么表单中的数据必须使用二进制上传

而且表单的form标签要设置编码类型enctype为：multipart/form-data

 <!-- 
 enctype: 指定表单数据的编码类型
 默认； application/x-www-form-urlencoded
 name=zhagnh&age=10
 multipart/form-data: 将表单数据以二进制方式传输，当表单中上传文件时必须用二进制传输
  -->
 <form class="form-container" action="/admin/article-add" method="post" enctype="multipart/form-data">
 ...
 </form>

formidable作用：解析表单，支持get请求参数，post请求参数、文件上传。

 // 引入formidable模块
 const formidable = require('formidable'); 
 // 创建表单解析对象
 const form = new formidable.IncomingForm(); 
 // 设置文件上传路径(文件要上传到服务器的那个目录下)
 form.uploadDir = "/my/dir"; 
 // 是否保留表单上传文件的扩展名（默认客户端上传到服务器的后缀名是不保留的，false）
 form.keepExtensions = false; 
 // 对表单进行解析
 form.parse(req, (err, fields, files) => { 
     // err解析失败的错误信息
     // fields 存储普通请求参数
     // files 存储上传的文件信息
 });

代码举例:

 //下载安装formidable：npm install formidable
 // 引入express框架
 const express = require('express');
 // 引入第三方formidable
 const formidable = require('formidable');
 const path = require('path');
 // 创建网站服务器
 const app = express();
 // 接收请求
 app.post('/article-add', (req, res) => {
     // 创建表单解析对象
     const form = new formidable.IncomingForm(); 
     // 设置文件上传路径(文件要上传到服务器的那个目录下)
     form.uploadDir = path.join(__dirname,'../','../','public','uploads'); 
     // 保留客户端传递过来的扩展名
     form.keepExtensions = true; 
     // 对表单进行解析
     form.parse(req, (err, fields, files) => { 
         // err解析失败的错误信息
         // fields 存储普通请求参数
         // files 存储上传的文件信息
         res.send(files)
     });
 })
 // 端口监听
 app.listen(3000);

Express路由参数

让请求地址看起来美观
让路由代码更加易于阅读
开发者一眼就能够看出来请求当前路由需要传递那些参数

操作：在请求路径后面用:要传的参数，相当于一个占位符

 //:id：路由参数
 app.get('/find/:id', (req, res) => {
     //参数接收
     console.log(req.params); // {id: 123}
 });
    
 //客户端请求地址，不需要再 ?id=123了
 localhost:3000/find/123

代码举例：

 // 引入express框架
 const express = require('express');
 const bodyParser = require('body-parser');
 // 创建网站服务器
 const app = express();
    
 //该路由要传递三个参数
 app.get('/index/:id/:name/:age', (req, res) => {
     // 接收post请求参数
     res.send(req.params)
 })
 // 端口监听
 app.listen(3000);
    
 //客户端请求：
 //localhost:3000/find/123/张三/20
 //不需要： localhost:3000/find?id=123&name=张三&age=20

静态资源的处理

通过Express内置的express.static可以方便地托管静态文件，例如img、CSS、JavaScript 文件等。
1. 该方法的参数为静态资源存放的目录
```
 app.use(express.static('public'));
```
  1. app.use中间件拦截所有的请求
  2. 将请求交给express.static()这个方法来处理，并且将静态资源的目录告诉这个方法
  3. static()方法内部会判断客户端发来的请求，是否是静态资源请求，如果是，方法内部直接将静态资源响应给客户端，终止请求
  4. 如果不是，则调用next();传递给下一个中间件

代码举例：

 const express = require('express');
 const path = require('path');
 const app = express();
    
 // 实现静态资源访问功能，访问public文件夹下的所有静态资源
 app.use(express.static(path.join(__dirname, 'public')))
 //  /static 为虚拟路径，可以指定一个虚拟路径
 //app.use('/static',express.static(path.join(__dirname, 'public')))
    
 // 端口监听
 app.listen(3000);

现在，public 目录下面的文件就可以访问了。

 http://localhost:3000/images/kitten.jpg 
 http://localhost:3000/css/style.css 
 http://localhost:3000/js/app.js 
 http://localhost:3000/images/bg.png 
 http://localhost:3000/hello.html

注意如果添加了虚拟路径，比如/static,那访问路径就是：http://localhost:3000/static/css/style.css

深入理解：

项目目录

 project
     index.html
     css
     js
     public
         images
         css
         js
                

如果index.html里面引用了css，则只需要

 <link rel="stylesheet" href="./css/style.css">

express-art-template模板引擎

模板引擎

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

使用npm install art-template express-art-template命令进行安装。

 //告诉express你使用的模板引擎是什么，后缀是什么
 // 当渲染后缀为art的模板时 使用express-art-template 
 app.engine('art', require('express-art-template')); 
 // 设置模板存放目录：set的第一个参数是固定的views，就是模板，第二个是模板路径
 app.set('views', path.join(__dirname, 'views')); 
 // 渲染模板时不写后缀 默认拼接art后缀 
 app.set('view engine', 'art');
 app.get('/', (req, res) => {
     // 渲染模板 
     //只需要传递模板名称，内部会自动拼接模板路径、后缀名
     res.render('index');
 });

注意：
1. app.set()的第一个参数是固定的值
  1. views:代表模板
  2. view engine代表设置模板默认后缀
2. res.render(参数1,参数2)：
  1. 参数1：模板名称，只需要传递模板名称，内部会自动拼接模板路径、后缀名
  2. 参数2：对象，向模板中传递的数据

代码举例：

 const express = require('express');
 const path = require('path');
 const app = express();
    
 // 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件
 //  1.模板后缀
 //  2.使用的模板疫情
 app.engine('art', require('express-art-template'))
 // 2.告诉express框架模板存放的位置是什么
 app.set('views', path.join(__dirname, 'views'))
 // 3.告诉express框架模板的默认后缀是什么
 app.set('view engine', 'art');
    
 app.get('/index', (req, res) => {
     // 1. 拼接模板路径
     // 2. 拼接模板后缀
     // 3. 哪一个模板和哪一个数据进行拼接
     // 4. 将拼接结果响应给了客户端
     res.render('index', {
         msg: 'message'
     })
 });
    
 app.get('/list', (req, res) => {
     res.render('list', {
         msg: 'list page'
     })
 })
 // 端口监听
 app.listen(3000);

注意：views文件夹中.art模板文件引用的静态资源路径必须是绝对路径！！！
```
 //绝对路径: `href="/admin/lib/bootstrap/css/bootstrap.min.css"`
 //相对路径: `href="lib/bootstrap/css/bootstrap.min.css"`
    
 //login.art模板
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>用户登录</title>
     <link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/admin/css/base.css">
 </head>
 <body>
     ......
     <script src="/admin/lib/jquery/dist/jquery.min.js"></script>
     <script src="/admin/lib/bootstrap/js/bootstrap.min.js"></script>
 </body>
 </html>
```
1. 原因分析：
  1. 用户通过浏览器地址入口输入地址，请求服务:http://localhost/abc/login
  2. 后台服务根据请求路由返回填充数据后的模板:login.art
  3. 如果模板中引用的静态资源（css、js文件）使用的是相对路径，那么此时静态文件的请求地址就是：当前模板的路径+静态文件引用的相对路径 (http://localhost/abc/lib/bootstrap/css/bootstrap.min.css)
  4. 如果模板中引用的静态资源是绝对路径，那么此时静态文件的请求地址就是：当前模板的根路径+静态文件引用的相对路径 (http://localhost/lib/bootstrap/css/bootstrap.min.css)
  5. <link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">的本质就是向服务请求:http://localhost/地址下（就是项目的根目录），admin/...文件夹下的bootstrap.min.css文件
  6. 也就是说项目的public文件夹内部文件夹必须有这样的结构以及相应的文件
  7. 如果使用的是相对路径，由于静态资源放在public文件夹下，模板放在了views文件夹下，那就必须要保证public的文件夹目录，跟views的文件夹目录一样，才能成功

app.locals 对象

什么是locals 对象
1. 在模板渲染数据时，在不同的页面中有一片共同的区域，这个片共同区域要展示的数据都是一样的，在代码当中如何查询这片公共数据呢？
2. 最直接的做法就是在不同的页面路由都去查询这个相同的数据，然后通过res.render渲将数据填充到模板当中
3. 那么这么做就会产生非常多的冗余代码
4. 有没有一种办法，让查询公共区域的数据代码只写一次，然后在所有需要用到的模板中都可以直接拿到这个数据？—app.locals对象
5. 将公共数据作为locals对象下面的属性，locals对象在所有模板下都可以直接获取到
  1. 属性名称自己定义
6. 将变量设置到app.locals对象下面，这个数据在所有的模板中都可以获取到。
```
 app.locals.users = [{ 
     name: '张三', 
     age: 20 
 },{ 
     name: '李四', 
     age: 20 
 }]
```

代码举例：

app.js

 const express = require('express');
 const path = require('path');
 const app = express();
 // 模板配置
 app.engine('art', require('express-art-template'))
 app.set('views', path.join(__dirname, 'views'))
 app.set('view engine', 'art');
        
 app.locals.users = [{
     name: 'zhangsan',
     age: 20
 },{
     name: '李四',
     age: 30
 }]
        
 app.get('/index', (req, res) => {
     res.render('index', {
         msg: '首页'
     })
 });
        
 app.get('/list', (req, res) => {
     res.render('list', {
         msg: '列表页'
     });
 })
 // 端口监听
 app.listen(3000);

模板中使用app.locals对象的属性数据

 //list.art
 {*msg}}
 <ul>
     {*each users}}
     <li>
         {*$value.name}}
         {*$value.age}}
     </li>
     {*/each}}
 </ul>
 // index.art同样