82、SpringMVC 参数传递，浏览器和服务器之间的数据传输

package com.atguigu.springmvc.controller;


import com.atguigu.springmvc.pojo.Person;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.net.URLEncoder;

@RestController
public class MVCController {

    //handle01?username=wcs&password=123456&cellphone=13652332424&agreement=on

    @RequestMapping("/handle01")
    public String handle01(String username, String password, String cellphone, boolean agreement) {
        System.out.println("username:" + username);
        System.out.println("password:" + password);
        System.out.println("cellphone:" + cellphone);
        System.out.println("agreement:" + agreement);
        return "handle01";
    }
    //handle02?username=12345&password=123456&cellphone=13652332424&agreement=on
    @RequestMapping("/handle02")
    public String handle02(@RequestParam("username") String name,
                           @RequestParam("password") String pws,
                           @RequestParam("cellphone") String phone,
                           @RequestParam("agreement") boolean ok) {
        System.out.println("username:" + name);
        System.out.println("password:" + pws);
        System.out.println("cellphone:" + phone);
        System.out.println("agreement:" + ok);
        return "handle02";
    }

    //handle03
    @RequestMapping("/handle03")
    public String handle03(Person person) {
        System.out.println(person.toString());
        return "handle03";
    }


    @RequestMapping("/handle04")
    public String handle04(@RequestHeader("user-agent") String userAgent) {
        System.out.println(userAgent);
        return "handle04";
    }

    @RequestMapping("/handle06")
    public String handle06(Person person) {
        System.out.println("person:" + person.toString());
        return "handle06";
    }

    @RequestMapping(value = "/handle07",produces = MediaType.APPLICATION_JSON_VALUE)
    public String handle07(@RequestBody Person person) {
        System.out.println("person:" + person.toString());
        return "handle07";
    }

    @RequestMapping("/handle08")
    public String handle08(Person person, MultipartFile headerImg, MultipartFile[] lifeImg) throws IOException {
        System.out.println("person:" + person.toString());
        System.out.println(headerImg.getOriginalFilename());
        System.out.println(lifeImg[0].getOriginalFilename());
        headerImg.transferTo(new File("D:\\header.jpg"));
        return "handle08";
    }


    @RequestMapping("/handle09")
    public String handle09(HttpEntity<Person> httpEntity) {
        HttpHeaders headers = httpEntity.getHeaders();
        System.out.println("请求头："+ headers);
        Person body = httpEntity.getBody();
        System.out.println("请求体："+ body);
        return "handle09";
    }
    @RequestMapping("/handle10")
    public String handle10(HttpServletRequest request, HttpServletResponse response, Person person) {

        return "handle10";
    }

    @RequestMapping("/download")
    public ResponseEntity<InputStreamResource> download() throws IOException {

        FileInputStream inputStream = new FileInputStream("C:\\Users\\edwin\\Desktop\\换主图\\点歌机详情\\详情图片_2.jpg");

        byte[] bytes = inputStream.readAllBytes();
        //解决中文乱码问题
        String encode = URLEncoder.encode("详情图片_2.jpg", "UTF-8");
        //防止内存溢出
        InputStreamResource streamResource = new InputStreamResource(inputStream);

        return ResponseEntity.ok()
               //内容类型
               .contentType(MediaType.APPLICATION_OCTET_STREAM)
               //内容长度
               .contentLength(bytes.length)
               //处理方式
               .header("Content-Disposition","attachment;filename="+encode)
               .body(streamResource);

    }
}

 

1、新建一个html文件用来做测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    本网页使用layui框架编写； layui官网：https://layui.dev/  -->
    <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.9.15/css/layui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.9.15/layui.min.js"></script>


    <style>
        .layui-col-xs6 {
            padding: 10px;
        }
    </style>

</head>
<body>

