SpringMVC练习：加法计算器与登录

加法计算器

需求分析

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

接口定义与请求的参数

请求路径:calc/add,请求方式:GET/POST.

请求参数:num1:类型Integer,必传参数;num2:类型Integer,必传参数.

后端代码

仅需要接收前端传来的两个num1与num2参数,然后将计算机过返回即可.

java 复制代码

@RestController
@RequestMapping("/calc")
public class Calc {
    @RequestMapping("/add")
    public String add(Integer num1, Integer num2) {
        Integer sum = num1 + num2;
        return "<h1>计算结果:"+sum+"</h1>";
    }
}

前端代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>加法计算器</title>
</head>
<body>
<form action="calc/add" method="post">
    <h1>计算器</h1>
    数字1：<input name="num1" type="text"><br>
    数字2：<input name="num2" type="text"><br>
    <input type="submit" value=" 点击相加">
</form>
</body>

运行结果:

访问127.0.0.1:8080/calc.html,输入要计算的数字,点击提交.

结果符合预期.

用户登录

需求分析

用户输入账号与密码,后端检验账号与密码是否正确.

如果正确,跳转页面.如果不正确,提示账号或密码错误.如果用户已登录,则返回用户已登录.

接口定义与请求的参数

登录请求路径:/user/login,请求方式POST.

登录请求参数:userName:类型String,必传参数;password:类型String,必传参数.

查询用户是否登录路径:/user/getLoginUser

后端代码

两个方法,一个用于登录,一个用于查询用户是否登录.判断用户是否登录方法:在session中添加登陆过的用户的用户名,如果查询session中没有用户名,则用户没有登陆过.

java 复制代码

@RestController
@RequestMapping("/user")
public class Login {
    @RequestMapping("/login")
    public boolean login(String userName, String password,HttpSession session) {
        //判断账号密码是否为空
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            //为空 返回false
            return false;
        }
        //判断账号密码是否正确,这里账号密码都取admin
        if(userName.equals("admin") && password.equals("admin")) {
            //设置session,方便后续查询用户是否登录
            session.setAttribute("userName", "admin");
            return true;
        }
        return false;
    }

    @RequestMapping("/getLoginUser")
    public String getLoginUser(@SessionAttribute("userName") String userName) {
        if(StringUtils.hasLength(userName)) {
            //用户已登录
            return userName;
        }
        //用户未登录
        return "";
    }
}

前端代码

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

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({
            type: "post",
            url: "/user/login",
            data: {
                "userName": $("#userName").val(),
                "password": $("#password").val()
            },
            success: function (result) {
                if (result) {
                    location.href = "/index.html"
                } else {
                    alert("账号或密码有误.");
                }
            }
        });
    }

</script>
</body>

</html>

运行结果

访问页面,输入账号密码,观察正确或错误的提示,并再次访问页面.

输入错误的账号密码.

输入正确的账号密码:

离开网页再次访问: