当前位置：首页 > news >正文

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

news 2025/10/15 6:43:46

加法计算器

需求分析

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

接口定义与请求的参数

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

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

后端代码

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

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

前端代码

<!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中没有用户名,则用户没有登陆过.

@RestController
@RequestMapping("/user")
public class Login {@RequestMapping("/login")public boolean login(String userName, String password,HttpSession session) {//判断账号密码是否为空if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {//为空 返回falsereturn false;}//判断账号密码是否正确,这里账号密码都取adminif(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 "";}
}

前端代码

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

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