【SpringBoot】从零开始全面解析SpringMVC (二)

用户11369350

发布于 2025-05-17 10:22:54

18900

代码可运行

文章被收录于专栏：Java,后端开发,网站开发,数据结构,算法分析.Java,后端开发,网站开发,数据结构,算法分析.

运行总次数：0

代码可运行

1. 关于SpringMVC 请求传递信息

1.1 传递 JSON 数据

Ⅰ JSON概念 JSON：JavaScript Object Notation 【JavaScript 对象表示法】

JSON是一种轻量级的数据交互格式. 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。-- 来自百度百科

简单来说：JSON就是一种数据格式, 有自己的格式和语法, 使用文本表示一个对象或数组的信息, 因此JSON本质是字符串. 主要负责在不同的语言中数据传递和交换. 类似于： ① 国际通用语言 - 英语. ② 中国56个民族不同地区的通用语言 - 普通话. Ⅱ JSON 与 Javascript 的关系没有关系, 只是语法相似, js开发者能更快的上手而已, 但是他的语法本身比较简单, 所以也很好学. Ⅲ JSON语法 JSON 是一个字符串，其格式非常类似于 JavaScript 对象字面量的格式.

{
 "squadName": "Super hero squad",
 "homeTown": "Metro City",
 "formed": 2016,
 "secretBase": "Super tower",
 "active": true,
 "members": [{
 "name": "Molecule Man",
 "age": 29,
 "secretIdentity": "Dan Jukes",
 "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"
 }, {
 "name": "Madame Uppercut",
 "age": 39,
 "secretIdentity": "Jane Wilson",
 "powers": ["Million tonne punch", "Damage resistance", "Superhuman r
 }, {
 "name": "Eternal Flame",
 "age": 1000000,
 "secretIdentity": "Unknown",
 "powers": ["Immortality", "Heat Immunity", "Inferno", "Teleportation
 }]
}

Ⅳ JSON的语法: 1. 数据在键值对(Key/Value) 中. 2. 数据由逗号 ’ , ’ 分隔. 3. 对象用 {} 表示. 4. 数组用 [] 表示. 5. 值可以为对象, 也可以为数组, 数组中可以包含多个对象. Ⅴ JSON的两种结构 1. 对象: 大括号 {} 保存的对象是一个无序的键值对集合. 一个对象以左括号 { 开始，右括号 } 结束。每个"键"后跟⼀个冒号 : 键值对使用逗号 , 分隔开。 2. 数组: 中括号 [] 保存的数组是值（value）的有序集合. 一个数组以左中括号 [ 开始，右中括号 ] 结束，值之间使用逗号 , 分隔。可以使用在线JSON格式化工具来进行校验和书写: JSON校验工具 . Ⅵ JSON优点 1. 简单易用: 语法简单，易于理解和编写，可以快速地进行数据交换.

2. 跨平台支持: JSON可以被多种编程语言解析和生成, 可以在不同的平台和语言之间进行数据交换和传输.

3. 轻量级: 相较于XML格式, JSON数据格式更加轻量级, 传输数据时占用带宽较小, 可以提高数据传输速度.

4. 易于扩展: JSON的数据结构灵活，支持嵌套对象和数组等复杂的数据结构，便于扩展和使用.

5. 安全性: JSON数据格式是一种纯文本格式，不包含可执行代码, 不会执行恶意代码，因此具有较高的安全性. Ⅶ 传递 JSON 数据接收 JSON 对象,需要使用 @RequestBody 注解

RequestBody: 请求正文，意思是这个注解作用在请求正文的数据绑定，请求参数必须在写在请求正文中. 使用 Postman 来发送 json 请求参数:

如果去掉@RequestBody 注解的话会怎么样? 👇

可以看到, 后端未能成功给 Student对象赋值.

1.2 获取URL中参数(@PathVariable)

path variable: 路径变量. 和字面表达的意思一样, 这个注解主要作用在请求URL路径上的数据绑定. 后端实现代码：

 @RequestMapping("/r9/{articleId}")
    public String r9(@PathVariable("articleId") Integer articleId) {
        return "接到参数,articleId:"+articleId;
    }

使用Postman 发送请求:

可以看到, 后端正确获取到了URL中的参数.

1.3 上传文件 (@RequestPart)

直接看后端代码实现:

    @RequestMapping("/r10")
    public String r10(@RequestPart("file")MultipartFile imgFile) {
        String originalFilename = imgFile.getOriginalFilename();
        return "接到文件,文件名称:"+originalFilename;
    }

使用 Postman 发送请求:

文件上传成功.

1.4 Cookie 和 Seesion

1.4.1 回顾 Cookie, 理解 Session

Ⅰ 回顾 Cookie HTTP 协议自身是属于 “无状态” 协议. “无状态” 的含义指的是:默认情况下 HTTP 协议的客户端和服务器之间的这次通信, 和下次通信之间没有直接的联系.

实际开发中, 我们很多时候是需要知道请求之间的关联关系的. 例如登陆网站成功后, 第二次访问的时候服务器就能知道该请求是否是已经登陆过了.

上图过程中的令牌通常就存储在Cookie 子段当中. 此时在服务器这边就需要记录"令牌"信息, 以及令牌对应的用户信息, 这个就是 session 机制所做的工作. 比如去医院挂号 :

1. 看病之前先挂号. 挂号时候需要提供身份证号, 同时得到了一张 “就诊卡”, 这个就诊卡就相当于患者的 “令牌”. 2. 后续去各个科室进行检查, 诊断, 开药等操作, 都不必再出示身份证了, 只要凭就诊卡即可识别出当前患者的身份. 3. 看完病了之后, 不想要就诊卡了, 就可以注销这个卡. 此时患者的身份和就诊卡的关联就销毁了. (类似于网站的注销操作). 4. 又来看病, 可以办一张新的就诊卡, 此时就得到了一个新的 “令牌”.

Ⅱ 理解 Session (会话) 服务器同一时刻收到的请求是很多的. 服务器需要清楚的区分每个请求是从属于哪个用户, 也就是属于哪个会话, 就需要在服务器这边记录每个会话以及与用户的信息的对应关系. Session是服务器为了保存用户信息而创建的一个特殊的对象. Session 的本质就是一个 “哈希表”, 存储了一些键值对结构. Key 就是SessionID, Value 就是用户信息. SessionId 是由服务器生成的一个 “唯一性字符串”, 这就是Session能够区分同一请求不同用户信息的根本原因.

Session 默认是保存在内存中的. 如果重启服务器则 Session 数据就会丢失. Ⅲ Cookie 和 Session 的区别 ① Cookie 是客户端保存用户信息的一种机制. Session 是服务器端保存用户信息的一种机制. ② Cookie 和 Session之间主要是通过 SessionId 关联起来的, SessionId 是 Cookie 和 Session 之间的桥梁. ③ Cookie 和 Session 经常会在一起配合使用. 但不是必须配合. 1. 完全可以用 Cookie 来保存一些数据在客户端. 这些数据不一定是用户身份信息, 也不一定是 SessionId. 2. Session 中的 sessionId 也不需要非得通过 Cookie/Set-Cookie 传递, 比如通过URL传递.

1.4.2 获取Cookie 和 Session

Ⅰ 获取Cookie 代码如下:

    @RequestMapping("/r11")
    public String r11(HttpServletRequest request, HttpServletResponse response) {
        //获取所有 cookie信息
        Cookie[] cookies = request.getCookies();
        //打印 cookie信息
        if(cookies != null) {
            Arrays.stream(cookies).forEach(ck -> System.out.println(ck.getName()+":"+ck.getValue()));
        }
        return "获取cookies成功";
    }

此时没有设置Cookie, 通过浏览器访问: http://127.0.0.1:8080/req/r11, 得到 Cookie为 null . 按下图提示设置 Cookie 👇

设置完成之后再次访问就可以在IDEA 上看到刚刚设置的Cookie. 👇

Ⅱ 简洁获取Cookie的方式, 使用@CookieValue注解

    @RequestMapping("/r12")
    public String r12(String ck) {
        return "cookie: " + ck;
    }

Ⅲ 获取 Session 的方式 Session是服务器端的机制, 我们需要先存储, 才能再获取. Session 也是基于HttpServletRequest 来存储和获取的.

//设置Session
    @RequestMapping("/setSess")
    public String r13(HttpServletRequest request) {
        //获取 Session 对象
        HttpSession session = request.getSession();
        if(session != null) {
            session.setAttribute("username","大帅锅");
        }
        return "session 存储成功";
    }

    //获取Session
    @RequestMapping("/getSess")
    public String r14(HttpServletRequest request) {
        //如果 session 不存在, 不会⾃动创建
        HttpSession session = request.getSession(false);
        String username = null;
        if(session != null && session.getAttribute("username") != null) {
            username = (String)session.getAttribute("username");
        }
        return "username: " + username;
    }

先设置Session

再获取 Session

上述获取Session 的方式有点麻烦, 有没有跟简单点的? 其实就是对 HttpServletRequest获取session的方法进行封装就能通过 HttpSession 直接获取.

    @RequestMapping("/getSess2")
    public String r15(HttpSession session) {
        String name = (String)session.getAttribute("username");
        return "从session中获取username: " + name;
    }

还是一样的, 先设置 Session 再获取 Session,下面只给出获取的截图👇:

为了图方便, 能不能把上述获取Session的方式进一步封装成注解? 实际上也确实有这种方式:

    @RequestMapping("/getSess3")
    public String r16(@SessionAttribute("username") String name) {
        return "从Session中获取name: "+name;
    }

通过注解 @SessionAttribute就可以获取 Session 中的任意信息.

1.5 获取Header

Ⅰ 传统获取 header 从 HttpServletRequest 中获取

    //获取header.
    @RequestMapping("/r8")
    public String r8(HttpServletRequest request) {
        String userAgent = request.getHeader("User-Agent");
        return "userAgent: "+userAgent;
    }

使用浏览器访问后，得到如下：👇

通过Fiddler观察, 获取的 User-Agent 是否正确。

Ⅱ 使用@RequestHeader注解简洁获取Header

    @RequestMapping("/r9")
    public String r9(@RequestHeader("User-Agent") String userAgent) {
        return userAgent;
    }

2. 关于SpringMVC 响应传递信息

2.1 返回静态页面

创建前端页面 index.html(注意是在resources/static 目录下)。

前端页面代码如下：

<!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>
	我是Index页面。
</body>

</html>

后端代码:

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("/res")
@RestController
public class ResponseController {
    @RequestMapping("/index")
    public String index() {
        return "/index.html";
    }
}

使用浏览器访问 http://127.0.0.1:8080/res/index

发现, 页面未正确返回, http 响应把 “/index.html” 当做了 http响应正文的数据。那Spring MVC如何才能识别出来 index.html 是一个静态页面, 并进行返回呢? 把 @RestController 改为 @Controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@RequestMapping("/res")
@Controller
public class ResponseController {
    @RequestMapping("/index")
    public String index() {
        return "/index.html";
    }
}

再次访问 http://127.0.0.1:8080/res/index

发现页面正确展示了。

@RestController 和 @Controller 有着什么样的关联和区别呢? 我们来看@RestController 的源码 👇

@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Controller
@ResponseBody
public @interface RestController {
    @AliasFor(
        annotation = Controller.class
    )
    String value() default "";
}

不难发现有如下关系： @RestController = @Controller + @ResponseBody。

@RestController 返回的是数据。 @Controller 返回的是视图（页面）。可以推出@ResponseBody返回的是数据。

2.2 返回数据@ResponseBody

上面讲到, @ResponseBody 表示返回数据。我们来验证下：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@RequestMapping("/res")
@Controller
@ResponseBody
public class ResponseController {
    @RequestMapping("/index")
    public String index() {
        return "/index.html";
    }
}

加上 @ResponseBody 该方法就会把“/index.html" 当做一个数据返回给前端。

@ResponseBody 既是类注解, 又是方法注解。如果作用在类上, 表示该类的所有方法, 返回的都是数据, 如果作用在方法上, 表示该方法返回的是数据。

2.3 返回HTML代码片段

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

    @RequestMapping("/returnHtml")
    @ResponseBody
    public String html() {
        return "<h1>Hello,HTML</h1>";
    }

响应结果👇：

通过Fiddler抓包，观察响应结果：

响应中的 Content-Type 常见取值有以下几种:

①text/html : body 数据格式是 HTML。 ② text/css : body 数据格式是 CSS。 ③ application/javascript : body 数据格式是 JavaScript。 ④ application/json : body 数据格式是 JSON。

2.4 返回JSON数据

Spring MVC 也可以返回JSON

    @RequestMapping("/returnJson")
    @ResponseBody
    public HashMap<String,String> returnJson() {
        HashMap<String,String> map = new HashMap<>();
        map.put("糯香：","柠檬茶");
        map.put("牢大: ","坠机");
        map.put("ikun炒粉: ","放鸡精");
        return map;
    }

运行程序,浏览器响应结果如下:

通过 Fiddler 观察响应结果, Content-Type 为 application/json.

2.5 设置状态码

Spring MVC会根据我们方法的返回结果自动设置响应状态码, 程序员也可以手动指定状态码. 通过Spring MVC的内置对象HttpServletResponse 提供的方法来进行设置.

    @RequestMapping("/setStatus")
    @ResponseBody
    public String setStatus(HttpServletResponse response) {
        response.setStatus(403);
        return "设置状态码成功";
    }

通过Fiddler 抓包来观察设置的结果:

2.6 设置Header(了解即可)

Http 响应报头也会向客户端传递一些附加信息, 比如服务程序的名称,请求的资源已移动到新地址等, 如: Content-Type, Local等.

3. 综合练习

结合上述内容, 我们可以做一些小案例: 重在理解前后端交互的实现.

3.1 加法计算器

需求: 输入两个整数, 点击 “点击相加” 按钮就显示计算结果.

3.1.1 准备工作

gitee链接: 薯条不要番茄酱从我的码云上直接下载spring-mvc文件夹, 并把 calc.html 复制到static 目录下👇

3.1.2 约定前后端交互接口

接口设计: 1. 接收什么是看后端完成这个功能需要什么. 2. 返回什么是看前端页面展示需要什么.

对于此练习: 路径: calc/sum 参数: num1 和 num2 返回值: sum

3.1.3 服务器代码

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("/calc")
@RestController
public class CalcController {
    @RequestMapping("/sum")
    public String sum(Integer num1,Integer num2) {
        Integer sum = num1+num2;
        return "<h1>计算结果: "+sum+"</h1>";
    }
}

3.1.4 前端页面代码

<!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>

3.1.5 运行测试

注意点: 前端接收的参数为num1 和 num2, 那么后端方法参数也必须是 num1 和 num2.(顺序无所谓,名字必须和前端保持一致

3.2 用户登录

需求: 用户输入账号和密码, 后端进行校验密码是否正确. 1. 如果不正确, 前端进行用户告知. 2. 如果正确, 跳转到首页. 首页显示当前登录用户. 3. 后续再访问首页, 可以获取到登录用户信息.

3.2.1 准备工作

gitee链接: 薯条不要番茄酱还是一样的前端页面代码直接在我的码云上拿就可以了.

3.2.2 约定前后端交互接口

用户登录: url: /user/login 参数: userName,password 返回结果: true / false 获取当前登录用户: url: /user/index 参数: 无返回结果: userName

3.2.3 实现服务器端代码

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;

@RequestMapping("/user")
@RestController
public class LoginController {
    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        //校验用户名和密码是否为空
//        if(userName == null || userName.length() == 0 || password == null || password.length() == 0) {
//            return false;
//        }

        //上面代码可以改写成 ↓, 可以点过去看 hasLength 的源码,其实和上面的代码是类似的
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }

        //注意接下来的写法, 由于已经对 userName进行判断处理, 所以userName不会为null.
        //还没学 mybatis, 所以只能先把用户名和密码写死了, 后面学了再改.
        if("admin".equals(userName) && "admin".equals(password)) {
            //从需求上看: 如果成功登录就需要 获取用户名,
            // 所以这里得先设置 session, 将用户名放到session中, 后面得方法通过session 来获取.
            session.setAttribute("userName",userName);
            return true;
        }
        return false;
    }
    @RequestMapping("/index")
    public String getUserName(@SessionAttribute("userName") String userName) {
        return userName;
    }
}

3.2.4 前端页面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName1" type="text" id="userName"><br>
  密码：<input name="password1" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
  //下列代码需要自己写,ajax必须要会:
    function login() {
      $.ajax({
        url:"/user/login",
        type:"post",
        data: {
          userName: $("#userName").val(),
          password: $("#password").val()
        },
        //http响应成功
        success:function(result) {
          if(result==true) {
            //页面跳转
            location.href = "index.html";
            //也可以写成
            // location.assign("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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
     //下列代码需要自己写,ajax必须要会:
        $.ajax({
            url:"/user/index",
            type:"get",
            success:function(loginName) {
                $("#loginUser").text(loginName);
            }
        });
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除