《JavaEE进阶》----7.＜SpringMVC实践项目：【登录页面的验证】＞

news2024/9/21 12:45:51

这篇文章详细的讲解了一个

简单的登录网页的前端代码和后端代码的构造

使用了JavaScript中的ajax来进行前后端的交互

一、前端代码

登录页面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {
      $.ajax({
        type:"post",
        url:"/login/check",
        data:{
          userName:$("#userName").val(),
          password:$("#password").val()
        },
        success:function(result){
          if(result==true){
            location.href = "index.html";
          }else{
            alert("用户名和密码错误！请重写输入")
          }
        }
      });
    }

  </script>
</body>

</html>

代码解析

<body>中的文档的主体部分，包含网页的可见内容。

<input type="button" value="登录" οnclick="login()">

<input> 元素用于在网页上创建各种类型的输入控件。

type="button"

指定这是一个按钮类型，不会提交表单，而是用于触发客户端的JavaScript函数或其他操作

οnclick="login()"

表示当用户点击登录按钮时，就会执行命名为login()的JavaScript函数

下面的用<script>包起来的代码

这段代码使用 jQuery 实现了一个简单的用户登录功能。它通过 AJAX 向服务器发送用户名和密码，检查登录凭证的有效性，并根据服务器返回的结果执行相应的操作。

1.首先引入jQuery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
通过 CDN 引入 jQuery 3.6.4 库，以便在页面中使用 jQuery 提供的简便的 JavaScript 操作方法。

2.定义login（）函数

login（）是一个 JavaScript 函数，用于处理用户点击“登录”按钮时的操作。

3 $.ajax()方法

使用 jQuery 的 $.ajax 方法来进行 AJAX 请求，发送异步 HTTP 请求。

关键参数解释：
指定请求类型为 Post，用于向服务器提交数据（用户名和密码）。

url:"/login/check",
指定请求的 URL（服务器端的登录检查接口），即请求会发送到 /login/check。
data:发送到服务器的数据对象，包含用户输入的用户名和密码：
data: {
  userName: $("#userName").val(),
  password: $("#password").val()
}
$("#userName").val()：使用 jQuery 获取 ID 为 userName 的输入框的值（用户名）。
$("#password").val()：使用 jQuery 获取 ID 为 password 的输入框的值（密码）。
success:function(result){
}
请求成功后的回调函数，接收一个参数 result，代表服务器的返回结果。
如果 result 是 true，表示登录成功，使用 location.href = "index.html"; 重定向到主页 index.html。
如果 result 是 false，表示登录失败，弹出提示框：alert("用户名和密码错误！请重写输入");。

显示用户名页面的代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
</head>

<body>
    登录人: <span id="loginUser"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $.ajax({
            type:"post",
            url:"/login/index",
            success:function(result){
                $("#loginUser").text(result);
            }
        });
    </script>
</body>

</html>

代码解析：
登录人: <span id="loginUser"></span>
1. <span> 标签

<span> 是一个行内元素，通常用于在网页中创建一个没有任何特定样式或格式的容器，用于文本或其他内联元素。
在这段代码中，<span> 元素用于显示登录用户的名字。

2. id="loginUser"

id 是一个 HTML 属性，表示元素的唯一标识符。在这段代码中，id="loginUser" 用于唯一标识这个 <span> 元素。
通过这个 ID，可以在 JavaScript 或 jQuery 中轻松定位和操作这个元素的内容。
        $.ajax({
            type:"post",
            url:"/login/index",
            success:function(result){
                $("#loginUser").text(result);
            }
        });
return是后端返回的结果。也就是用户名。

因此我们只需要将result的值赋值给loginUser这个参数

$("#loginUser")：使用 jQuery 选择器选择 ID 为 loginUser 的元素。
.text(result)：将 result 的内容设置为该元素的文本内容。

二、前端页面

三、后端代码

3.1 完整代码


@RestController
@RequestMapping("/login")
public class LoginController {
    @RequestMapping("/check")
    public Boolean check(String userName , String password, HttpSession session){
        //校验账号和密码是否为空
        if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){
            return false;
        }
        //检验账号和密码是否正确
        //本来使用数据库，如今使用数据模拟
        if("张三".equals(userName)&&"123456".equals(password)){
            session.setAttribute("userName",userName);
            return true;
        }
        return false;
    }

    @RequestMapping("/index")
    public String index(HttpSession session){
        String userName = (String) session.getAttribute("userName");
        return userName;
    }

}

3.2 代码解析

验证用户名和密码

在判断输入字符是否为空时，我们可以用到Spring给我们提供的方法：
!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)
这里验证用户名和密码的时候进行数据模拟，而非使用数据库，等后续再改进。
        if("张三".equals(userName)&&"123456".equals(password)){
            session.setAttribute("userName",userName);
            return true;
        }
书写标准：把常量写在前面，变量写在后面。

进行完上述的代码，我们就需要获取用户信息，怎么获取呢？这时候就需要用到Session。

从Session里拿。

设置Session （得到用户信息）

如上完整代码，是校验用户名和密码的完整代码。我们还进行了Session的设置。

我们使用HttpSession session这个对象设置Session内容为用户名。

显示用户信息

    @RequestMapping("/index")
    public String index(HttpSession session){
        String userName = (String) session.getAttribute("userName");
        return userName;
    }

我们在显示登录人页面中，使用HttpSession session这个对象获得了之前设置的

Session信息，也就是用户名。并且返回了userName。
(String) session.getAttribute("userName");
在这串代码中，如果Session为空，并不会报错。因为它自动帮我们创建了一个空的Session