SpringBoot-4-Web开发

SpringBoot-4-Web开发

在这里我们不过多进行SpringBoot源码分析,主要通过实例进行讲解。

创建SpringBoot项目,代码如下:

@Controller
public class TestController {

   @GetMapping("/")
   @ResponseBody
   public String testIndex(){
       return "test index";
  }
}

启动项目后结果如下:

SpringBoot-4-Web开发

可以看出结果没有一点修饰,就只是浏览器将结果进行了打印

1.SpringBoot静态文件配置

但是我们现在是Web开发,既然是WEB开发就需要有静态资源:HTML、CSS、JS、图像、视频、PDF/Office等不需要服务器端处理的文件等这些不需要服务器进行处理的文件。那么这些文件放在哪里呢?

1.1 存放静态文件的位置

SpringBoot-4-Web开发

查看SpringBoot源码,我们发现可以存放静态资源的位置如下:

"classpath:/META-INF/resources/"
"classpath:/resources/"
"classpath:/static/"
"classpath:/public/"
“/” 自定义静态资源目录

1.1.1并且他们存在优先级顺序

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

我们按照上面的文件夹分别在文件夹中放入1.jgp,但是图片内容为文件夹名称的图片

SpringBoot-4-Web开发

然后运行http://localhost:8080/1.jpg查看结果为

SpringBoot-4-Web开发

其他优先级的结果,可以按照这个实验的结果进行操作完成,看看是不是我说的优先级的顺序。

1.2自定义资源配置

如果我们不想使用上面的静态资源文件夹,想自己创建静态资源文件夹进行放置静态资源可以?答案是可以的。

1.2.1 配置文件配置

我们在application.yml中进行配置

spring:
web:
  resources:
    static-locations: classpath:/testresources/

我们猜想一下现在的结果会是什么?

http://localhost:8080/1.jpg查看结果为:

SpringBoot-4-Web开发

配置了自定义文件夹以后,原有的静态资源文件夹就失效了,想要继续使用,可以把原文件夹也写入该配置中

注:在你刚修改过重新启动后,可能结果还是上次运行的结果,这是因为缓存导致的结果,你需要进行一下缓存清除(最简单的办法就是使用另一个浏览器进行访问就可以了)

1.2.2 代码配置

@Configuration
public class MyWebConfig implements WebMvcConfigurer {

  /**
    * addResourceHandler 这个方法是配置资源请求路径
    * addResourceLocations 这个方法是配置自定义静态资源存储位置,里边用到了file:,
    * 是因为资源放置位置不在classpath下边,是自定义的,也可以写为classpath:
    */

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/**").addResourceLocations("classpath:/resources/");
  }
}

运行http://localhost:8080/1.jpg的结果为:

SpringBoot-4-Web开发

只需要将ico图标放置在静态文件夹下即可,如:(记得该图标的命名是 favicon.ico)可以在阿里巴巴矢量图标库寻找合适的图标地址:https://www.iconfont.cn/

运行http://localhost:8080/结果为:

SpringBoot-4-Web开发

1.3  WebJars的使用

WebJars能够提供是SpringBoot  web开发的需要的一些库,例如jQuery、Bootstrap等等。

WENJARS包管理地址

SpringBoot-4-Web开发

1.3.1 添加JS和CSS库

在pom.xml添加依赖

        <dependency>
           <groupId>org.webjars.npm</groupId>
           <artifactId>bootstrap</artifactId>
           <version>5.1.3</version>
       </dependency>
       <dependency>
           <groupId>org.webjars.npm</groupId>
           <artifactId>jquery</artifactId>
           <version>3.6.0</version>
       </dependency>

在application.yml添加配置设置编码为UTF-8格式

spring:
http:
  encoding:
    charset: utf-8
    force: true
    enabled: true

在静态文件夹中添加test.html

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="/webjars/jquery/3.6.0/dist/jquery.min.js"></script>
   <script src="/webjars/bootstrap/5.1.3/dist/js/bootstrap.min.js"></script>
   <title>test</title>
   <link rel="stylesheet" href="/webjars/bootstrap/5.1.3/scss/bootstrap.scss" />
</head>
<body>
<div class="container"><br/>
   <div class="alert alert-success">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">哈哈哈</a>
      Hello, <strong>WebJars!</strong>
   </div>
</div>
</body>
</html>

http://localhost:8080/test.html 查看结果就行了


原文始发于微信公众号(springboot葵花宝典):SpringBoot-4-Web开发

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/184468.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!