【JavaEE进阶】SpringMVC(3)
- IT业界
- 2025-08-29 09:51:01
欢迎关注个人主页：逸狼
创造不易，可以点点赞吗
如有错误，欢迎指出~
返回响应 返回静态页面 //@RestController @Controller @RequestMapping("/response") public class ResponseController { @RequestMapping("/returnHtmlPage") public String returnHtmlPage(){ return "/hello.html"; } }
创建前端页面hello.html(注意要放到static文件夹下面)
@RestController = @Controller+@ResponseBody(返回数据)
如果只加@Controller,返回的是视图页面,若加上@RestController,返回的就是数据了
@ResponseBody 既是类注解,又是方法注解,
加在类上,该类的所有方法都 返回数据,加在方法上,该方法 返回数据,其他方法不受影响如果⼀个类的⽅法⾥,既有返回数据的,⼜有返回⻚⾯的,就把 @ResponseBody 注解添加到对应的⽅ 法上即可.
@Controller public class IndexController { @RequestMapping("/index") public Object index(){ return "/index.html"; } @ResponseBody @RequestMapping("/returnData") public String returnData(){ return "该⽅法返回数据"; } }如果将第二个方法returnDate中的注解@ResponseBody去掉,前端会报404的错误,因为程序会认为返回的是一个html页面,所以会在static文件夹找,没有找到就会报错
返回Html代码后端数据中如果有html代码,会被浏览器解析
//返回Html的代码 @ResponseBody @RequestMapping("/returnHtml") public String returnHtml(){ return "<h1>returnHtml</h1>"; }通过Fiddler观察响应结果, Content-Type 为 text/html
响应中的Content-Type常⻅取值有以下⼏种:
text/html :body数据格式是HTMLtext/css :body数据格式是CSSapplication/javascript :body数据格式是JavaScriptapplication/json :body数据格式是JSON 返回json数据 //返回json @ResponseBody @RequestMapping("/returnJson") public User returnJson(){ User user=new User(); user.setName("zhangsan"); user.setAge(18); return user; } 返回状态码SpringMVC会根据我们⽅法的返回结果⾃动设置响应状态码,程序员也可以⼿动指定状态码 通过SpringMVC的内置对象HttpServletResponse提供的⽅法来进⾏设置
//设置状态码 @ResponseBody @RequestMapping("/setStatus") public User returnJson(HttpServletResponse response){ User user=new User(); user.setName("zhangsan"); user.setAge(18); response.setStatus(500); return user; }状态码不影响界面的展示
设置Header //设置header @ResponseBody @RequestMapping(value="/setHeader",produces="application/json") public String setHeader(){ return "{\"success\":true}"; } 方法二设置其他Header的话,需要使⽤SpringMVC的内置对象HttpServletResponse提供的⽅法来进⾏设置
voidsetHeader(Stringname,Stringvalue)设置⼀个带有给定的名称和值的header.如果name 已经存在,则覆盖旧的值.
@ResponseBody @RequestMapping("/setHeader2") public String setHeader(HttpServletResponse response){ response.setHeader("myKey","myValue"); return "success"; } 小案例实践1:实现一个加法计算器 约定前后端交互接⼝约定"前后端交互接⼝"是进⾏Web开发中的关键环节. 接⼝⼜叫API（Application Programming Interface),我们⼀般讲到接⼝或者API，指的都是同⼀个东 西.(就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.
接⼝,其实也就是我们前⾯⽹络模块讲的的"应⽤层协议".把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书".
以实现上面的加法计数器 为例
需求分析加法计算器功能,对两个整数进⾏相加,需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算 的结果
接⼝定义 请求路径：calc/sum请求⽅式：GET/POST接⼝描述：计算两个整数相加 请求参数 响应数据 Content-Type: text/html响应内容: 计算机计算结果: 8服务器给浏览器返回计算的结果
后端服务器代码 @RestController @RequestMapping("/calc") public class CalcController { @RequestMapping("/sum") public String sum(@RequestParam("num1") Integer num1, @RequestParam("num2") Integer num2){ Integer sum=num1 + num2 ; return "计算器计算结果:"+sum; } } 前端calc.html代码 <!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>要记得将前端代码放到static文件夹下
小案例实践2:⽤⼾登录 需求分析⽤⼾输⼊账号和密码, 后端进⾏校验密码是否正确
1. 如果不正确,前端进⾏⽤⼾告知
2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾
3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息
校验接口 接口定义 请求路径：/user/login请求⽅式：POST接⼝描述：校验账号密码是否正确 响应数据 Content-Type: text/html响应内容: true //账号密码验证成功false//账号密码验证失败 后端代码实现 @RequestMapping("/user") @RestController public class UserController { @RequestMapping(value="/login",method= RequestMethod.POST) public Boolean login(String userName, String password, HttpSession session){//如果有session则返回,没有就创建 // if(userName==null || "".equals(userName)){//将常量写在前面,防止userName为空,会报空指针异常 // return false; // } //如果用户名和密码两者有一个为空, if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){ return false; } //不为空,校验账号和密码是否正确 if("admin".equals(userName) && "admin".equals(password)){ //登入成功,要设置session,把⽤⼾名存储在Session中 session.setAttribute("userName",userName); return true; } return false; //尽可能少些嵌套 } 查询用户登入接口 接口定义 请求路径：/user/getLoginUser请求⽅式：GET接⼝描述：查询当前登录的⽤⼾ 响应数据 Content-Type: text/html响应内容: zhangsan返回当前登录的⽤⼾
后端代码实现 @RequestMapping(value="/getLoginUser",method= RequestMethod.GET) public String getLoginUser(HttpSession session){ if(session.getAttribute("userName")!= null){ return (String) session.getAttribute("userName"); } return ""; } 前端login.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <h1>用户登录</h1> 用户名：<input name="userName" type="text" id="userName"><br> 密码：<input name="password" type="password" id="password"><br> <input type="button" value="登录" onclick="login()"> <script src=" code.jquery /jquery-3.7.1.min.js"></script> <script> function login() { $.ajax({ type: "post", url: "/user/login", data: { "userName": $("#userName").val(), "password": $("#password").val() }, success: function(body){ if(body==true){ //跳转到index页面 location.href = "index.html"; }else{ //当前页面 alert("密码错误"); } } }); } </script> </body> </html> 前端index.html代码 <!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=" code.jquery /jquery-3.7.1.min.js"></script> <script> $.ajax({ type: "get", url: "/user/getLoginUser", success: function(userName){ $("#loginUser").text(userName); } }); </script> </body> </html>在浏览器中测试的结果如下
小案例实践3:留言板 需求分析后端需要提供两个服务
1. 提交留⾔:⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来
2. 展⽰留⾔:⻚⾯展⽰时,需要从后端获取到所有的留⾔信息
创建MessageInfo类
@Data//来自lombok,加上后不用写get和set方法了(自动帮助生成get和set方法) public class MessageInfo { public String from; public String to; public String message; } 接⼝定义 1. 获取全部留⾔全部留⾔信息,我们⽤List来表⽰,可以⽤JSON来描述这个List数据.接口定义
2. 发表新留⾔请求:body也为JSON格式.
后端代码实现 @RestController @RequestMapping("/message") public class MessageController { //存储留言信息 private List<MessageInfo> messageInfos=new ArrayList<>(); @RequestMapping("/getList") public List<MessageInfo> getList(){ return messageInfos; } //发表留言 @RequestMapping(value = "/publish",produces = "application/json")//设置返回结果为json public String publish(@RequestBody MessageInfo messageInfo){ if(StringUtils.hasLength(messageInfo.getFrom()) && StringUtils.hasLength(messageInfo.getTo()) && StringUtils.hasLength(messageInfo.getMessage())){ messageInfos.add(messageInfo); return "{\"ok\":1}"; } //发布失败 return "{\"ok\":0}"; } } 前端代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>留言板</title> <style> .container { width: 350px; height: 300px; margin: 0 auto; /*水平方向居中*/ /* border: 1px black solid; */ text-align: center; } .grey { color: grey; } .container .row { width: 350px; height: 40px; display: flex; justify-content: space-between; align-items: center; } .container .row input { width: 260px; height: 30px; } #submit { width: 350px; height: 40px; background-color: orange; color: white; border: none; margin: 10px; border-radius: 5px; font-size: 20px; } </style> </head> <body> <div class="container"> <h1>留言板</h1> <p class="grey">输入后点击提交, 会将信息显示下方空白处</p> <div class="row"> <span>谁:</span> <input type="text" name="" id="from"> </div> <div class="row"> <span>对谁:</span> <input type="text" name="" id="to"> </div> <div class="row"> <span>说什么:</span> <input type="text" name="" id="say"> </div> <input type="button" value="提交" id="submit" onclick="submit()"> <!-- <div>A 对 B 说: hello</div> --> </div> <script src=" code.jquery /jquery-3.7.1.min.js"></script> <script> getList(); function getList() { $.ajax({ type: "get", url: "/message/getList", success: function (messages) { for (let msg of messages) { let html = "<div>" + msg.from + " 对 " + msg.to + " 说: " + msg.message + "</div>"; $(".container").append(html); } } }); } function submit() { let from = $("#from").val(); let to = $("#to").val(); let say = $("#say").val(); if (from == "" || to == "" || say == "") { alert("请检查输入内容"); return; } //检验完成之后, 发起后端请求 $.ajax({ url: "/message/publish", type: "post", // 设置Request ContentType contentType: "application/json", // 将对象转为json data: JSON.stringify({ from: from, to: to, message: say }), success: function (result) { if (result.ok == 1) { //添加成功 alert("添加成功"); let html = "<div>" + from + " 对 " + to + " 说: " + say + "</div>"; $(".container").append(html); $(":text").val(""); } else { //失败 alert("添加失败"); } } }); } </script> </body> </html> 引入lombokLombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发.
lombok通过⼀些注解的⽅式,可以帮助我们消除⼀些冗⻓代码,使代码看起来简洁⼀些
在pom文件里加上lombok依赖
<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>【JavaEE进阶】SpringMVC(3)由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【JavaEE进阶】SpringMVC(3)”
