投稿
  1. 极客之音首页
  2. 技术随笔

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

飞熊 • • 技术随笔 • 阅读 66

追求适度，才能走向成功；人在顶峰，迈步就是下坡；身在低谷，抬足既是登高；弦，绷得太紧会断；人，思虑过度会疯；水至清无鱼，人至真无友，山至高无树；适度，不是中庸，而是一种明智的生活态度。

导读：本篇文章讲解 为自己的项目设计一个登录页面，并将 Session 信息持久化到 Redis 上，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

目录

一、项目配置

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、引入依赖

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

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

也可以通过 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>
        <!-- <a href="#">注销</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 发送给服务器，若返回成功的数据，则跳转到主页。

    <script>
        //登录逻辑
        function login() {
            var username = jQuery("#username");
            var password = jQuery("#password");
            if (username.val() == "") {
                alert("用户名不能为空!");
                username.focus();
                return;
            }
            if (password.val() == "") {
                alert("密码不能为空!");
                password.focus();
                return;
            }
            jQuery.ajax({
                type: "POST",
                url: "/user/login",
                data: {
                    "username": username.val(),
                    "password": password.val()
                },
                success: function (result) {
                    if(result != null && result.code == 200 && result.data == 1) {
                        alert("恭喜!登录成功!");
                        location.assign("hello.html");
                    } else {
                        alert("很遗憾登录失败!");
                    }
                }

            });
        }
    </script>

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 请求，请求用户的信息。

    <script>
        //获取用户信息
        function getUserInfo() {
            jQuery.ajax({
                type: "GET",
                url: "/user/show",
                data:{},
                success: function(result) {
                    if(result != null && result.code == 200 && result.data != null) {
                        var username = jQuery("#username");
                        username.text("欢迎回来:" + result.data);
                    } else {
                        alert("用户信息获取失败!");
                    }
                }
            });
        }
        getUserInfo();
    </script>

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());
    }

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/130348.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！