<div class="layui-row">
    <div class="layui-col-xs6">
        <h1>SpringMVC - 请求测试</h1>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验1：使用普通变量，收集请求参数</div>
                <div class="layui-colla-content" >
                    <div style="display: flex;justify-content: center">
                        <form class="layui-form" action="/handle01">
                            <div style="width: 250px;padding: 10px" >

                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username"  placeholder="用户名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" placeholder="密码"
                                               class="layui-input" lay-affix="eye">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-cellphone"></i>
                                                </div>
                                                <input type="text" name="cellphone" placeholder="手机号" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" title="同意">
                                    <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验2：使用@RequestParam，逐一封装多个参数</div>
                <div class="layui-colla-content">
                    <div style="display: flex;justify-content: center">
                        <form class="layui-form" action="/handle02">
                            <div style="width: 250px;padding: 10px" >

                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username"  placeholder="用户名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" placeholder="密码"
                                               class="layui-input" lay-affix="eye">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-cellphone"></i>
                                                </div>
                                                <input type="text" name="cellphone" placeholder="手机号" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" title="同意">
                                    <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验3：使用POJO，统一封装多个参数</div>
                <div class="layui-colla-content">
                    <div style="display: flex;justify-content: center">
                        <form class="layui-form" action="/handle03" method="post">
                            <div style="width: 250px;border: 5px solid black;padding: 10px" >

                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username"  placeholder="用户名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" placeholder="密码"
                                               class="layui-input" lay-affix="eye">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-cellphone"></i>
                                                </div>
                                                <input type="text" name="cellphone" placeholder="手机号" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" title="同意">
                                    <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验4：使用@RequestHeader获取请求头数据</div>
                <div class="layui-colla-content">
                    <a type="button" class="layui-btn" href="/handle04">随便发个请求</a>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验5：使用@CookieValue获取Cookie数据</div>
                <div class="layui-colla-content">
                    <a type="button" class="layui-btn" href="/handle05">随便又发个请求</a>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验6：使用POJO，级联封装复杂对象</div>
                <div class="layui-colla-content">
                    <div style="display: flex;justify-content: center">
                        <form class="layui-form layui-form-pane" action="/handle06">
                            <div style="width: 400px;padding: 10px" >

                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username"  placeholder="用户名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" placeholder="密码"
                                               class="layui-input" lay-affix="eye">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-cellphone"></i>
                                                </div>
                                                <input type="text" name="cellphone" placeholder="手机号" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs4">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-website"></i>
                                                </div>
                                                <input type="text" name="address.province" placeholder="省" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-find-fill"></i>
                                                </div>
                                                <input type="text" name="address.city" placeholder="市" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-tree"></i>
                                                </div>
                                                <input type="text" name="address.area" placeholder="区" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">性别</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="sex" value="男" title="男">
                                            <input type="radio" name="sex" value="女" title="女">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">爱好</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="hobby" value="足球" title="足球">
                                            <input type="checkbox" name="hobby" value="篮球" title="篮球">
                                            <input type="checkbox" name="hobby" value="乒乓球" title="乒乓球">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">年级</label>
                                        <div class="layui-input-block">
                                            <select name="grade">
                                                <option value="一年级">一年级</option>
                                                <option value="二年级">二年级</option>
                                                <option value="三年级">三年级</option>
                                                <option value="四年级">四年级</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" title="同意">
                                    <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验7：使用@RequestBody，封装JSON对象</div>
                <div class="layui-colla-content">
                    <button type="button" class="layui-btn layui-bg-blue">去Postman测试，自己带上【实验6】中数据的json</button>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验8：使用@RequestPart/@RequestParam，封装文件，测试文件上传</div>
                <div class="layui-colla-content">
                    <div style="display: flex;justify-content: center">

                        <form class="layui-form layui-form-pane" action="/handle08" method="post" enctype="multipart/form-data">
                            <div style="width: 350px;padding: 10px" >
                                <div class="layui-form-item">
                                    <fieldset class="layui-elem-field" style="background-color: lemonchiffon">
                                        <legend>文件上传要求</legend>
                                        <div class="layui-field-box">
                                            <p>1. 表单：method=post</p>
                                            <p>2. enctype="multipart/form-data"</p>
                                            <p>3. 注意：SpringMVC对上传文件有大小限制（默认单文件最大：1MB；整个请求最大：10MB）</p>
                                        </div>
                                    </fieldset>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username"  placeholder="用户名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" placeholder="密码"
                                               class="layui-input" lay-affix="eye">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-cellphone"></i>
                                                </div>
                                                <input type="text" name="cellphone" placeholder="手机号" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">头像</label>
                                    <div class="layui-input-block">
                                        <input type="file" name="headerImg" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">生活照</label>
                                    <div class="layui-input-block">
                                        <input type="file" name="lifeImg" multiple class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" title="同意">
                                    <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验9：使用HttpEntity，封装请求原始数据</div>
                <div class="layui-colla-content">
                    <a class="layui-btn layui-bg-blue" href="/handle09?user=admin&age=18">随便㕛发个请求</a>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验10：使用原生Servlet API，获取原生请求对象</div>
                <div class="layui-colla-content">
                    <a class="layui-btn layui-bg-blue" href="/handle09?user=admin&age=18">随便叒发个请求</a>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-xs6">
        <h1>SpringMVC - 响应测试</h1>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验1：返回json数据</div>
                <div class="layui-colla-content">
                    <a type="button" class="layui-btn" href="/resp01">给个JSON</a>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验2：文件下载测试</div>
                <div class="layui-colla-content">
                    <a type="button" class="layui-btn" href="/download">给个美女</a>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">实验3：使用Thymeleaf模版引擎，实现服务端渲染</div>
                <div class="layui-colla-content">
                    <fieldset class="layui-elem-field" style="background-color: lemonchiffon">
                        <legend>服务端渲染</legend>
                        <div class="layui-field-box">
                            <h3>现在服务端渲染的方式用的很少了；项目基本都是前后分离。</h3>
                            <h3>这样各端专注于自己的开发，快速协同分工</h3>
                            <fieldset class="layui-elem-field" style="background-color: lightcyan">
                                <legend>前后分离</legend>
                                <div class="layui-field-box">
                                    <h5>1. 前端开发人员编写独立的前端项目</h5>
                                    <h5>2. 前端项目自己控制页面跳转逻辑</h5>
                                    <h5>3. 后端仅需返回前端需要的JSON数据</h5>
                                    <h5>4. 后端无需关心页面效果等问题</h5>
                                    <h5>优点：分工明确，快速协同，专注用户体验</h5>
                                    <h5>缺点：成本高，技术复杂，门槛高</h5>
                                </div>
                            </fieldset>
                            <fieldset class="layui-elem-field" style="background-color: lightcyan">
                                <legend>前后不分离(服务端渲染)</legend>
                                <div class="layui-field-box">
                                    <h5>1. 后端开发人员要控制页面跳转逻辑（利用转发、重定向）</h5>
                                    <h5>2. 服务器要拿到业务数据，全部填充到页面，然后整体把页面返回给客户端</h5>
                                    <h5>3. 模版引擎作用：将数据填充到页面模板</h5>
                                    <h5>4. JSP其实就是一种模板引擎</h5>
                                    <h5>优点：弱前端、低成本、速度快</h5>
                                    <h5>缺点：不专业、体验差、效率低、易扯皮</h5>
                                </div>
                            </fieldset>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<style>

</style>
</html>