Spring MVC 响应处理：页面、数据与状态配置详解
欢迎 👍点赞 ➕关注 ❤️收藏 💬评论
目录
🍓 @ResponseBody和@RestController的区别
🍋响应
🍊定义
响应（Response）是接收方（服务器、服务或设备）针对发送方（客户端）发起的“请求”所返回的反馈信息。
🍊返回静态页面
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我是index页面</h1> </body> </html>代码：
@RestController @RequestMapping("response") public class ResponseController { @RequestMapping("/1") public String method1(){ return "/index.html"; } }结果：咦？这结果怎么不是我们想要的页面？为什么会这样？那要怎么修改？
这个代码的问题在于@RestController会将返回值直接作为响应体。这里我们需要用到@Controller。
为什么呢？
@Controller：@Controller是承接http请求，完成视图解析，方法返回的字符串会被视图解析器处理，找到对应的页面文件，响应给前端。
@RestController：是@ResponseBody+@Controller的组合注解，核心是直接返回数据，而不是视图，不会做视图解析流程。
那这样就可以了吗
正确代码如下：
@Controller @RequestMapping("response") public class ResponseController { @RequestMapping("/1") public String method1(){ return "/index.html"; } }
🍋返回数据：@ResponseBody
@ResponseBody：他主要用于将方法的返回值直接写入http响应体中，而不是将其解析为视图名称去进行视图跳转。简单来说，就是把你要返回的东西直接原样发给前端，不会当成路径页面瞎找。
@RequestMapping("/2") @ResponseBody public String method2(){ return "返回数据"; }
如果没有加@ResponseBody，结果如下，有人可能会疑问，那为什么我返回静态页面第一个错误的代码，也可以返回数据。因为第一个错误代码里面使用的是@RestController注解,核心是直接返回数据。
那@ResponseBody和@RestController又有什么区别？
🍓 @ResponseBody和@RestController的区别
| 对比 | @RestController | @ResponseBody |
| 作用范围 | 只能用在类上 | 只能用在方法上 |
| 功能本质 | 相当于@ResponseBody+@Controller的组合，标记一个类，表明该类是一个控制器 | 单独的注解，仅控制方法返回作为响应 |
| 使用场景 | 整个类都需要返回数据，一次注解，全类方法生效 | 类用@Controller时，个别方法需要返回数据，逐个方法标记 |
| 视图解析 | 不会走视图解析，直接返回数据 | 不会走视图解析，直接返回数据 |
@RestController就像老师在班群里面通知消息，而@ResponseBody相当于老师个别针对几个同学私信通知消息。
返回HTML片段代码
@RequestMapping("/4") @ResponseBody public String method4(){ return "<h1>我是一级标题<h1>"; }看一下结果
不是说好的，@ResponseBody是原样返回字符串吗，为什么这次不是！！！
这里解释一下：是因为浏览器会自动解析html，造成一种“不是原样”返回的错觉。
浏览器收到响应后，发现响应头里的Content-type是text/html（Spring自动推断的），就会按照html的规则进行渲染。
如果想让浏览器不解析，直接显示原样，应该怎么写？
这里需要设置Content-type
可以强制让响应方法变为纯文本，给方法加produces=“text/plain”
代码：
@RequestMapping(value = "/5",produces = "text/plain") @ResponseBody public String method5(){ return "<h1>我是一级标题<h1>"; }结果：
🍋返回JSON
UserInfo
public class UserInfo { private String name; private int age; public UserInfo(){ } public UserInfo(String name, int age) { this.name = name; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } @Override public String toString() { return "UserInfo{" + "name='" + name + '\'' + ", age=" + age + '}'; } }返回json对象代码：
@RequestMapping("/6") @ResponseBody public UserInfo method6(){ UserInfo userInfo=new UserInfo("lisi",13); return userInfo; }结果：
🍋状态码
🍍状态码的定义
状态码是http协议中，服务器响应请求时返回的三位数数字，用来快速告知客服端“请求处理结果”，就是请求结果的快捷反馈。
分类：
- 1xx:服务器已收到请求，需继续处理（如100Continue让客户端继续发数据）
- 2xx：请求成功（200 OK表示请求完成，201 Created表示资源创建成功）
- 3xx：需客户端进一步操作（301永久重定向，302临时重定向）
- 4xx：客户端请求有误（400请求语法错误、401需登入、403没权限、404资源找不到）
- 5xx：服务器处理出错（500服务器内部故障、503服务器忙/维护中）
🍍设置状态码
代码：
@RequestMapping("/7") @ResponseBody public String method7(HttpServletResponse response){ response.setStatus(401); return "设置状态码成功"; }结果：
🍋设置header
代码：
@RequestMapping("/8") @ResponseBody public String method8(HttpServletResponse response){ response.setHeader("headerkey","headervalue"); return "设置header成功"; }结果
🍋综合性练习
练习1：
🍉加法计算器
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="calc/sum" method="post"> <h1>计算器</h1> 数字1：<input name="num1" type="text"><br> 数字2：<input name="num2" type="text"><br> <input type="submit" value=" 点击相加 "> </form> </body> </html>前后端交互接口
服务器代码：
@RestController @RequestMapping("/calc") public class CalcController { @RequestMapping("/sum") public String method8(Integer num1,Integer num2){ //如果有其中一个没有参数，直接返回 if(num1 == null || num2 ==null){ return "参数不合法"; } Integer sum=num1+num2; return "<h1>计算机结果：" + sum + "<h1>"; } } 
练习2：
🍉用户登入
我们需要一个前端的输入信息登入界面，然后向后端发送请求进行校验，查询当前账号是否正确。随后在有一个登入状态，展示当前登入的用户名。
1.前端登入页
功能:提供输入框页面，以及通过点击按钮像后端发送请求，进行前后端的交互
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <!--页面--> <h1>用户登录</h1> 用户名：<input name="userName" type="text"><br> 密码：<input name="password" type="password"><br> <input type="button" value="登录" onclick="login()"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script> <script> <!--前后端进行交互--> function login(){ //获取前端数据发送给后端，到时候后端进行校验 //1.请求方式 //2.后端地址 //3.前端数据 //使用jQuery的ajax方法发送请求 $.ajax({ //请求类型 type: "post", //请求后端接口地址 url: "/user/login", //要发送到后端的数据 data: { //获取输入框的值 userName: $("#userName").val(), password: $("#password").val() }, //返回后端校验后的结果 //成功跳转页面 //失败，进行错误提示 //http请求成功的回调函数 //success：是ajax专门为成功响应设计的回调，会自动接收后端返回的正常结果 success: function(result){ //判断后端返回的结果 if(result){ //如果登入成功，跳转页面 location.href="index2.html"; }else{ //否则，返回错误提示 alert("密码错误"); } } }) } </script> </body> </html>2.后端控制器
功能：提供两个接口，进行接口的校验，查询当前的登入状态。
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RequestMapping("/user") @RestController public class UserController { @RequestMapping("/login") //校验，记录登入状态 public Boolean login(String userName, String password, HttpSession session){ //参数校验：校验用户名和密码是否为空或者不是空字符串 //写法一： // if(userName == null || userName == "" || password == null || password == "" ){ // return false; // } //写法二： //StringUtils.hasLength()：校验用户名和密码是否为空或者不是空字符串 if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){ return false; } //校验用户名和密码是否正确 //这里是硬编码，固定用户名为admin和密码为123456，实际数据要从数据库中查询验证 if("admin".equals(userName) && "123456".equals(password)){ //如果校验成功，将用户名存储到会话中 session.setAttribute("userName",userName); return true; } return false; } //查询当前登入状态 @RequestMapping("/getLoginUser") public String getLoginUser(HttpSession session){ //获取会话中存储的值 //如果用户未登入，返回null //如果用户已登入，返回用户名 String userName=(String) session.getAttribute("userName"); return userName; } }
前端首页
功能：查询登入状态，展示用户的登入名
<!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></span> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script> <script> $.ajax({ url: "/user/getLoginUser", type: "get", //请求成功后的回调函数 success: function(userName){ //将结果填充到页面 $("#loginUser").text(userName); } }); </script> </body> </html>
