【Spring Boot】Web开发-静态资源与模板引擎

以你之姓@ 2024-04-17 06:01 67阅读 0赞

Spring Boot创建web应用的步骤

1.  创建Spring Boot应用选择我们需要的模块
2.  SpringBoot已经默认将这些场景配置好了，只需要在配置文件中指定少量配置就可以运行起来
3.  自己编写业务代码。

# 1. 静态资源映射规则 #

在之前我们做web开发的时候，会有一个WEB-INF之类的文件夹，而Boot为我们自动创建了这样的目录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70]  
那么我们的静态资源应该放在那里呢？在[开发文档中][Link 1] 也有介绍：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 1]  
在这些目录下都可以放静态资源，当然也可以自己制定路径。  
**"classpath:/META-INF/resources/",  
“classpath:/resources/”,  
“classpath:/static/”,  
“classpath:/public/”  
“/”：当前项目的根路径**

例如我在static目录下放一个abc.html静态资源  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 2]  
然后访问  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 3]  
如果你把index放在这些目录下，他会自动访问index的。

# 2.引入模板引擎Thymeleaf #

先来看一下[开发文档][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 4]  
Spring Boot使用了嵌入式servlet，所以不能使用jsp，我们需要引入thymeleaf模板引擎，不管是jsp还是其他的模板，我们都是为了把一些数据放在静态页面上进行动态的显示。

在pom中添加依赖，就可以引入thymeleaf,

<dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

开发文档在[这里][Link 2]

我们只需要把文件放在thymeleaf中就可以了，下面是一个hello world  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 6]  
启动程序在浏览器中localhost：8080/test就可以访问到success了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/b1d2b2f3380a44c68f8e03d4dd34bcc5.png
[Link 1]: https://docs.spring.io/spring-boot/docs/2.1.7.RELEASE/reference/html/boot-features-developing-web-applications.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/a7f74cc7098a469db787f1a9c6d9604a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/74d48f2bbd5043219e3f1b9b40e1d045.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/ccab6774f62b49c28930f3464b7095c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/45c8fa0a938043b38160d5d9bf2b64aa.png
[Link 2]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/ba47d90746a54206a5028c001dfc4a53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/992dc7090ebc44558266ab91a36718f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzY18xMjM0NTY_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/f62c0c7241204f908ff75b7335bc72a4.png