我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

【Express框架】_在vscode上1、自定义中间件处理登陆检测功能 2、配置express-session会话,实现会

作者：我家小花儿 | 2024-02-09 11:35:10

踩

在vscode上1、自定义中间件处理登陆检测功能 2、配置express-session会话,实现会

一、初识Express

Node框架：半成品,开发人员按照框架的规范(要求)进行不同配置就可以实现不同的需求。
Node的常用框架：Express、Koa、egg。

1、Express的基础知识

封装了http模块,并对http进行了扩展。简化了基于NodeJS的Web服务器端的开发。可以方便的获取请求参数和进行路由处理。

优势：

（1）简洁的路由定义方式。

（2）简化HTTP请求参数的处理。

（3）提供中间件机制控制HTTP请求。

（4）拥有大量第三方中间件。

（5）支持多种模版引擎。

2、在vscode中安装Express（法一）

打开vs-code终端：

使用npm包管理工具安装Express。
创建根目录，并在该目录下新建server目录作为项目的根目录。
server目录下执行如下命令。

(1)项目初始化：npm init -y --生成package.json（配置）文件

在这里插入图片描述

(2)安装express模块：npm install express --save

在这里插入图片描述

(3)安装完成后，在当前目录下打开命令行工具执行"npm list express"命令,查看Express版本。

在这里插入图片描述

3、使用Express搭建Web服务器

利用Express搭建Web服务器的基本步骤:

(1)引入express模块；
(2)调用express()方法创建服务器对象app；
(3)调用get()方法定义GET路由；
(4)调用listen()方法监听端口

//1、引入express模块
const express = require('express')
//2、创建Web服务器对象
const app = express();
//3、创建get路由：接收客户端的get请求,如果是post请求,则用post（）方法
app.get('/',(req,res)=>{
    res.end('Hello Express!')
})
app.get('/list',(req,res)=>{
    res.end('Hello ListPage!')
})
//4、启动监听
app.listen(3000)
 
console.log("服务器运行在3000端口上")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

二、Express框架的功能

1、设立中间件响应http请求

2、执行基于HTTP方法和URL不同动作的路由

3、允许动态渲染基于参数传递给模板HTML页面

