当前位置：首页 > news >正文

【Java EE进阶 --- SpringBoot】Spring Web MVC(Spring MVC)（二）

news 2025/8/31 5:58:40

乐观学习，乐观生活，才能不断前进啊！！！

我的主页：optimistic_chen

我的专栏：c语言，Java,
Java EE初阶， Java数据结构

欢迎大家访问~
创作不易，大佬们点赞鼓励下吧~

文章目录

响应
- 返回静态页面
- 返回HTML代码
- 返回JSON
- 设置状态码
案例练习
- 用户登录
- - 后端代码：
  - 前端代码：
- 留言板
- - 后端代码
  - 前端代码
完结

响应

返回静态页面

创建前端页面test.html，那么Spring MVC要如何识别它是一个前端页面而不是字符串呢？
首先准备好前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>

后端返回代码：

@RequestMapping("/resp")
@RestController
public class RespController {/*返回页面return 页面*/@RequestMapping("/r1")public String returnPage(){return "/test.html";}
}

在这里插入图片描述
观察图片，我们需要的是test页面，都是浏览器返回的却是字符串，注意，这时需要我们改动一下@RestController注解

@RequestMapping("/resp")
@Controller
public class RespController {/*返回页面return 页面*/@RequestMapping("/r1")public String returnPage(){return "/test.html";}
}

在这里插入图片描述
这时我们顺利得到了前端页面，那么这两个注解有什么样的区别呢？
观察两个注解的源码：

我们@RestController注解是包含@Controller注解的；
@Controller : 定义⼀个控制器,Spring框架启动时加载,把这个对象交给Spring管理.
@ResponseBody : 定义返回的数据格式为⾮视图,返回⼀个text/html信息,也就是数据
很明显，如果只是要视图的话，只需要把@ResponseBody去掉就可以了，也就是@Controller

返回HTML代码

后端返回数据时，如果数据中有HTML代码，浏览器也会解析

    @ResponseBody@RequestMapping("/r3")public String returnHTML(){return "<h1>我是一级标题</h1>";}

在这里插入图片描述
网络中的响应格式有Content-Type,展示了响应的body数据格式。
根据Fiddler抓包发现：说明当前为html格式

返回JSON

后端方法返回一个对象

    @ResponseBody@RequestMapping(value="/r5")public UserInfo returnJson(){UserInfo userInfo=new UserInfo("zhangsan",1,1);return userInfo;}

在这里插入图片描述

观察抓包，格式为json.

设置状态码

Spring MVC会根据我们⽅法的返回结果⾃动设置响应状态码,程序员也可以⼿动指定状态码

    @ResponseBody@RequestMapping(value="/r6")public UserInfo setStatus(HttpServletResponse response){response.setStatus(200);UserInfo userInfo=new UserInfo("zhangsan",1,1);return userInfo;}

在这里插入图片描述
抓包发现，状态码正是200.

案例练习

用户登录

用户输入账号和密码后，后端进行校验；如果不正确，前端进行用户告知；如果准确，跳转页面，显示当前登录用户。

后端代码：

登录校验

    @RequestMapping("/login")public Boolean login(String userName,String password,HttpSession session){//账号或密码为空if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){return false;}//先把密码和账号写死if("admin".equals(userName)&&"admin".equals(password)){//验证成功，把用户名存在Session中session.setAttribute("userName",userName);return true;}return false;}

查询登录

@RequestMapping("getLongin")public String getLongin(HttpSession session){String userName=(String)session.getAttribute("userName");if (StringUtils.hasLength(userName)){return userName;}return "";}

前端代码：

//登录页面
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<script>function login() {$.ajax({type: "post",url: "/user/login",data: {"userName": $("#userName").val(),"password": $("#password").val()},success: function (result) {if (result) {location.href = "/index.html"} else {alert("账号或密码有误.");}}});}
</script>

在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<script>$.ajax({type: "get",url: "/user/getLongin",success: function (result) {$("#loginUser").text(result);}});
</script>

在这里插入图片描述
多次刷新，登陆人依旧存在，但是注意，Session存在内存中,如果不做任何处理,默认服务器重启,Session数据就丢失了。

留言板

输入留言信息，点击提交。
后端把数据存储起来，并且页面展示出留言信息。

后端代码

存储留言信息：
model层

package com.zc.spring.demo.model;import lombok.Data;import java.util.Date;@Data
public class MessageInfo {private String from;private String to;private String message;private Integer deleteFlag;private Date createTime;private Date updateTime;

controller层：

package com.zc.spring.demo.controller;import com.zc.spring.demo.model.MessageInfo;
import com.zc.spring.demo.service.MessageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;import java.util.List;@RequestMapping("/message")
@RestController
public class MessageController {@Autowiredprivate MessageService messageService;@GetMapping(value = "/publish")public String publish(@RequestBody MessageInfo messageInfo){if (!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())) {return "{\"ok\": 0}";}//存储留言messageService.addMessage(messageInfo);
//        messageInfoList.add(messageInfo);return "{\"ok\": 1}";}
//获取留言列表@GetMapping("/getList")public List<MessageInfo> getList(){return messageService.queryAll();}}

service层

package com.zc.spring.demo.service;import com.zc.spring.demo.mapper.MessageMapper;
import com.zc.spring.demo.model.MessageInfo;
import org.apache.ibatis.annotations.Select;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class MessageService {@Autowiredprivate MessageMapper messageMapper;public void addMessage(MessageInfo messageInfo){messageMapper.insertMessage(messageInfo);}public List<MessageInfo> queryAll(){return  messageMapper.queryAll();}
}

mapper层

package com.zc.spring.demo.mapper;import com.zc.spring.demo.model.MessageInfo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;@Mapper
public interface MessageMapper {//查询所有留言信息@Select("select * from message_info where delete_flag=0")List<MessageInfo> queryAll();//发表留言@Insert("insert into message_info (`from`, `to`, message) values (#{from}, #{to}, #{message})")Integer insertMessage(MessageInfo messageInfo);
}

前端代码

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上    $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html