为自己的项目设计一个登录页面，并将 Session 信息持久化到 Redis 上

旧城等待， 2023-09-25 19:46 8阅读 0赞

**目录**

一、项目配置

1.1、引入依赖

1.2、application 配置文件（session 持久化到 Redis）

二、项目开发

2.1、统一返回数据个数处理(AOP)

2.2、注册页面（Session 信息持久化到 Redis 上）

2.2.1、客户端开发

2.2.2、服务器开发

2.3、主页（从 Redis 中获取 Session 信息）

2.3.1、客户端开发

2.3.2、服务器开发

--------------------

# 一、项目配置 #

--------------------

## 1.1、引入依赖 ##

项目创建之初可以进行引入依赖：

![e105c376ea0346298399379c744670d3.png][]

也可以通过 pom.xml 直接引入

<dependencies>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-data-redis</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>
    
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-devtools</artifactId>
    			<scope>runtime</scope>
    			<optional>true</optional>
    		</dependency>
    		<dependency>
    			<groupId>org.projectlombok</groupId>
    			<artifactId>lombok</artifactId>
    			<optional>true</optional>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-test</artifactId>
    			<scope>test</scope>
    		</dependency>
    	</dependencies>

## 1.2、application 配置文件（session 持久化到 Redis） ##

在 application.properties 文件中配置 redis 连接信息，以及配置 session 信息的存储仓库为 redis（默认存储位置为本机内存中）。

**这就是将 session 信息存储到 Redis 中的关键信息.**

# 配置 session 信息的存储仓库为 redis
    spring.session.store-type=redis
    # 配置 redis 连接信息
    spring.redis.host=43.139.193.116
    spring.redis.port=6379
    server.servlet.session.timeout=1800
    spring.session.redis.flush-mode=on_save
    spring.session.redis.namespace=spring:session

session存储需要借助 cookie，默认情况下 cookie是会话级别的，想要实现⾮会话级别的 cookie 和 session保持，就需要在配置⽂件中设置 cookie的过期时间：

server.servlet.session.cookie.max-age=180

# 二、项目开发 #

--------------------

## 2.1、统一返回数据个数处理(AOP) ##

对服务器返回的数据进行统一处理，就需要使用 AOP 进行处理，如下是统一的数据格式

import lombok.Data;
    
    @Data
    public class AjaxResult {
    
        private Integer code;
        private String msg;
        private Object data;
    
        /**
         * 成功返回数据格式
         * @param msg
         * @param data
         * @return
         */
        public static AjaxResult success(String msg, Object data) {
            AjaxResult ajaxResult = new AjaxResult();
            ajaxResult.setCode(200);
            ajaxResult.setMsg(msg);
            ajaxResult.setData(data);
            return ajaxResult;
        }
    
        public static AjaxResult success(Object data) {
            AjaxResult ajaxResult = new AjaxResult();
            ajaxResult.setCode(200);
            ajaxResult.setMsg("");
            ajaxResult.setData(data);
            return ajaxResult;
        }
    
        /**
         * 返回失败的结果
         * @param code
         * @param msg
         * @param data
         * @return
         */
        public static AjaxResult error(Integer code, String msg, Object data) {
            AjaxResult ajaxResult = new AjaxResult();
            ajaxResult.setCode(code);
            ajaxResult.setMsg(msg);
            ajaxResult.setData(data);
            return ajaxResult;
        }
    
        public static AjaxResult error(String msg, Object data) {
            AjaxResult ajaxResult = new AjaxResult();
            ajaxResult.setCode(403);
            ajaxResult.setMsg(msg);
            ajaxResult.setData(data);
            return ajaxResult;
        }
    
        public static AjaxResult error(Object data) {
            AjaxResult ajaxResult = new AjaxResult();
            ajaxResult.setCode(403);
            ajaxResult.setMsg("");
            ajaxResult.setData(data);
            return ajaxResult;
        }
    }

以下是统一处理的拦截：

