【SpringMVC】用户登录器项目，加法计算器项目的实现

三三是该溜子

发布于 2024-12-30 12:27:22

2970

文章被收录于专栏：该溜子的专栏该溜子的专栏

一：用户登录项目实现

1：需求

⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确。（1）如果不正确,前端进⾏⽤⼾告知（2）如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾（3）后续再访问⾸⻚,可以获取到登录⽤⼾信息

2：准备工作

把前端代码放到项目中

（1）跳转的页面（首页）

<!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）登录的页面

<!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() {
    
    }

  </script>
</body>

</html>

3：预期结果

二：约定前后端交互接口

1：需求分析

对于后端开发⽽⾔,只需要提供两个功能 ①登录⻚⾯:通过账号和密码,校验输⼊的账号密码是否正确,并告知前端 ② ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回空

2：接口定义

（1）校验接口

请求路径：/user/login 请求⽅式：POST 接⼝描述：校验账号密码是否正确

①请求参数

②响应数据

Content-Type: text/html 响应内容: true //账号密码验证成功 false//账号密码验证失败

（2）查询登录用户接口

请求路径：/user/getLoginUser 请求⽅式：GET 接⼝描述：查询当前登录的⽤⼾

①请求参数

无

②响应数据

Content-Type: text/html 响应内容: zhangsan

3：后端校验代码

package com.example.demoapplication;

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Hua YY
 * Date: 2024-11-11
 * Time: 13:10
 */


@RestController
@RequestMapping("/user")
public class LoginController {
    /*
    * 这个类中的login方法是用来检验前端请求中的账号和密码是否正确的
    * */

    @RequestMapping(value = "/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(!"cbro".equals(userName) || !"123456".equals(password)){
            return false;
        }
        session.setAttribute("userName" , userName);
        return true;
    }

    @RequestMapping("/index")
    public String getUserName(@SessionAttribute("userName") String userName){
        return userName;
    }
}

StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值，字符串为null或者""时,返回false,其他返回true。

4：查询登录用户后端代码

@RestController
@RequestMapping("/user")
public class getLoginUser {
    @RequestMapping(value = "/getLoginUser" )
    public String getLoginUser(HttpSession session){
        String userName = (String)session.getAttribute("userName");//向下转型
        if(StringUtils.hasLength(userName)){
            return userName;
        }
        return "";
    }
}

三：调整前端代码

<!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/getLoginUser",//这里才是真正的调用后端
            type:"get",
            success:function (loginName){//调用回调函数，接收后端结果，用body参数接收
                //给登录人span重新赋值
                $("#loginUser").text(loginName);//用text赋值，赋值来源为loginName
            }
        });
    </script>
</body>

</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() {//当点击登录的时候onclick调用function中的login
      //ajax请求包含路径类型，访问成功...，访问失败.....
      //格式   $.ajax({})  括号里面是一个对象
      $.ajax({
        url:"/user/login",//这里才是真正的调用后端
        type:"post",
        data:{  // data接收参数
          userName: $("#userName").val(),
          password: $("#password").val()
        },//以上是发送请求,响应成功

        //回调函数function内部有一个内置的参数用来接收后端的响应
        success:function (result){//result参数接收响应结果
          if(result){
            location.href = "/index.html"
          }else{
            alert("账号密码有误");//弹框
          }
        }


      })
    
    }

  </script>
</body>

</html>

四：运行测试结果

多次刷新http://127.0.0.1:8080/index.html发现依然可以获取到登录⽤⼾如果重启服务器,则登录⼈显⽰:空

Session存在内存中,如果不做任何处理,默认服务器重启,Session数据就丢失了

五：计算器项目实现

1：需求

输⼊两个整数,点击"点击相加"按钮,显⽰计算结果

2：准备工作

把前端代码引入项目中

前端代码如下

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

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title></head><body>

     <form action="calc" method="post">

        <h1>计算器</h1>

        数字1：<input name="num1" type="text"><br>

        数字2：<input name="num2" type="text"><br>

        <input type="submit" value=" 点击相加 ">

    </form></body>

</html>

3：结果如下

六：约定前后端交互接口

1：需求分析

加法计算器功能,对两个整数进⾏相加,需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果

2：定义接口

请求路径：calc/sum 请求⽅式：GET/POST 接⼝描述：计算两个整数相加

3：请求参数

七：后端代码

@RestControllerpublic class CalculateController {

    @RequestMapping("/calc")

    public String sum(Integer num1 , Integer num2){

        int sum = num1 + num2;

        return "<h1>计算的结果是：" + sum + "</h1>";

    }

}

八：运行测试

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-12-04，如有侵权请联系 cloudcommunity@tencent.com 删除

前端

数据

后端

接口

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度