SpringBoot项目学习01之访问静态资源与消息转换器

picacho_pkq

已于 2022-08-11 20:47:03 修改

阅读量636

点赞数 1

分类专栏： SpringBoot 文章标签： spring boot java intellij-idea

于 2022-05-09 20:06:45 首次发布

本文链接：https://blog.csdn.net/pikcacho_pkq/article/details/124667444

版权

SpringBoot 专栏收录该内容

32 篇文章 12 订阅

订阅专栏

使用Spring Boot开发项目时，我们只需要按照指定的规则放置我们的静态资源文件，启动项目后就可以轻松地访问这些静态资源。下面就总结一下Spring Boot访问静态资源的相关知识与消息转换器HttpMessageConverter 的相关知识。

1.默认访问路径

Spring Boot 默认存放静态资源文件的目录有四个，这些目录都在类路径下，它们分别是：

/META-INF/resources/
/resources/
/static/
/public/

创建一个Spring Boot项目，分别创建以上四个目录。
在这里插入图片描述
在进行 web 功能开发时，如果项目中存在静态资源文件，如 HTML、CSS、JavaScript、图片等文件，只要将这些文件放到以上四个文件目录即可正常访问到。接下来，我们在这些文件夹中添加一些静态资源文件测试一下。

/META-INF/resources/test.html
/resources/pikcacho_pkq.jpg
/static/test.css
/public/test.js：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    META-INF/resources/test.html
</body>
</html>

test.css

.test{
    font-size:14px;
}

test.js

function test(){
    console.log("pubilc/rest.js");
}

之后启动项目，分别访问以下路径：

/bbs/test.html
/bbs/test.css
/bbs/test.js
/bbs/pikcacho_pkq.jpg

通过下图可以看到，可以通过上面的访问路径直接访问这些静态资源文件。在这里就不一一展示了。
在这里插入图片描述

2.修改默认访问路径

其实，前面四个静态资源目录是Spring Boot默认设置的，如果想要更改，可以修改配置文件中的spring.web.resources.static-locations参数。比如，我们想要访问test目录下的静态资源文件，首先需要在 src/main/resources 下新建test目录，将静态资源复制到该目录中。这里将test.html，test.js，pikcacho_pkq.jpg放置在test目录下，将test.css依旧放置在static目录下。
在这里插入图片描述

spring.web.resources.static-locations=classpath:/test/

继续访问上述访问路径。这时会出现一个情况，test目录下的静态资源都能被访问，static目录下的静态资源无法被访问了。
在这里插入图片描述

没办法访问static目录下的静态资源，是由于我们指定了自己的静态资源访问路径后，会覆盖掉原始的默认设置。因此，想要访问static目录下的静态资源，需要将该目录加入到指定的路径中。

spring.web.resources.static-locations=classpath:/test/，classpath:/static/

在这里插入图片描述
可以看到，现在又可以访问static目录下的静态资源了。

3.浅析静态资源实现原理

首先需要查看WebMvcAutoConfiguration这个类，这个类主要是实现web项目相关的自动配置。接着addResourceHandler()方法添加默认的静态访问路径。通过WebProperties类中的静态内部类Resource类定义默认静态路径。
在这里插入图片描述

因此，这些路径下的静态文件可以直接被访问，同时也可以通过自定义覆盖这些路径。

4.消息转换器HttpMessageConverter

在Spring Boot项目中使用@RequestBody、@ResponseBody 注解进行请求实体的转换和响应结果的格式化输出。以普遍使用的json数据为例，这两个注解的作用分别可以将请求中的数据解析成json并绑定为实体对象以及将响应结果以json格式返回给请求发起者。但Http请求和响应是基于文本的，也就是说在Spring Boot框架内部维护了一套转换机制，也就是我们通常所说的 “将json格式的请求信息转换为一个对象，将对象转换为json格式并输出为响应信息”，这些就是HttpMessageConverter 的作用。

接下来，我们定义一个实体类，并通过 @RequestBody、@ResponseBody 注解进行参数的读取和响应。
SaleGoods.java

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class SaleGoods {
    private Integer id;
    private String goodsName;
    private float weight;
    private int type;
    private Boolean onSale;

}

TestController.java

@Controller
public class TestController {