import com.example.demo.common.AjaxResult;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import lombok.SneakyThrows;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.core.MethodParameter;
    import org.springframework.http.MediaType;
    import org.springframework.http.server.ServerHttpRequest;
    import org.springframework.http.server.ServerHttpResponse;
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
    
    /**
     * 统一返回个数处理
     */
    @ControllerAdvice
    public class ResponseAdvice implements ResponseBodyAdvice {
    
        @Autowired
        private ObjectMapper objectMapper;
    
        /**
         * 开关
         * @param returnType
         * @param converterType
         * @return
         */
        @Override
        public boolean supports(MethodParameter returnType, Class converterType) {
            return true;
        }
    
        /**
         * 返回格式处理
         * @param body
         * @param returnType
         * @param selectedContentType
         * @param selectedConverterType
         * @param request
         * @param response
         * @return
         */
        @SneakyThrows
        @Override
        public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
            if(body instanceof AjaxResult) {
                return body;
            }
            //需要对 String 进行特殊处理
            if(body instanceof String) {
                return AjaxResult.success(objectMapper.writeValueAsString(body));
            }
            return AjaxResult.success(body);
        }
    }

## 2.2、注册页面（Session 信息持久化到 Redis 上） ##

### 2.2.1、客户端开发 ###

创建 login.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>登陆页面</title>
        <link rel="stylesheet" href="css/conmmon.css">
        <link rel="stylesheet" href="css/login.css">
        <script src="js/jquery.min.js"></script>
    
    </head>
    
    <body>
        
        <div class="nav">
            <img src="img/logo2.jpg" alt="">
            <span class="title">登录页面</span>
            
            <span class="spacer"></span>
            <a href="reg.html">点击跳转到注册页面</a>
            
        </div>
        
        <div class="login-container">
            
            <div class="login-dialog">
                <h3>登陆</h3>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="username">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password">
                </div>
                <div class="row">
                    <button id="submit" onclick="login()">提交</button>
                </div>
            </div>
        </div>
    
    
    </body>
    
    </html>

编写 js 代码

点击注册按钮，首先对用户名和密码进行非空校验，成功后将用户输入的用户名和密码作为请求的参数通过 ajax 发送给服务器，若返回成功的数据，则跳转到主页。

### 2.2.2、服务器开发 ###

服务器接收客户端当请求，经检验后，对请求中的数据（用户名和密码）进行 Session 保存信息，持久化到 Redis 上。

private static final String SESSION_KEY = "dfafjal";
    
        /**
         * 用户登录
         * @param request
         * @param username
         * @param password
         * @return
         */
        @RequestMapping("login")
        public AjaxResult login(HttpServletRequest request, String username, String password) {
            //非空校验
            if(!StringUtils.hasLength(username) && !StringUtils.hasLength(password)) {
                return AjaxResult.error("参数非法");
            }
            //校验密码
            if(!username.equals("zhangsan") || !password.equals("123")) {
                //密码错误
                return AjaxResult.error("账号或密码错误");
            }
            //创建用户
            UserInfo userInfo = new UserInfo();
            userInfo.setUsername(username);
            userInfo.setPassword(password);
            //登录成功创建会话信息持久化到Redis
            HttpSession session = request.getSession(true);
            session.setAttribute(SESSION_KEY, userInfo);
            return AjaxResult.success(1);
        }

## 2.3、主页（从 Redis 中获取 Session 信息） ##

### 2.3.1、客户端开发 ###

创建页面 hello.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">
        <script src="js/jquery.min.js"></script>
        <title>主页</title>
    </head>
    
    <body>
        <h3>主页</h3>
        <div>
            <span id="username"></span>
        </div>
    </body>
    
    
    </html>

编写 js 代码

打开主页，客户端发送 ajax 请求，请求用户的信息。

### 2.3.2、服务器开发 ###

服务器接收请求后，从 Redis 上获取 session 信息，从而获取用户信息。

/**
         * 用户信息查询(通过 Redis )
         * @param session
         * @return
         */
        @RequestMapping("/show")
        public AjaxResult getUserinfo(HttpSession session) {
            UserInfo userInfo = (UserInfo) session.getAttribute(SESSION_KEY);
            //非空校验
            if(!StringUtils.hasLength(userInfo.getUsername()) &&
                    !StringUtils.hasLength(userInfo.getPassword())) {
                //校验为空
                return AjaxResult.error("参数错误");
            }
            return AjaxResult.success(userInfo.getUsername());
        }

这样一个登录界面就完成了~

![e640863bd622421e90b1e06ba1cfae68.gif][]

[e105c376ea0346298399379c744670d3.png]: https://img-blog.csdnimg.cn/e105c376ea0346298399379c744670d3.png
[e640863bd622421e90b1e06ba1cfae68.gif]: https://img-blog.csdnimg.cn/e640863bd622421e90b1e06ba1cfae68.gif