Express模块化开发

2023-12-16 09:21:39

1.Express模块化

1.模块化

需求：一个项目中存在多种角儿的用户，如管理员、会员等
分析：项目中每个角色的功能都比较多，开发过程中涉及到的代码量比较多，如果将所有的代码都卸载一个文件中无法维护（导致单个文件中代码量过多），可以按照角色的不同，将不同角色的相关代码拆分到不同的文件中
模块化拆分：按照不同的角色，拆分多个模块

2.路由

Express中模块化开发，主要基础就是路由对象
app级别路由：工作在入口模块/主模块中的路由

const app = express()
app.get('/',function(req,res){})

route模块级路由

const route = express.Route()
route.get('/login',function(req,res){})

Express中模块化开发，主要是app级路由，包含模块及路由实现的模块化组合

3.中间件

中间件是工作在客户端发送请求和服务端处理函数之间的组件，用于处理请求和响应给它们功能的
主要区分为
内置中间件：如express.static、express.urlencoded、express.json
第三方中间件：如body-parser
自定义中间件：使用app.use((req,res,next)=>{})

2.模块化组合：案例

1.项目初始化

创建项目
创建一个模块化项目 demo/
命令行进入该文件夹，执行命令初始化为NodeJS应用
npm init -y

安装依赖
项目中的第三方依赖
npm intall express -S

完善项目文件结构
Express模块化开发

2.模块化拆分
创建并拆分模块

demo/项目文件夹中，创建一个新的存放子模块的文件夹：routes/
模块基本组合
admin.js

const express = require('express')
// 创建管理员子路由
const router = express.Router()
// 导出管理员子路由
module.exports = router

uer.js同上
app.js

const express = require('express')
const admin = require('./routes/admin')
const user = require('./routes/user')
const app = express()
app.use(express.static('public'))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
// 注册子模块
app.use('/admin',admin)
app.use('/user',user)
app.listen(3000,err=>{
    console.log('服务已在3000端口启用');
})

完善启动命

编辑项目中的package.json文件，添加相关的启动命令

"scripts":{
...
"start":'nodemon app.js'
}

业务开发
管理员功能
通过访问http://localhost:3000/admin/login 访问登录页面
通过访问http://localhost:3000/admin/index 访问管理员主页

const express = require('express')
const path = require('path')
    // 创建管理员子路由
const router = express.Router()
    // 创建访问管理员页面的路由
router.get('/login', (req, res) => {
        res.sendFile(path.join(__dirname, '../views', 'login.html'))
    })
    router.get('/index', (req, res) => {
        res.sendFile(path.join(__dirname, '../views', 'index.html'))
    })
    // 导出管理员子路由
module.exports = router

会员业务开发同上

3.EJS模板引擎

模板引擎：全称试图模板引擎，对HTML语法进行扩展支持更加强大更能的一种技术

模板引擎技术，主要用在一些传统的前端和后端耦合度较高的项目中
Java Web技术中：JSP技术
PythonWEB技术中：DTL技术

ESJ模板引擎：是一种通用模板引擎，可以在HTML页面的基础上扩展提供数据渲染、条件判断、循环遍历等各种新的功能
EJS提供了自定义的标签扩展语法

<% '脚本’标签，用于流程控制，无输出
<%_删除其前面的空格符
<%=输出数据到模板（输出的转义HTML标签）
<%-输出非转义的数据到模板
<%# 注释标签、不执行、不输出内容
<%% 输出字符串 ‘<%’
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

EJS模板引擎使用

新建EJS测试项目，项目名称demo.js/
项目中执行命令，初始化NodeJS应用
npm init -y
安装第三方依赖
npm install express ejs -S
创建本地项目结构
Express模块化开发
编辑demo.js添加基础代码，返回index.ejs

//指定ejs模板引擎，指定ejs模板页面存放位置（默认views）
app.set('views',path.join(__dirname,'views'))
app.set('view engine',ejs)
//路由中返回并渲染ejs页面
app.get('/index',(req,res)=>{
	//模拟获取到当前用户的名称
	let uname= 'zhangsan'
	//返回ejs页面
	res.render('index',{
		uname
	})
})

