后端代码练习2——用户登录

仲夏是荔枝味

已于 2024-08-15 11:15:08 修改

阅读量875

点赞数 11

分类专栏： java-ee进阶文章标签： spring boot

于 2024-08-14 18:49:44 首次发布

本文链接：https://blog.csdn.net/2202_76101487/article/details/141192571

版权

java-ee进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 需求

用户输入账户和密码，后端进行校验账户和密码是否正确。

1、如果不正确，前端要告知用户（提示信息）。

2、如果正确，跳转页面，跳转的页面显示当前用户登录。

3、后续再访问首页，可以获取到用户登录信息。

2. 准备工作

创建一个Spring Boot项目

2.1 前端代码

1、login.html

<!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>


</script>
</body>

</html>l>

2、index.html页面代码

<!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>

</script>
</body>

</html>

2.2 前端代码页面

1、login登录页面

2、index页面

3. 约定前后端交互接口

3.1 需求分析

对于后端开发人员而言，不涉及前端页面的展示，只需要提供下面的两个功能：

1、登录页面：通过账号和密码，校验输入的账户密码是否正确，并告知前端。

2、首页：告知前端当前登录用户。如果当前已有用户登录，返回登录的账号，如果没有，返回空。

3.2 接口定义

1、输入账户密码界面
校验接口：

请求路径：/user/login

请求方式：POST

接口描述：校验账号密码是否正确

请求参数如下：

响应数据：

Content-Type：text/html

响应内容：

true //账号密码验证成功

false //账户密码验证失败

2、当前登录的用户界面
校验接口：

请求路径：/user/index

请求方式：GET

接口描述：查询当前登录的用户

请求参数：无

响应数据：

Content-Type：text/html

响应内容：user（返回当前登录的用户）

4. 服务器代码实现

package com.example.zxslzw2014_8_11;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;

import javax.servlet.http.HttpSession;

@RestController
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        //参数校验
//        if(userName == null || userName.length() == 0
//            || password == null || password.length() == 0) {
//            return false;
//        }
        //Spring MVC 提供了更方便写法
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }
        //判断账户密码是否正确
        //上面已经做了判空处理，userName不会为空，但下面的写法也是一种习惯
        if("smy".equals(userName) && "123".equals(password)) {
            session.setAttribute("userName", userName);
            return true;
        }
        return false;
    }
    @RequestMapping("/index")
    //两种写法
//    public String getUserName(HttpSession session) {
//        return (String) session.getAttribute("userName");
//    }
    public String getUserName(@SessionAttribute("userName") String userName) {
        return userName;
    }
}

4.调整前端页面代码

4.1 login.html代码：

对于前端而言，点击登录按钮时，需要把用户输入的信息传递到后端进行校验，后端校验成功，就跳转的：index.html 页面，后端校验失败，则直接弹窗，代码如下：

<!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({
        url: "/user/login",
        type: "post",
        data: {
          userName: $("#userName").val(),
          password: $("#password").val()
        },
        //http响应成功
        success: function(result) {
          if(result == true) {
            //页面跳转
            location.href ="index.html";
            // location.assign("index.html");
            // location.replace("index.html");
          } else{
            alert("密码错误");
          }
        }
      });
    }
 
  </script>
</body>
 
</html>

页面跳转的三种方式：
1、location.href="book_list.html";

2、location.assign("book_list.html);

3、location.replace("book_list.html);

4.2 index.html代码：

<!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({
            url: "/user/index",
            type: "get",
            success: function(loginName) {
                $("#loginUser").text(loginName);
            }
        });
    </script>
</body>
 
</html>

5. 运行测试

用户名和密码都输入：smy&123；

登录之后跳转到如下页面：

当登录错误时，会有以下界面弹出：

ps：本次的内容就到这里了，如果对你有所帮助的话，就请一键三连哦！！！

本文的封面来自：bilibili苏杉杉的pv，侵权删 url：https://www.bilibili.com/video/BV1vo4y167eh/?spm_id_from=333.999.0.0&vd_source=866da5be2ef0ddd213b053523da53138
————————————————

电子签名：上嘉路