Spring MVC 响应处理页面、数据与状态配置的方法
作者:♡喜欢做梦
响应
定义
响应(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">
数字2:<input name="num2" type="text">
<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" id="userName">
密码:<input name="password" type="password" id="password">
<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" rel="external nofollow" ;
}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 id="loginUser"></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>
到此这篇关于Spring MVC 响应处理页面、数据与状态配置的方法的文章就介绍到这了,更多相关Spring MVC 数据和页面响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