三、在vs-code安装Express(法二），创建Express项目

打开cmd窗口：

1、安装Express

安装Express框架全局使用NPM,以便它可以被用来使用Node终端创建Web应用程序。

npm install -g express-generator

在这里插入图片描述

2、查看Express版本号

express --version

在这里插入图片描述

3、创建项目

打开vs-code终端：

(1)创建一个目录

(2)进入该目录执行指令：express 项目名

例如：express system

在这里插入图片描述

(3)进入项目所在目录,执行指令：npm install ( 安装相关依赖模块)

例如： cd system
system> npm install

在这里插入图片描述

(4)启动项目：npm start ( 项目默认的端口号是3000)
在这里插入图片描述请添加图片描述

(5)启动浏览器访问：http://localhost:3000

在这里插入图片描述

4、修改项目监听的端口号：/bin/www

请添加图片描述

5、安装nodemon模块

安装nodemon模块，实时跟踪源程序的变化。安装完成后打开package.json文件,做如下修改。（动态监听.js文件，改变端口号，要刷新才可以被监听到）

“scripts”: {
“start”: “nodemon ./bin/www”
}

在这里插入图片描述

6、Express项目的目录结构

(1)bin：启动配置文件，在www里修改运行端口号

(2)node_modules：存放所有的项目依赖库

(3)public：用于存放静态资源文件图片，CSS，JAVASCRIPT文件

(4)routers：路由文件夹。存放的是路由文件

(5)views：存放页面的地方

(6)package.json：项目的配置信息文件(项目依赖配置及开发者信息)。

(7)app.js：应用核心配置文件，项目入口

在这里插入图片描述

四、Express中间件

1、Express中间件介绍

Express中间件：中间件(Middleware)是指业务流程的中间处理环节.可以把中间件理解为处理客户端请求的一系列方法。

Express通过中间件接收客户端发来的请求，并对请求做出响应，也可以将请求交给下一个中间件继续处理。

中间件（Middleware）是指业务流程的中间处理环节。可以把中间件理解为处理客户端请求的一系列方法。如果把请求比作水流，那么中间件就是阀门，阀门可以控制水流是否继续向下流动，也可以在当前阀门处对水流进行排污处理，处理完成后再继续向下流动。
在这里插入图片描述

2、中间件的功能

中间件机制可以实现哪些应用？

路由保护：当客户端访问登录页面时，可以先使用中间件判断用户的登录状态，如果用户未登录，则拦截请求，直接响应提示信息，并禁止用户跳转到登录页面。

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

自定义404页面：在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，并提示404页面错误信息。

3、中间件的组成

中间件主要由中间件方法和请求处理函数这两个部分构成。

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

中间件方法	作用
get()	响应用户的get请求
post()	响应用户的post请求
put()	响应用户的put请求.通常用于修改数据
delete()	响应用户的delete请求.通常用于删除数据
use()	处理所有的请求
static()	响应用户对静态资源的访问

（2）请求处理函数：由开发人员编写，负责处理请求。

get(‘请求路径’,请求处理函数)

例如：

get(‘/’,(req,res,next)=>{
处理代码
next()
})

4、中间件方法

常用的中间件方法有app.get()、app.post()、app.use()，其基本语法形式如下：

app.get(‘请求路径’, ‘请求处理函数’); // 接收并处理GET 请求

app.post(‘请求路径’, ‘请求处理函数’); // 接收并处理POST 请求

app.use(‘请求路径’, ‘请求处理函数’); // 接收并处理所有请求

（1）当客户端向服务器端发送GET请求时，app.get()中间件方法会拦截GET请求，并通过app.get()中间件中的请求处理函数对GET请求进行处理。

同一个请求路径可以设置多个中间件，表示对同一个路径的请求进行多次处理，默认情况下Express会从上到下依次匹配中间件。

const express = require('express');
const app = express();
// 定义中间件
app.get('/request', (req, res, next) => {
    req.name = '张三';
    next();    //启动下一个中间件
});
app.get('/request', (req, res) => {
    res.send(req.name);
});
app.listen(3000);
console.log('服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

（2）当浏览器向服务器发送POST请求时，app.post()定义的中间件会接收并处理POST请求。
下面通过案例演示如何使用app.post()中间件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post中间件</title>
</head>
<body>
    <from action="http://localhost:3000/post" method="post">
        <button type="submit">发送post请求</button>
    </from>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

const express = require('express');
const app = express();
// 定义中间件
app.post('/post', (req, res, next) => {
    req.name = '李四';
    next();
});
app.post('/post', (req, res) => {
    res.send(req.name);
});
app.listen(3000);
console.log('服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述
（3）通过app.use()定义的中间件既可以处理GET请求又可以处理POST请求。在多个app.use()设置了相同请求路径的情况下，服务器都会接收请求并进行处理。

5、利用中间件处理静态资源

使用static() 中间件，在客户端访问服务器的静态资源时使用。

express.static()：是express内置的中间件，参数是静态资源所在的目录,要作为app.use的参数。

常用的静态资源有图片、CSS、JavaScript和HTML文件等。

express.static()需要作为app.use()的参数使用

下面通过案例演示express.static()中间件如何实现静态资源访问。

const express = require('express');
const app = express();
// 静态资源处理
app.use(express.static('public'));
app.listen(3000);
console.log('服务器启动成功');
1
2
3
4
5
6

在这里插入图片描述
在public 目录下创建index.html文件，用于实现通过浏览器访问静态资源index.html文件，具体代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>首页</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

6、利用中间件处理错误

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败、数据库连接失败等。这时候就需要用到错误处理中间件了，用它来集中处理错误。

编写如下代码，实现在app.get()中间件中进行文件读取操作，并在读取发生错误时，返回文件读取失败的错误信息。

const express = require('express');
const fs = require('fs')
 
const app = express();
app.get('/readfile',(req,res,next)=>{
    fs.readFile('./a.txt','utf8',(err,result)=>{
        if(err != null){    //若读文件错误，则调用下一个中间件
            next(err);
        }else {
            res.send(result)
        }
    })
})
app.use((err,req,res,next)=>{
    res.status(500).send(err.message)
})
 
app.listen(3000)
console.log("服务器运行在3000端口上")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

五、Webstorm中的Express的模块化路由管理

通过前面讲解的内容，已可以使用app.get()方法和app.post()方法来实现简单的路由功能，但没有对路由进行模块化管理。在实际的项目开发中，不推荐将不同功能的路由都混在一起存放在一个文件中，因为随着路由的种类越来越多，管理起来会非常麻烦。为了方便路由的管理，通过express.Router()实现模块化路由管理。

express.Router()方法用于创建路由对象route，然后使用route.get()和 route.post()来注册当前模块路由对象下的二级路由，这就是一个简单的模块化路由。

1、使用方法：

(1)创建路由文件：扩展名为.js的文件(index.js)

(2)在路由文件中引入express模块

var express = require(‘express’);

(3)使用express模块创建路由器对象

var router = express.Router();

(4)定义中间件响应用户的请求

router.get()或router.post()

(5)导出路由器对象

module.exports = router;

(6)在项目的核心文件app.js中引入路由文件

var studentRouter =require(‘./routes/student’);

(7)指定路由文件的请求路径

app.use(‘/students’,studentRouter);

student.js：

//1、引入express模块
var express =require('express');

//2、创建路由器对象
var router = express.Router();

//3、定义中间件：用来响应用户请求
//http://localhost:3000/students/info
router.get('/info',(req, res, next) => {
    res.send('你好，我是Student路由器')
})
//http://localhost:3000/students/
router.get('/',(req, res, next) => {
    res.send('你好，我是Student的根')
})
//http://localhost:3000/students//postdemo
router.post('/postdemo',(req, res) => {
    res.send('你好，这是post的请求')
})
//4、导出路由对象
module.exports =router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

强调：自定义路由文件的请求路径的拼接过程
http://localhost:3000/students/info

app.js

var studentRouter =require('./routes/student');
//配置自定义路由文件的请求路径
app.use('/students',studentRouter);
1
2
3

在这里插入图片描述
前后端分离思想，在vs-code写了post.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/students/postdemo" method="post">
        <button type="submit">提交post请求</button>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/71718