Express 框架的使用（详细）

Express 框架1.1 Express框架是什么Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。下载npm install express1.2 Express 框架特性提供了简洁的路由定义方式对获取 http 请求参数进行了简化处理对模板引擎支持程度高，方便渲染动态HTML页面拥有中间件机制有效控制HTTP 请求拥有大量第三方

1oneLee

38127人浏览 · 2020-10-26 21:07:32

1oneLee · 2020-10-26 21:07:32 发布

文章目录

Express 框架

Express 框架

1.1 Express框架是什么

Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。

下载

npm install express

1.2 Express 框架特性

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

1.3 原生 node.js 与 Express 框架对比

在这里插入图片描述

1.4 基本使用（入门代码）

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

app.get('/', (req, res) => {
    // send()
    // 1. send 方法内部会检测响应内容的类型
    // 2. send 方法会自动设置 http 状态码
    // 3. send 方法还会帮我们自动设置响应的内容类型以及编码
    res.send('Hello Express');
})

app.get('/list', (req, res)=> {
    // 向客户端直接响应一个对象 
    res.send({name: 'zhangsan', age: 20});
})

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

在这里插入图片描述

2. 中间件

2.1 什么是中间件

在这里插入图片描述

2.2 中间件的基本使用

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

app.get('/request', (req, res, next) => {
    req.name = 'zhangsan';
    next(); // 向下执行
})

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

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

2.3 app.use 中间件用法

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

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

// 接收所有的请求的中间件
app.use((req, res, next) => {
    console.log('请求走了 app.use 中间件');
})

// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {
    console.log('请求走了 app.use /request 中间件 ');
})

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

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

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

在这里插入图片描述
可以发现网页在转圈

控制台输出结果见上图，说明后面的中间件没有走。

修改程序，在程序中加入 next（）

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

// 接收所有的请求的中间件
app.use((req, res, next) => {
    console.log('请求走了 app.use 中间件');
    next();
})

// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {
    console.log('请求走了 app.use /request 中间件 ');
    next();
})

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

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

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

在这里插入图片描述

再加入 /list 路由

// 引入 express 框架
const express = require('express');

// 创建网站服务器
const app = express();

// 接收所有的请求的中间件
app.use((req, res, next) => {
    console.log('请求走了 app.use 中间件');
    next();
})

// 当客户端访问 /request 请求的时候走当前中间件
app.use('/request', (req, res, next) => {
    console.log('请求走了 app.use /request 中间件 ');
    next();
})

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

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

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

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

在这里插入图片描述

2.4 中间件应用

路由保护：
客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

app.use('/admin', (req, res, next) => {
    // 用户没有登录
    let isLogin = false;
    // 如果用户登录
    if (isLogin) {
        // 让请求继续向下执行
        next();
    } else {
        // 如果用户没有登录，直接对客户端作出响应
        res.send('您还没有登录，无法访问当前页面');
    }
})


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

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

在这里插入图片描述
如果将 let isLogin = false 改为：

let isLogin = true;

在这里插入图片描述

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

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

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

app.use('/admin', (req, res, next) => {
    // 用户没有登录
    let isLogin = true;
    // 如果用户登录
    if (isLogin) {
        // 让请求继续向下执行
        next();
    } else {
        // 如果用户没有登录，直接对客户端作出响应
        res.send('您还没有登录，无法访问当前页面');
    }
})


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

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

在这里插入图片描述

自定义404页面

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

app.use('/admin', (req, res, next) => {
    // 用户没有登录
    let isLogin = true;
    // 如果用户登录
    if (isLogin) {
        // 让请求继续向下执行
        next();
    } else {
        // 如果用户没有登录，直接对客户端作出响应
        res.send('您还没有登录，无法访问当前页面');
    }
})


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


app.use((req, res, next) => {
    // 为客户端响应404状态码以及提示信息
    res.status(404).send('当前访问的页面是不存在的');
})
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

在这里插入图片描述

2.5 错误处理中间件

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如读取文件失败，数据库连接失败。

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

例如显示服务器错误：

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

基本实例

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

app.get('/index', (req, res) => {
    // 创建一个错误实例并抛出
    throw new Error('程序发生了未知错误');
})

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

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

在这里插入图片描述
当程序出现错误时，调用 next（）方法，并且将错误信息通过参数的形式传递给 next（）方法，即可触发错误处理中间件。

基本实例

// 引入 express 框架
const express = require('express')

// 引入文件模块
const fs = require('fs');

// 创建网站服务器
const app = express();

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);
        }
    })
    // res.send('程序正常')
})

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

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

