两个简单的案例，基于spring框架制作
计算器
后端代码
首先写注解@RestController，表示之后返回的是数据，然后使用@RequestMapping标志映射的地址，判断的逻辑就很简单了，进行简单的加法，然后就放回即可
前端代码
前端代码也很简单，只给HTML，需要加样式的可以自己加，这里使用了表单的方法，action告诉浏览器，如果后续有button按钮，就按照这个地址去提交即可
注意这里的参数名称必须和后端的完全一样，如果不一样，无法提交成功，或者后端使用注解@Requesparam才可以
运行示例图
总结
- 注意这个html网页需要放在resource的static中，这样才可以通过网页去访问，如果是直接访问是无法做到这个效果的
- 需要注意前后端的变量名字必须一样，否则就会传参失败
登录界面
后端代码
后端代码
登录代码的逻辑也很简单，就是判断不能为空就行，这里可以使用StringUtils这个工具类，判断内容为不为空就可以了
关键点
HttpServletRequest request
我们知道，在http请求的报文中，存在cookie，他的作用就是类似于身份证，让服务器知道后续的人是谁，这里我们使用request去获取到服务器的session，因为我们第一次去，很明显服务器没有存储关于我们的信息，所以这个时候会创建一个空的对象的sessionid给我们，然后后续我们对这个sessionId的写入都会直接传到服务器
后续这里的代码就简单了，因为前面我们存储了对应session，所以这里我们可以通过getsession获取到对应的useName。
前端代码
这里涉及到一个核心的东西ajax异步编程
AJAX = Asynchronous JavaScript And XML（异步 JavaScript 和 XML）
异步编程，不进行网页的跳转，在当前页面等待后端处理完数据，然后再进行操作
Ajax的语法：$.ajax({ }),内部的键值对使用，进行分割，键和值之间使用：分割包含的内容有访问的类型，url，数据，
Type，请求的类型
url：提交的连接是哪里
data：和后端的参数名字必须一样
success：后端返回参数之后进行的操作
跳转页面
这个页面也是涉及到ajax异步编程，一样的需要表名这个里面有啥，type传输方式，url传输的路径，success接收到后端参数之后需要进行的事情
总结
这两个小项目整体难度不算大，需要掌握的是如何进行前后端的联动，如何进行异步编程，如何进行传参，如何保持session
源码
登录前后端代码
javascript
body>
<h1>用户登录</h1>
<div>
<span>用户名：</span>
<input name="userName" type="text" id="userName"><br>
<span>密码：</span>
<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()">
</div>
<script src="JS/jquery-3.7.1.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>
<body>
<div class="user-info-container">
<span class="user-label">登录人:</span>
<span id="loginUser"></span>
</div>
<script src="JS/jquery-3.7.1.js"></script>
<script>
$.ajax({
url:"/user/getLoginUser",
type:"get",
success:function(userName){
$("#loginUser").text(userName)
}
})
</script>
javascript
package com.example.demo;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* Created with IntelliJ IDEA.
* Description:
* User: zhany
* Date: 2025-12-25
* Time: 17:26
*/
@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/login")
public boolean login(String userName, String passWord ,HttpServletRequest request){
if (!StringUtils.hasLength(userName)|| !StringUtils.hasLength(passWord)) {
return false;
}
if ("admin".equals(userName)&& "admin".equals(passWord)) {
HttpSession session = request.getSession();
session.setAttribute("userName",userName);
return true;
}
return false;
}
@RequestMapping("/getLoginUser")
public String loginUser(HttpSession session){
String userName = (String) session.getAttribute("userName");
return userName;
}
}计算器前后端代码
java
<body>
<form action="calc/sum" method="post">
<h1>计算器</h1>
<div>
<label for="num1">数字1：</label>
<input name="num1" type="text" id="num1">
</div>
<div>
<label for="num2">数字2：</label>
<input name="num2" type="text" id="num2">
</div>
<input type="submit" value=" 点击相加 ">
</form>
</body>
c++
@RestController
@RequestMapping("/calc")
public class CalController {
@RequestMapping("/sum")
public String cal(Integer num1,Integer num2){
if (num1 == null|| num2 == null) {
return "输入的数据有误";
}
Integer sum = num1 + num2;
return "机器计算结果："+sum;
}
}