鹤岗市网站建设_网站建设公司_PHP_seo优化

一、加法计算器

需求：输入两个整数，点击" 点击相加 "按钮，显示计算结果

1.1 约定前后端交互接口

接口又被称为api，两种叫法指的都是同一种东西。是指应用程序对外提供的服务的描述。就是允许客户端给服务器发送哪些http请求，并且每种请求获取什么样的http响应。将接口约定的内容写在文档上，就是" 接口文档 “，接口文档也可以理解为是应用程序的” 操作说明书 "。

1. 需求分析
   加法计算器功能，对两个整数进行相加，需要对客户端提供参与计算的两个数，服务端返回这两个数计算的结果。
2. 接口定义

3. 请求参数

4. 响应数据

1.2 服务端代码

@RestController@RequestMapping("/calc")publicclassCalcController{@RequestMapping("/sum")publicStringsum(@RequestParamIntegernum1,@RequestParamIntegernum2){Integersum=num1+num2;return"计算机计算结果: "+sum;}}

@RequestParam 使用该注解确保参数不为空。

1.3 运行测试

接口测试：

测试工具发现服务端接口没有问题，使用页面测试：

二、用户登录

需求：用户输入账号和密码，后端进行校验密码是否正确

1. 如果不正确，前端进行用户告知
2. 如果正确，跳转到首页。首页显示当前登录用户
3. 后续再访问首页，可以获取到登录用户信息

2.1 约定前后端交互接口

• 需求分析
  对于服务端只需要提供两个功能：
  登录页面：通过账号和密码，检验输入的账号密码是否正确，并告知前端。
  首页：告知前端当前登录用户。如果当前已有用户登录，返回登录的账号，如果没有，返回空。
  （1）接口定义

1. 校验接口

2. 请求参数

3. 响应数据

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

（2）查询登录用户接口

1. 接口定义

2. 无请求参数
3. 响应数据

• Content-Type：text/html
• 响应内容：例：zhangsan

2.2 服务端代码

1. 校验接口

@RestController@RequestMapping("/user")publicclassUserController{@RequestMapping("/login")publicBooleanlogin(StringuserName,Stringpassword,HttpSessionsession){//参数校验：账号密码是否为空if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){returnfalse;}//判断账号和密码是否正确//TODO name=admin,password=admin时正确if("admin".equals(userName)&&"admin".equals(password)){session.setAttribute("userName",userName);returntrue;}returnfalse;}}

账号和密码现在为直接写死的状态。
StringUtilshasLength() 是Spring提供的一个工具方法,判断字符串是否有值
字符串为null或者" "时,返回false,其他返回true。

2. 查询登录用户接口

@RestController@RequestMapping("/user")publicclassUserController{@RequestMapping("/getUserLogin")publicStringgetUserLogin(HttpSessionsession){StringuserName=(String)session.getAttribute("userName");returnuserName==null?"未登录":userName;}}

2.3 运行测试

测试工具验证后端接口：

发现登录成功且发送get请求获取当前用户正确。使用前端页面验证。

多次刷新页面发现登录人依旧是admin，但重启服务器登陆人为空，session 存储在内存中，若不做任何处理，默认服务器重启时，数据丢失。

三、留言板

• 需求：
  输入留言信息，点击提交，后端将数据存储。
  页面展示输入的留言的信息。界面如下
  

3.1 约定前后端交互接口

• 后端提供两个服务：
  获取留言：用户提交留言信息，后端将留言信息存储起来。
  提交留言：后端将留言信息显示到前端界面。

1. 接口定义，获取全部留言
   后端存储留言在内存中，使用List集合存储。前端获取响应可以用JSON来描述这个List数据。

响应：JSON形式

2. 发表新留言

发送请求正文也为JSON格式，和上述一样。

3.2 服务端代码

3.2.1 引入Lombok依赖

后端将message封装为对象为参数接收前端的JSON数据，并且要使用注解 @RequestBody 。封装为对象就需要有属性的get和set方法，手动添加比较麻烦，此时引入一个依赖就非常轻松。

• Lombok是一个Java工具库，通过添加这个注解方式，可以简化开发，引入方式：在pom文件中引入

<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>

3.2.2 Lombok 使用

@DatapublicclassMessageInfo{privateStringfrom;privateStringto;privateStringmessage;}

使用 @Data 注解可以自动包含getter/setter/toString等等方法。
还提供了一些细颗粒度的注解：

而 @Data 为上述所有注解的总和，也就是添加@Data方法，上述所有方法都全部包含。

3.2.3 后端代码实现

MessageInfo 对象类

@Data// 自动生成get/set方法等//@Getter//@SetterpublicclassMessageInfo{privateStringfrom;privateStringto;privateStringmessage;}

接口类：

@RestController@RequestMapping("/message")publicclassMessageController{privateList<MessageInfo>messageInfoList=newArrayList<>();@RequestMapping("/publish")publicBooleanpublish(@RequestBodyMessageInfomessageInfo,HttpSessionSession){if(!StringUtils.hasLength(messageInfo.getFrom())||!StringUtils.hasLength(messageInfo.getTo())||!StringUtils.hasLength(messageInfo.getMessage())){returnfalse;}messageInfoList.add(messageInfo);returntrue;}@RequestMapping("/getList")publicList<MessageInfo>getList(){returnmessageInfoList;}}

3.3 运行测试

测试工具测试接口：

此时验证接口全部正确，使用前端页面验证：

此时不断刷新页面数据也不会丢失，但数据是在内存中，一旦服务器重启，数据就丢失了。

结语 | 岁末祝福

本文围绕加法计算器、用户登录、留言板三个典型场景，从前后端交互接口约定、服务端代码实现到运行测试展开了完整讲解，其中留言板模块还补充了 Lombok 依赖引入与注解使用的实操细节。这些案例覆盖了后端开发中接口设计、代码编写、工具优化等核心环节，既体现了基础开发流程的规范性，也展示了 Lombok 这类工具对开发效率的提升作用。

这篇博文发布恰逢 2025 年岁末，祝愿各位在新的一年里技术深耕不辍，开发之路步履不停，将所学所练转化为实际成果，在编程领域收获更多成长与突破！