index.ejs文件

<body>   
    <h2>欢迎您，尊敬的用户<%= uname%></h2>
</body>

4.会话跟踪

会话跟踪：也被称为状态保持，描述的是在一个网络访问过程中，服务器对用户访问状态和信息的记录

会话：描述的是客户端和服务器之间一次完成的业务交互过程
会话从用户打开浏览器第一次访问网站服务器开始建立
会话过程中可以发送多次请求、接受多次响应数据
直接关闭浏览器，一次完整的会话结束
项目开发中，一次会话可以包含多次请求和响应
会话使用session表示、请求使用request表示，响应response表示

状态：用户受理一个业务过程中，有个特殊数据可以描述用户当前的角色、身份、其他特殊标记，这样的标记数据称为用户的状态，即描述用户特征的一个数据，状态就是数据
在一个会话过程中，用户的某个数据需要随时的尽心记录，这个数据就是会话中的状态

会话跟踪：描述的是多次请求和响应的过程中，服务器如何判断这多次请求都是同一个客户端发出的，所以需要跟踪请求对应的对话
状态保持，描述的是多次请求和响应过程中，服务器需要记录重要的数据，需要将同一个客户端的数据进行相等判断，通过这个记录数据判断多次请求是否是同一个客户端，所以需要记录或者保持一个客户端的重要数据
会话跟踪技术，实现过程中就是重要数据的记录过程，也可以称为状态保持技术

为什么要跟踪会话和保持状态

使用浏览器访问网站数据时，使用了HTTP或者HTTPS协议,HTTP和HTTPS网络协议是一种无状态协议，每次的请求和响应都是独立进行的，用户通过浏览器访问了百度首页，浏览器中获取了服务器返回的数据并且渲染展示了百度页面 客户端和服务器之间的连接已经断开了。下一次再次发送请求相对于服务器来说相当于接受了一个新的请求，默认情况下服务器无法判断这个请求是否是上一个客户端发起的
需要会话跟踪技术或者状态保持技术，记录同一个客户端发送的多次请求

实现技术：WEB应用框架，通过会话技术实现保持，主要实现方案cookie、session
-session：描述的是会话，一个新用户在访问服务器时，服务器会在自己的session空间记录这个客户端的访问信息
-cookie：描述的是客户端数据，存储在客户端电脑上、服务器可以在客户端的cookie中写入/记录数据

Express应用中，需要第三方模块express-session完成session会话的解析处理
安装对应模块
npm install express-session -S
使用

//给session中存储数据
req.session.key = value
//从session中获取数据
console.log(req.session.key)

配置相关中间件

app.use(session({
        secret: 'zidingyidenasha',
        resave: false,
        saveUninitialized: true
 }))

5.验证码

验证码就是为了限制用户某个共呢个的操作频率,过于频繁的操作对于服务器来说压力较大，所以通过验证码可以限制用户的操作次数
NodeJS第三方模块，提供了基础验证码的实现：svg-captcha模块

使用
安装
npm install svg-captcha
配置相关中间件

router.get('/captcah',(req,res)=>{
	let captcha = svgCaptcha.create()
	req.session.captcha = captcha.text
	res.type('svg')
	res.status(200).send(captcha.data)
})

页面中引入

<img src='/user/captcha'>

点击图片刷新请求

let img = doucument.querySelector('img')
img.onclick = function(){
	this.src = '/user/captcha?' + Math.random()
}

6.其他中间件（根据项目需求查看对应文档）

网站logo中间件 svg-captcha
自定义错误中间件 http-errors
文件上传中间件 formidable

4.项目开发案例

移步(express模块化开发项目案例)[https://blog.csdn.net/weixin_44978043/article/details/120932371]

上一篇：express-winston 库的学习笔记


下一篇：使用Node.js进行Web开发（一）