用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程

这篇具有很好参考价值的文章主要介绍了用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🧸注:不要看我的文件多,那是我的其他项目,这个项目所用的文件我会全部用红框框起来,没框的部分不用管,前端两个文件,后端一个文件 📜

🧸欢迎来到dream_ready的博客,📜相信你对这篇博客也感兴趣o (ˉ▽ˉ;)

表白墙/留言墙 —— 初级SpringBoot项目,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学

目录

首先,定义前后端交互接口

然后,创建一个SpringBoot项目

编写前端页面

登录(login.html): 

主页(index.html)

编写后端代码

方法login处理逻辑:

方法getUserInfo处理逻辑:


首先,定义前后端交互接口

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

讲解:

  1.         登录接口路径可以较为随意的设定,但参数必须有账号密码,也就是username和password,后端进行校验后返回校验成功,还是校验失败,也就是true和false
  2.         获取用户的登录信息,不需要传任何参数,只需要前端发送请求后,后端将当前登录用户的名称返回即可

然后,创建一个SpringBoot项目

如何创建一个SpringBoot项目——超详细教程

编写前端页面

        在resource目录下的static目录下创建登录和主页html页面,此处我将其分别命名为 login.html和index.html

如图红框位置:

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

登录(login.html): 

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

<!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() {
    console.log("登录");
    $.ajax({  // ajax 发送请求
      url: "/user/login",   // 请求路径
      type: "post",         // 请求类型
      data:{               // 传递的参数
        "userName": $("#userName").val(),
        "password": $("#password").val()
      },
      success:function(result){    // 如果响应成功了(有响应),则执行此回调函数  result 表示后端返回的结果
        if(result){
          location.href = "/index.html";   // 页面跳转
          // location.assign();
        }else{
          alert("密码错误");    // 弹框
        }
      }
    });
  }

</script>
</body>

</html>

代码逻辑: 从input输入框内获取username和password参数,向后端发送post请求将参数发送过去,后端进行校验,如果后端响应为true,则说明响应成功(账号密码正确),执行回调函数跳转页面到index.html (主页)

主页(index.html)

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

<!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/getUserInfo",
            type: "get",
            success:function (username){
                $("#loginUser").text(username);   // text 表示往该选择器放值,此处放username这个值
            }
        });
</script>
</body>

</html>

代码逻辑:来到该页面,立即向后端发送get请求,获取用户名username并展示到该页面上

编写后端代码

创建Java文件,我将其命名为userController

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

 以下是全部代码

@RequestMapping("/user")
@RestController
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;
//        }

        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
            return false;
        }

        // 进行用户名和密码的校验
        if("admin".equals(userName) && "admin".equals(password)){
            // 设置session
            session.setAttribute("username","admin");
            return true;
        }
        return false;
    }

    @RequestMapping("/getUserInfo")
    public String getUserInfo(HttpSession session){
        // 从Session获取登录用户
        String userName = (String) session.getAttribute("username");
        return userName;
    }
}

方法login处理逻辑:

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

  1. 先校验参数合法性,判断是否为空等
  2. 然后进行用户名和密码的校验,判断是否是正确的用户名和密码
  3. 如果以上校验都通过,则设置session,存放username,以便后续使用

方法getUserInfo处理逻辑:

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程,spring boot,后端,java,html5,前端,intellij-idea,spring

从session中获取username并返回给前端文章来源地址https://www.toymoban.com/news/detail-736005.html

到了这里,关于用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包