4.Express框架基础和express-art-template模板引擎

• Express框架是什么
  Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。
• Express框架特性
  • 提供了方便简洁的路由定义方式
  • 对获取HTTP请求参数进行了简化处理
  • 对模板引擎支持程度高，方便渲染动态HTML页面
  • 提供了中间件机制有效控制HTTP请求
  • 拥有大量第三方中间件对功能进行扩展
  • https://www.expressjs.com.cn

(一) 基础使用

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

//处理客户端请求
app.get('/', (req, res) => {
    
    // send()取代end()
    // 1.send方法内部会检测响应内容的类型
    // 2.send方法会自动设置http状态码
    // 3.send方法会自动设置响应内容类型及编码
    res.send('hello express');
})

//监听端口
app.listen(3000);
console.log('网站服务器启动成功');

(二) 中间件

什么是中间件：

• 中间件就是一堆方法，可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。
• 中间件主要由两部分构成，中间件方法以及请求处理函数。
• 中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求。
• 可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。
• 默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配。
• 可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。

[1]. app.use 中间件

• 没有请求地址参数，app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。
• app.use 第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求。

  app.use([path,] (req, res[, next])){
  	....
  }
  

[2]. 错误处理中间件

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

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

app.use((err, req, res, next) => {
     res.status(500).send('服务器发生未知错误');
 })

[3]. 捕获错误

在node.js中，异步API的错误信息都是通过回调函数获取的，支持Promise对象的异步API发生错误可以通过catch方法捕获。
https://www.expressjs.com.cn/guide/error-handling.html

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

(三) 请求处理

[1]. 路由模块化

// app.js
const home = require('./route/home.js');
const admin = require('./route/admin.js');
//将路由和路径进行匹配
app.use('/home', home);
app.use('/admin', admin);

// home.js
const express = require('express');
const home = express.Router(); 
//用户请求/home/index页面时进入
home.get('/index', (req, res) => {
    res.send('欢迎来到博客展示页面');
});
module.exports = home;

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

[2]. get参数的获取

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

app.get('/', (req, res) => {
    console.log(req.query); // {"name": "zhangsan", "age": "30"}
 });

[3]. post参数的获取

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

 // 引入body-parser模块
 const bodyParser = require('body-parser');
 // 配置body-parser模块
 //extended: false表示使用系统模块的queryString来处理请求参数的格式
 //extended: true表示使用第三方模块qs来处理
 app.use(bodyParser.urlencoded({ extended: false }));
 // 接收请求
 app.post('/add', (req, res) => {
    // 接收请求参数
    console.log(req.body);
 }) 

[3]. express路由参数

请求路径：

localhost:3000/find/123

服务器处理：

//如果没有参数，则匹配不到
app.get('/find/:id', (req, res) => { 
    console.log(req.params); // {id: 123} 
});

[4]. 静态资源处理

通过Express内置的express.static可以方便地托管静态文件，例如img、CSS、JavaScript 文件等。
设置静态资源路径后，在html页面中请求页面的页面是 app.use(express.static(‘public’));中的路径拼接上html页面中静态资源的路径。

//static参数是静态资源所在的位置，建议使用绝对路径
 app.use(express.static('public'));

(四) express-art-template模板引擎

[1].模板引擎

• 为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。
• 使用npm install art-template express-art-template命令进行安装。
• https://aui.github.io/art-template/zh-cn/express/index.html#Install

  // 当渲染后缀为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'，{
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
 }); 

[2] app.locals

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

// req.app.locals.userInfo = userData;
 app.locals.users = [{
     name: '张三',
     age: 20
 },{
     name: '李四',
     age: 20
}]

[3] 模板变量

http://aui.github.io/art-template/zh-cn/docs/imports.html
app.js中

//导入dateformat日期处理模块
const dateFormat = require('dateformat');
//向模板内部导入dateFormate变量
template.defaults.imports.dateFormat = dateFormat;

index.art中

<span>{{dateFormat($value.createDate, 'yyyy-mm-dd')}}span>