demo.txt 的文件时不存在的，读取失败后会将错误对象通过 next （）方法传递给错误处理中间件，显示相应的错误信息。

在这里插入图片描述

2.6 捕获错误

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

try catch 可以捕获异步函数以及其他同步代码执行过程中发生的错误，但是不能捕获其他类型的错误（回调函数的错误、Promise对象的错误）。
在这里插入图片描述

基本实例

// 引入 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('网站服务器启动成功');

在这里插入图片描述

3. express 请求处理

3.1 构建模块化路由

在这里插入图片描述

构建模块化路由的基础语法

// 引入 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);
console.log('服务器开启成功');

在这里插入图片描述

如何构建模块化路由
基础案例

在入口文件 app.js 文件的同级目录新建 route 文件夹
在 route 文件夹下新建 home.js 文件以及 admin.js 文件

home.js：

const express = require('express');

const home = express.Router();

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

// 导出 home 这个路由对象
module.exports = home;

admin.js：

const express = require('express');

const admin = express.Router();

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

// 导出 admin 这个路由对象
module.exports = admin;

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);
console.log('服务器开启成功');

在这里插入图片描述

在 route 文件夹中构建不同的路由模块，放在不同的文件中
通过module.exports 将不同路由模块的路由对象导出
在 app.js 文件中通过 require 将不同路由模块的路由对象导入，同时对导入的路由进行路由匹配

3.2 GET参数的获取

Express 框架中使用 req.query 即可 获取GET参数 ，框架内部会将GET参数转换为对象并返回。
在这里插入图片描述

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

app.get('/index', (req, res) => {
    // req.query 获取请求参数
    res.send(req.query)
})

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

在浏览器的地址栏中输入：

 http://localhost:3000/index

浏览器页面显示的是一个空对象，这是因为我们没有给GET请求地址传参数.
在这里插入图片描述
在浏览器的地址栏中输入：

 http://localhost:3000/index?name=zhangbing&age=20&gender=男

可以看到请求参数为对象：
在这里插入图片描述

3.3 POST参数的请求

Express 中接收 POST请求参数 需要借助第三方包 body-parser
在这里插入图片描述
app.js：


// 引入 express 框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
// 拦截所有请求
// extended: false  方法内部使用 querystring 模块处理请求参数的格式
// extended: true   方法内部使用第三方模块 qs 来处理请求参数的格式
app.use(bodyParser.urlencoded({extended: false}));

app.post('/add', (req, res) => {
    res.send(req.body);
})

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

post.html 表单数据通过post方法提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/add" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>
</html>

打开 post.html 文件，在表单中输入数据：
在这里插入图片描述
点击表单中的提交按钮，可以看到页面跳转到了 http://localhost:3000/add 页面，同时以对象的形式显示了提交的数据：

3.4 app.use（）方法的进一步理解

在上面获取post请求参数的方法中，我们使用了以下的代码：

app.use(bodyParser.urlencoded({extended: false}));

这行代码应该如何理解呢？且看我细细到来！

app.use（）调用外部定义的函数的小例子

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

// 拦截所有的请求
app.use(fn ());

function fn () {
    return function (req, res, next) {
        console.log(req.method);
        next();
    }
}

app.get('/', (req, res) => {
    // 接收 post 请求参数
    res.send('ok');
})

app.post('/add', (req, res) => {
    res.send(req.body);
})

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

在这里插入图片描述

可以看到返回的函数被调用了，这些做有什么好处呢？
好处就是我们可以在调用 fn 函数的同时，向 fn 内部传递一些额外的参数，在请求处理函数内部可以根据这个参数改变请求处理函数的行为。可以看一下下面的例子：

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

app.use(fn ({a: 1}));

function fn (obj) {
    return function (req, res, next) {
        if (obj.a == 1) {
            console.log(req.url);
        } else {
            console.log(req.method);
        }
        next();
    }
}

app.get('/', (req, res) => {
    // 接收 post 请求参数
    res.send('ok');
})

app.post('/add', (req, res) => {
    res.send(req.body);
})


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

fn 的形参为一个对象，我们给 fn 函数传递了一个实参 {a: 1}，可以看到：

在这里插入图片描述

很显然，控制台打印出了请求地址中的 ‘/’
现在如果将fn 的实参修改为 {a: 2}
则请求处理函数的行为也发生了改变

此时控制台打印的结果不是‘/’，而是请求的方式 GET。

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

ViewDesign

所有评论(0)

查看更多评论

1oneLee

@qq_27575925

已为社区贡献1条内容