文章目录
-
- 一、加法计算器
-
- [1.1 约定前后端交互接口](#1.1 约定前后端交互接口)
- [1.2 服务端代码](#1.2 服务端代码)
- [1.3 运行测试](#1.3 运行测试)
- 二、用户登录
-
- [2.1 约定前后端交互接口](#2.1 约定前后端交互接口)
- [2.2 服务端代码](#2.2 服务端代码)
- [2.3 运行测试](#2.3 运行测试)
- 三、留言板
-
- [3.1 约定前后端交互接口](#3.1 约定前后端交互接口)
- [3.2 服务端代码](#3.2 服务端代码)
-
- [3.2.1 引入Lombok依赖](#3.2.1 引入Lombok依赖)
- [3.2.2 Lombok 使用](#3.2.2 Lombok 使用)
- [3.2.3 后端代码实现](#3.2.3 后端代码实现)
- [3.3 运行测试](#3.3 运行测试)
- [结语 | 岁末祝福](#结语 | 岁末祝福)
一、加法计算器
需求：输入两个整数，点击" 点击相加 "按钮，显示计算结果
1.1 约定前后端交互接口
接口又被称为api，两种叫法指的都是同一种东西。是指应用程序对外提供的服务的描述。就是允许客户端给服务器发送哪些http请求，并且每种请求获取什么样的http响应。将接口约定的内容写在文档上，就是" 接口文档 "，接口文档也可以理解为是应用程序的" 操作说明书 "。
- 需求分析
加法计算器功能，对两个整数进行相加，需要对客户端提供参与计算的两个数，服务端返回这两个数计算的结果。 - 接口定义
| 请求路径 | calc/sum |
|---|---|
| 请求方式 | GET/POST |
| 接口描述 | 计算两个整数相加 |
- 请求参数
| 参数名 | 类型 | 是否必须 | 备注 |
|---|---|---|---|
| num1 | Integer | 是 | 参与计算的第一个数 |
| num2 | Integer | 是 | 参与计算的第二个数 |
- 响应数据
| Content-Type | text/html |
|---|---|
| 响应内容 | 计算机计算结果：sum |
1.2 服务端代码
java
@RestController
@RequestMapping("/calc")
public class CalcController {
@RequestMapping("/sum")
public String sum(@RequestParam Integer num1,@RequestParam Integer num2){
Integer sum = num1 + num2;
return "计算机计算结果: " + sum;
}
}@RequestParam 使用该注解确保参数不为空。
1.3 运行测试
接口测试：
测试工具发现服务端接口没有问题，使用页面测试：
二、用户登录
需求：用户输入账号和密码，后端进行校验密码是否正确
- 如果不正确，前端进行用户告知
- 如果正确，跳转到首页。首页显示当前登录用户
- 后续再访问首页，可以获取到登录用户信息
2.1 约定前后端交互接口
- 需求分析
对于服务端只需要提供两个功能：
登录页面：通过账号和密码，检验输入的账号密码是否正确，并告知前端。
首页：告知前端当前登录用户。如果当前已有用户登录，返回登录的账号，如果没有，返回空。
（1）接口定义
- 校验接口
| 请求路径 | user/login |
|---|---|
| 请求方式 | POST |
| 接口描述 | 校验账号密码是否正确 |
- 请求参数
| 参数名 | 类型 | 是否必须 | 备注 |
|---|---|---|---|
| userName | String | 是 | 校验的账号 |
| password | String | 是 | 校验的密码 |
- 响应数据
- Content-Type：text/html
- 响应内容：
true//账号密码验证成功false//账号密码验证失败
（2）查询登录用户接口
- 接口定义
| 请求路径 | user/getLoginUser |
|---|---|
| 请求方式 | GET |
| 接口描述 | 查询当前登录的用户 |
- 无请求参数
- 响应数据
- Content-Type：text/html
- 响应内容：例：zhangsan
2.2 服务端代码
- 校验接口
java
@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/login")
public Boolean login(String userName, String password, HttpSession session){
//参数校验：账号密码是否为空
if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
return false;
}
//判断账号和密码是否正确
//TODO name=admin,password=admin时正确
if("admin".equals(userName) && "admin".equals(password)){
session.setAttribute("userName",userName);
return true;
}
return false;
}
}账号和密码现在为直接写死的状态。
StringUtilshasLength() 是Spring提供的一个工具方法,判断字符串是否有值
字符串为null或者" "时,返回false,其他返回true。
- 查询登录用户接口
java
@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/getUserLogin")
public String getUserLogin(HttpSession session){
String userName = (String) session.getAttribute("userName");
return userName==null?"未登录":userName;
}
}2.3 运行测试
测试工具验证后端接口：
发现登录成功且发送get请求获取当前用户正确。使用前端页面验证。
多次刷新页面发现登录人依旧是admin，但重启服务器登陆人为空，session 存储在内存中，若不做任何处理，默认服务器重启时，数据丢失。
三、留言板
- 需求：
输入留言信息，点击提交，后端将数据存储。
页面展示输入的留言的信息。界面如下
3.1 约定前后端交互接口
- 后端提供两个服务：
获取留言：用户提交留言信息，后端将留言信息存储起来。
提交留言：后端将留言信息显示到前端界面。
- 接口定义，获取全部留言
后端存储留言在内存中，使用List集合存储。前端获取响应可以用JSON来描述这个List数据。
| 请求路径 | messagewall/getList |
|---|---|
| 请求方式 | GET |
| 接口描述 | 获取后端留言信息 |
响应：JSON形式
- 发表新留言
| 请求路径 | messagewall/publish |
|---|---|
| 请求方式 | POST |
| 接口描述 | 提交留言信息给后端 |
发送请求正文也为JSON格式，和上述一样。
3.2 服务端代码
3.2.1 引入Lombok依赖
后端将message封装为对象为参数接收前端的JSON数据，并且要使用注解 @RequestBody 。封装为对象就需要有属性的get和set方法，手动添加比较麻烦，此时引入一个依赖就非常轻松。
- Lombok是一个Java工具库，通过添加这个注解方式，可以简化开发，引入方式：在pom文件中引入
xml
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>3.2.2 Lombok 使用
java
@Data
public class MessageInfo {
private String from;
private String to;
private String message;
}使用 @Data 注解可以自动包含getter/setter/toString等等方法。
还提供了一些细颗粒度的注解：
| 注解 | 作用 |
|---|---|
| @Getter | 自动添加 getter 方法 |
| @Setter | 自动添加 setter 方法 |
| @ToString | 自动添加 toString 方法 |
| @EqualsAndHashCode | 自动添加 equals 和 hashCode 方法 |
| @NoArgsConstructor | 自动添加无参构造方法 |
| @AllArgsConstructor | 自动添加全属性构造方法，顺序按照属性的定义顺序 |
| @NonNull | 属性不能为 null |
| @RequiredArgsConstructor | 自动添加必需属性的构造方法，final + @NonNull 的属性为必需 |
而 @Data 为上述所有注解的总和，也就是添加@Data方法，上述所有方法都全部包含。
3.2.3 后端代码实现
MessageInfo 对象类
java
@Data // 自动生成get/set方法等
//@Getter
//@Setter
public class MessageInfo {
private String from;
private String to;
private String message;
}接口类：
java
@RestController
@RequestMapping("/message")
public class MessageController {
private List<MessageInfo> messageInfoList = new ArrayList<>();
@RequestMapping("/publish")
public Boolean publish(@RequestBody MessageInfo messageInfo,HttpSession Session){
if(!StringUtils.hasLength(messageInfo.getFrom())
|| !StringUtils.hasLength(messageInfo.getTo())
|| !StringUtils.hasLength(messageInfo.getMessage())){
return false;
}
messageInfoList.add(messageInfo);
return true;
}
@RequestMapping("/getList")
public List<MessageInfo> getList(){
return messageInfoList;
}
}3.3 运行测试
测试工具测试接口：
此时验证接口全部正确，使用前端页面验证：
此时不断刷新页面数据也不会丢失，但数据是在内存中，一旦服务器重启，数据就丢失了。
结语 | 岁末祝福
本文围绕加法计算器、用户登录、留言板三个典型场景，从前后端交互接口约定、服务端代码实现到运行测试展开了完整讲解，其中留言板模块还补充了 Lombok 依赖引入与注解使用的实操细节。这些案例覆盖了后端开发中接口设计、代码编写、工具优化等核心环节，既体现了基础开发流程的规范性，也展示了 Lombok 这类工具对开发效率的提升作用。
这篇博文发布恰逢 2025 年岁末，祝愿各位在新的一年里技术深耕不辍，开发之路步履不停，将所学所练转化为实际成果，在编程领域收获更多成长与突破！