Express模块化开发

2021-10-24 13:01:26 阅读：160 来源： 互联网

标签：session Express 模块化 app express 会话开发 res 客户端

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

完善项目文件结构

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
创建本地项目结构

编辑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]

标签：session,Express,模块化,app,express,会话,开发,res,客户端
来源： https://blog.csdn.net/weixin_44978043/article/details/120926117

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9