前后端交互之Express请求处理知识点

---

Express框架基础

Express框架是什么

Express是基于Node平台的web应用开发框架，创建各种Web应用。
使用npm install express 下载

Express框架特性

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

const express = require('express');

以上的express 是方法
send()代码好处

• 检测响应内容类型
• 自动设置http状态码
• 自动设置响应内容类型及编码

res.send()可以向客户端直接响应一个对象
代码示例

app.get('/list', (req, res) => {
     
    res.send({
      name: '张三', age: 18 });
});

页面显示结果

中间件

什么是中间件

中间件就是一堆方法，可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理；
由中间方法以及请求 处理组成；
默认情况下，中间件是从上到下一次进行匹配，一旦匹配成功就终止匹配；使用next来解决这个问题,增加next参数使得继续向下匹配；

next使用代码

app.get('/request', (req, res, next) => {
     
    req.name = '张三';
    next();
});
app.get('/request', (req, res) => {
     
    res.send(req.name);
})

显示结果

app.use中间件用法

app.use匹配所有请求方式，部分get post

中间件应用

1. 路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面；
   需要登录才能访问页面代码简单示例

app.use('/admin', (req, res, next) => {
     
    let isLogin = false;
    if (isLogin) {
     
        next();
    } else {
     
        res.send('您还没有登录不能访问/admin页面');
    }
})

app.get('/admin', (req, res) => {
     
    res.send('您已经登录，可以访问页面');
})

2. 网站维护公共，在左右路由的最上面定义接收所有请求的中间件，直接未客户端做出响应，网站正在维护中；
   代码示例

app.use((req, res, next) => {
     
    res.send('网站正在维护');
})

3. 自定义404页面

把下面的代码写在最后面

app.use((req, res, next) => {
     
    res.status(404).send('当前访问的页面不存在');
})

错误处理中间件

错误处理中间件是一个集中处理错误的地方；但是只能处理同步代码的错误；所以对于异步API需要手动执行错误处理中间件
同步代码示例

//错误处理中间件
app.use((err, req, res, next) => {
     
    res.status(500).send(err.message);
});

异步API处理示例

app.get('/index', (req, res, next) => {
     
    // throw new Error('程序发生会给你未知错误');
    fs.readFile('./demo.txt', 'utf8', (err, result) => {
     
        if (err != null) {
     
            next(err); //触发错误处理中间件
        } else {
     
            res.send(result);
        }
    });
})

捕获错误

在node.js中，异步API的错误信息都是通过回调函数获取的,支持Promise对象的异步API发生错误可以通过catch方法捕获。异步函数执行如果发生错误要如何捕获错误呢？？
使用try catch可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但其他类型的比如对象，的错误；

app.get('/index', async(req, res, next) => {
     
    try {
     
        await readFile('./aaa.js');
    } catch (ex) {
     
        next(ex); //手动触发错误处理中间件
    }
});

Express请求处理

构建模块化路由

将不同类别的路由放在不同的文件中方便管理

const express = require('express');
const app = express();

const home = express.Router();
//为路由对象匹配请求路径
app.use('/home', home);
home.get('/index', (req, res) => {
     
    res.send('欢迎来到我的博客首页');
})

app.listen(3000);

模块化路由示例

const express = require('express');
const home = express.Router();

home.get('/index', (req, res) => {
     
    res.send('欢迎来到博客首页页面');
});

module.exports = home;

模块化路由示例

const express = require('express');
const app = express();

const home = require('./router/home');
const admin = require('./router/admin');

app.use('/home', home);
app.use('/admin', admin);

app.listen(3000);

53

GET 参数的获取

Express框架中使用req.query可获取GET参数，框架内部会将GET参数转换为对象并返回
接收地址栏？后面的参数
代码示例

    app.get('/index', (req, res) => {
     
    res.send(req.query);
});

在浏览器中执行结果

Post请求参数获取

Express中接收post请求参数需要借助第三方包body-parser。
首先是下载第三方模块npm install body-parser
extended：false表示系统内部使用queryString处理请求参数;
extendec:true 表示使用第三方模块qs处理请求参数格式
获取post请求参数代码示例

//拦截所有的请求  extended：false表示系统内部使用queryString处理请求参数
// extendec:true 表示使用第三方模块qs处理请求参数格式
app.use(bodyParser.urlencoded({
      extended: false }));
app.post('/add', (req, res) => {
     
    res.send(req.body);
});

表单提交页面

<form action="http://localhost:3000/add" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" name="">
    </form>

执行结果

app.use方法需要传递请求处理函数
bodyParser.urlencoded返回值为函数，作为了app.use的请求参数；

Express路由参数

定义路由的时候指定需要接收的请求参数

代码示例

结果

静态资源处理

通过Express 内置的express.static可以方便地托管静态文件，例如img,css,JavsScript...
代码示例

const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')))
app.listen(3000);

以上代码在浏览器中打开，可以直接通过localhost:3000/default.html访问，即可以直接通过文件路径访问文件
如：

Express中使用模板引擎

在原有的 art-template模板引擎中增加了express-art-template



res下面的render方法做了很多事情有:

• 拼接模板路径
• 拼接模板后缀
• 哪一个模板和哪一个数据进行拼接
• 将拼接结果响应给客户端
  使用的核心代码,其中res.render里面的index.art .art后缀可以省略，因为我们已经设置了默认后缀

app.engine('art', require('express-art-template'));
app.set('views', path.join(__dirname, 'views'));
app.set('views engine', 'art');

app.get('/index', (req, res) => {
     
    res.render('index.art', {
     
        msg: 'message'
    })
});
app.get('/list', (req, res) => {
     
    res.render('list.art', {
     
        msg: 'list page'
    })
})

app.locals对象

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

---