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

Posted 陈亦康

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为自己的项目设计一个登录页面，并将 Session 信息持久化到 Redis 上相关的知识，希望对你有一定的参考价值。

目录

一、项目配置

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

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

也可以通过 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());

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

第一个Java web项目：员工管理系统

要求：

  1. 做一个登陆页面，实现登录,用户名和密码都是admin，登录成功后，用session记录用户名,登录失败，请提示失败原因。
  2. 做一个简单的管理系统，实现注册，修改，查询，删除 员工的功能，注册内容如下图，课程要求可以多选，用逗号分割，保存到表中。表自己在INTF下自己建个临时表，比如INTF.TEMP_001
  3. 利用session做简单的拦截功能，如果JSP页面发现没有登录，则跳转到登录页面
  4. 注册add.jsp
  5. 修改Edit.jsp
  6. 查询queryList.jsp
  7. login.html
  8. 删除记录的时候，利用ajax处理，当数据库删除成功后，js动态删除表格该行,提示jquery的remove()。
  9. 添加的成功后，js动态在表格后面添加一行，提示jquery的append或者html()。
  10. 弹出框形式处理。
  11. 点击add或者edit弹出一个小框处理，添加或修改成功后，关闭小窗口，然后刷新表格

 

 

 

 

 实现过程

一、了解编程工具和环境

　　工具： tomcat(服务器)、myeclipse(开发工具)

　　环境配置：

　　　　　　tomcat下载安装好

　　　　　　myeclipse配置：1。配置tomcat位置

　　　　　　　　　　　　　　2。配置jdk

　　　　　　　　　　　　　　3。配置tomcat为工程的启动

　　　　　　　　　　　　　　（这三步网上都有教程，以及配置成功的标志：run as 可以选择刚配置的tomcat）

　　新建一个工程（了解工程的大体结构）

　　　　1、new  “web serveice project”    新建成功后，可以run as 看看效果。在浏览器中输入http://localhost:8080/ServletTest/login.jsp ServletTest替换为你的工程名字。

　　

 

 

 

 

 

 

 

 

 

空指针异常。。

以上是关于为自己的项目设计一个登录页面，并将 Session 信息持久化到 Redis 上的主要内容，如果未能解决你的问题，请参考以下文章

13 Servlet——session案例2：用户登录主页显示用户名和注销登录

Cookie和Session

与 php 中的 session_start() 相关

Cookie和Session使用

我真的需要重新加载我的页面两次吗？

js怎样获取session值 在登录页面中