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

发布于：2025-08-31 ⋅ 阅读:(22) ⋅ 点赞:(0)

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

我的主页：optimistic_chen

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

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

文章目录

响应

返回静态页面

创建前端页面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 {
    @Autowired
    private 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 {
    @Autowired
    private 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

在这里插入图片描述
在这里插入图片描述

完结

点一个免费的赞并收藏起来~
点点关注，避免找不到我~
我的主页：optimistic_chen我们下期不见不散 ~ ~ ~

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布