9
-
什么是cookie
-
什么是session
-
能够实现登录功能
-
知道什么是中间件
1. 登录
目标：使用 users表中记录的用户和对应的密码进行登录
image.png
思路分析：
-
创建 /login 路由用来显示login.html页面
-
创建 /checkLogin 路由，检测用户名、检测密码、注册session
① 接收用户名和密码： req.body
② 检测用户名： select * from ali_admin where user_name=?
==查询结果为一条数据则用户名正确，反之用户名错误==
③ 检测密码： 表单提交密码和上一步查询出的密码进行比较
④ 显示成功/失败，页面跳转
代码实现：
-
创建 /login 路由用来显示login.html页面
image.png
image.png
- 创建 /checkLogin 路由，检测用户名、检测密码、注册session
① 接收数据 ==> 接收用户名和密码
② 拼接SQL语句 ==> select * from users where user_name=? and user_pwd=?
③ 执行SQL语句 ==> db.query()
④ 处理SQL执行结果 ==> 如果用户名密码正确跳转到学生信息列表页，如果不正确跳转回登录页
image.png
2. 会话控制概述
-
http协议的缺陷
无状态，就是无记忆，不能让同一浏览器和服务器进行多次数据交换时，产生业务的连续性。
-
什么是会话控制
会话控制就是解决http无记忆的缺陷的。能够==将数据持久化的保存在客户端(浏览器)或者服务器端==，从而让浏览器和服务器进行多次数据交换时，产生连续性。
- 会话控制的分类
- cookie： 将数据持久化保存到客户端（浏览器）
- session： 将数据持久化保存到服务器端
3. cookie技术
3.1 什么是cookie
- cookie是将数据持久化存储到客户端的一种技术。
- 网站可以将数据写到浏览器中， 一个网站最多能在一个浏览器写20个cookie。现在的浏览器能写的更多
- 一个浏览器能够设置的总cookie数最多为300个，每个不能超过4kb。
- cookie既能保存在文件中，也能保存在内存中。
cookie应用实例 --- 千人千面（猜你喜欢）
image.png
3.2 设置cookie
- 核心： ==cookie是随着响应头返回给浏览器的==
- 设置cookie的核心思想： 使用 res.setHeader 或者 writeHeader 将cookie信息设置在响应头中
- cookie设置格式：key=value;expires=time
- key: cookie的名称
- value： 名称对应的值
- expires： 有效期
//1. 使用 setHeader 方法
res.setHeader('cookie', 'id=101'); //设置单个cookie
res.setHeader('cookie', ['id=101', 'name=zs']); //设置多个cookie
//2. 使用 writeHeader 方法
res.writeHeader(200, {
'content-type': 'text/html;charset=utf-8',
'set-cookie': ['type=10', 'name=my']
})；
//3. 使用 set 方法，该方法是express封装的方法
res.set({'set-cookie':['goodsName=xiaomi 6', 'goodsPrice=3999']})；
//4. 设置cookie时，指定有效期
//注意：要使用UTC时间，使用 toUTCString()方法转换
//设置有效期为 1小时
const expiresTime = new Date(Date.now() + 3600000).toUTCString();
res.set({'set-cookie':['goodsName=xiaomi 6;expires=' + expiresTime, 'goodsPrice=3999']})
image.png
查看响应头：
image.png
浏览器中查看保存的cookie：
image.png
image.png
3.3 读取cookie
核心： req.headers.cookie 中
const qs = require('querystring');
const obj = qs.parse('id=10001;name=zs', ';', '=');
console.log(obj); // {id:10001, name:"zs"}
3.4 cookie有效期
- 设置了expires则有效期到expires指定的时间
- 为设置expires则关闭浏览器cookie即消失
4. session技术
4.1 session介绍
-
因为cookie是保存在客户端的数据，不够安全，所以出现了session。
-
session会将数据保存到服务器端（保存在文件、内存服务器或数据表中），安全性就可以得到保证。
4.2 设置/读取session
express设置session时，需要使用第三方模块 --- express-session
使用步骤：
-
加载 express-session 模块
-
将session注册为中间件
-
使用req.session对象设置/读取session
//1. 加载 express-session 模块
const session = require('express-session');
//2. 配置项
const obj = {
secret: '4ey32erfyf3fgpg', //加密字符串。 使用该字符串来加密session数据，自定义
resave: false, //强制保存session即使它并没有变化
saveUninitialized: false //强制将未初始化的session存储。当新建了一个session且未
//设定属性或值时，它就处于未初始化状态。
};
//3. 注册为express-session中间件
app.use(session(obj));
//4. 使用 req.session.属性 = 值 方式来设置session
app.get('/sets', (req, res) => {
req.session.isLogin = true;
req.session.userInfo = {user_id:10001, user_name:"zs"};
//注意：一定要将数据发回给浏览器，否则session无法生效
res.send('设置session');
});
//设置好之后，req.session中的结构
req.session = {
isLogin: true,
userInfo: {user_id:10001, user_name:"zs"}
}
4.3 session有效期
- 当浏览器关闭后，session消失
- express-session会将session保存在内存中，每次重启服务器时即使没有关闭浏览器session也会消失
4.4 删除session
核心： req.session.destroy() 销毁所有session
4.5 session 的有效范围
在一个网站中设置了session，则整个网站都能找到这个session
5. 登录功能完善
核心： 登录成功后注册session信息，在每个页面中检测session是否存在
思路：
-
在 /checkLogin 中，当正常登录以后将用户信息和已登录状态记录到session中
-
在其他路由监听中增加session检测的步骤，除了 /login 和 /checkLogin
注意： session时需要使用到 express-session模块，首先要加载该模块并注册为中间件
代码实现：
- 在 app.js 中加载express-session模块，并注册为中间件
image.png
- 在 /checkLogin 中，当正常登录以后将用户信息和已登录状态记录到session中
image.png
- 在其他路由中检测session（就是检测 session.isLogin是否为true）
image.png
6. cookie和session的原理
6.1 cookie原理
-
浏览器第一次访问带有cookie设置的路由时，服务器会将cookie信息通过响应头返回给浏览器
-
之后浏览器每次访问服务器时都会将cookie信息通过请求头发送给服务器
6.2 session原理
image.png
-
浏览器第一次访问带有session设置的路由时，服务器会自动产生一个sessionId（一个很长的随机字符串），该sessionId有两个作用
① 随着cookie返回给浏览器，保存在浏览器中 （==相当于一把钥匙==）
② 在服务器开辟一块内存并以该sessionId命名，将数据保存在该内存中 （==相当于一个箱子==）
- 浏览器之后每一次访问服务器时，sessionId都会随着请求头发送给服务器，服务器就能根据sessionId
7. 中间件
7.1 什么是中间件
自来水生产流程：
image.png
d:/aaa/ABC.JPG： 截取文件后缀并转为小写
image.png
上图中lastIndexOf、slice、toLowerCase几个方法就可以认为是中间件
中间件按顺序调用，对字符串 d:/aaa/ABC.JPG进行加工，得到最终的结果
Express是一种路由和中间件的Web框架，Express应用程序本质上是一系列中间件函数调用。
==express中间件是一个特殊的url地址处理函数==
- 该函数中有三个基本参数， req、res、next
- req就是回调函数中的req对象
- res就是回调函数中的res对象
- next：当该中间件执行完成后自动进入下一个中间件
7.2 自定义中间件
案例1： 记录日志中间件
目标： 每当浏览器输入地址访问时，就将当前访问的url和时间保存到 run.log 文件中
-
在每个路由监听中使用fs.appendFile将url地址和时间记录到run.log文件中
image.png
缺点：每个路由监听中都要使用fs写文件，非常麻烦
- 将写run.log的方法封装为一个函数
image.png
- 将writeLog封装为中间件函数，并注册为中间件
image.png
案例2： 自定义url检测中间件，不存在的url地址直接显示 404 not found
image.png
7.3 图例中间件工作原理
image.png
7.4 检测登录状态中间件
方法： 在每个路由中都要检测 isLogin 的状态，除了 /login 和 /checkLogin
image.png
7.5 中间件类别
express有五中类别的中间件：
- 应用级别的中间件： 挂载到 app 上的中间件，例如：app.use()
- 路由级别的中间件： 挂载到 router 对象上的中间件，例如：router.get()、 router.post
- 错误级别的中间件： 回调函数中，有四个参数 app.use((err, req, res, next)=>{})
- 内置中间件： express.static() ， express提供的唯一内置中间件
- 第三方中间件： 非express框架提供的，需要程序员手动安装才能使用的中间件；
body-parser解析post 表单数据
网友评论