    @RequestMapping(value = "/get", method = RequestMethod.GET)
    @ResponseBody
    public SaleGoods httpMessageConverterTest(){
        SaleGoods saleGoods = new SaleGoods();
        saleGoods.setGoodsName("小米手机");
        saleGoods.setId(1);
        saleGoods.setOnSale(true);
        saleGoods.setType(1);
        saleGoods.setWeight(300);
        return saleGoods;
    }
}

这里用到了一个Lombok插件，可以让我们在创建实体类时，不用自己手动书写setter、getter、构造方法等。使用Lombok主要分为两步。
1.在idea中安装Lombok插件
在这里插入图片描述
2.在pom文件中添加对应依赖

在这里插入图片描述
完成上述步骤后，就可以在实体类上通过注解的方式使用该插件，非常好用。

接着，在浏览器地址栏输入http://localhost:8080/bbs/get进行测试，结果如下。
在这里插入图片描述
添加@ResponseBody注解后，Spring Boot会直接将对象转换为json格式并输出为响应信息。接下来再写一个案例，使用@RequestBody将前端请求并将参数转换为后端定义的对象，在TestController类中添加的方法如下，请求方法为POST，并使用@RequestBody注解将前端传输的参数直接转换为 SaleGoods 对象。

TestController.java

	@RequestMapping(value = "/post", method = RequestMethod.POST)
    @ResponseBody
    public SaleGoods httpMessageConverterTest2(@RequestBody SaleGoods saleGoods){
        System.out.println(saleGoods.toString());
        saleGoods.setType(saleGoods.getType() + 1);
        saleGoods.setGoodsName("商品名：" + saleGoods.getGoodsName());

        return saleGoods;
    }

由于是POST请求，因此不用直接使用浏览器访问，而是在static中新增了api-test.html页面进行模拟请求，页面当中使用的是 applicaiton/json 格式进行ajax请求，resources/static/api-test.html 代码如下。
api-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>lou.SpringBoot | 请求测试</title>
</head>
<body class="hold-transition login-page">
<div style="width:720px;margin:7% auto">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="m-0">接口测试</h5>
                        </div>
                        <div class="card-body">
                            <input id="id" type="text" placeholder="请输入 id 字段" />
                            <input id="goodsName" type="text" placeholder="请输入 goodsName 字段"/>
                            <input id="weight" type="number" placeholder="请输入 weight 字段"/>
                            <input id="type" type="number" placeholder="请输入 type 字段"/>
                            <input id="onSale" type="number" placeholder="请输入 onSale 字段 (0 或 1)"/>
                            <h6 class="card-title">接口返回数据如下：</h6>
                            <p class="card-text" id="result2"></p>
                            <a href="#" class="btn btn-primary" onclick="requestPostTest()">
                                发送 Post 请求
                            </a>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    function requestPostTest(){
        var onSale = true;
        var id = $("#id").val();
        var goodsName = $("#goodsName").val();
        var weight = $("#weight").val();
        var type = $("#type").val();
        var onSaleValue = $("#onSale").val();

        if(onSaleValue != 1){
            onSale = false;
        }
        // 发给后端的数据
        var data = {
            id: id,
            goodsName: goodsName,
            weight: weight,
            type: type,
            onSale: onSale,
        };

        // 发送ajax请求
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/bbs/post",
            contentType:"application/json; charset=utf-8",
            data:JSON.stringify(data),
            success:function (result){
                $("#result2").html(JSON.stringify(result));
            },
            error:function (){
                $("#result2").html("接口异常");
            }
        });
    }
</script>
</body>
</html>

启动项目后在浏览器地址栏添加http://localhost:8080/bbs/api-test.html访问页面并在页面输入框中输入对应的数据点击请求按钮，最终获得结果如下。
在这里插入图片描述
前端ajax传输的数据是5个字段，到达后端后直接转换为SaleGoods对象。由于消息转换器的存在，对象数据的读取不仅简单而且完全正确，响应时也不用自行封装工具类，使得开发过程变得更加灵活和高效。

picacho_pkq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot项目学习01之访问静态资源与消息转换器

使用Spring Boot开发项目时，我们只需要按照指定的规则放置我们的静态资源文件，启动项目后就可以轻松地访问这些静态资源。下面就总结一下Spring Boot访问静态资源的相关知识与消息转换器HttpMessageConverter 的相关知识。1.默认访问路径Spring Boot 默认存放静态资源文件的目录有四个，这些目录都在类路径下，它们分别是：/META-INF/resources//resources//static//public/创建一个Spring Boot项目，分
复制链接

扫一扫