idea创建springboot项目访问html文件

1、引入thmeleaf模板引擎<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

罗汉翔

9182人浏览 · 2022-01-25 12:51:52

罗汉翔 · 2022-01-25 12:51:52 发布

阅读过的链接：

Thymeleaf踩坑（th:inline=“javascript“）_纯纯打工人-CSDN博客_th:inline="javascript

thymeleaf的内联th:inline（在javascript访问model中的数据）_纱厨藤簟，玉人罗扇轻缣。-CSDN博客_script th:inline

1、引入thmeleaf模板引擎

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

2、配置application.properties 如下：

spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=utf-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3、html页面放到resources/templates下

（可以自己在下面创建包，但要在prefix中指定，或者在controller中配置）

1.resourses下文件夹public是我自己创建的，通过local host：8080/index.html可以直接访问
2.spring boot默认开启了静态文件的配置，任何放在static文件夹下的资源都是静态文件。引用静态文件时以/或者前缀不加任何定位符，都会去static文件夹下查找。/resources/static静态资源的默认请求路径为/ 。
Thymeleaf模版默认会使用templatess作为视图文件下
3.假如我的静态资源位于/resources/static/dist目录下，但是我不想将请求改为/dist（这里要注意一下html中引用其它资源的相对路径如果是./xxx 在本地更改真个文件加的路径引用的资源文件是能够正常定位，但是在web容器中./xxx需改为/dist/xxx ，这里涉及到web根路径和本地文件路径的问题）可以在application.properties加如下配置：
spring.resources.static-locations=classpath:/static/dist/
这样当我们访问/ 时实际定位的资源文件位置是/resources/static/dist 这样就避免了当更改资源文件的位置时需要更改html中的全部引用。

application.properties中还有一种配置就是这种
# 定位模板的目录
spring.mvc.view.prefix=classpath:/templates/
# 给返回的页面添加后缀名
spring.mvc.view.suffix=.html

spring boot返回静态页面的方式非常方便，首先需要移除maven的thymeleaf依赖。
非controller模式
这种模式不使用controller，将html和css,js同等对待。这种模式下，html中的如果不加/，则会定位到当前页面。
要看到返回静态页面，只需要将之前的home.html移到static文件夹下。并删除controller和注释掉application.properties中的配置即可。直接在浏览器中输入：http://localhost:8080/index.html。

controller模式
习惯上，我们还是多使用/index方式，而不是index.html方式。
为此还是需要controller。

# 定位页面的目录到static/下
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html

controller当然也是需要的，和之前一样：

@GetMapping("/index")
public String index(){
return "home"; //当浏览器输入/index时，会返回 /static/home.html的页面
}
到这里就可以了。不在需要额外配置。在浏览器中输入：http://localhost:8080/index就可以定位到static下的index.html页面了。

注意点：

一般如果只把框架做为url路由，最好的做法是在静态资源和视图View建立相同的文件，视图在通过框架在相应的目录查找，静态资源则路由到static目录下去查找。

4、通过controller层访问templates中的文件夹：

注意用@Controller，不要用@RestController，否则无法访问我也不知道为什么
Springboot项目启动后无法打开jsp、html等页面问题（@RestController与@ResponseBody ＋ @Controller的区别）_放荡的小跳蛙的博客-CSDN博客

5、用@Controller的原因：

官方文档：
@RestController is a stereotype annotation that combines @ResponseBody and @Controller.
意思是：
@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。

1)如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，配置的视图解析器InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。

例如：本来应该到success.jsp页面的，则其显示success.

2)如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。
3)如果需要返回JSON，XML或自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解。

return “index”，页面会出现index字符串，而不是index.html,当时写法是这样

解决方式1

解决方式2

解决方式3

解决方式4

问题1

最近在使用Thymeleaf的时候，启动springboot项目，i控制台出现了下面的错误：[THYMELEAF][main] Template Mode 'HTML5' is deprecated. Using Template Mode 'HTML' instead.

问题分析解决

出现这个问题，是因为在application.properties中配置了下面的内容：

spring.thymeleaf.mode=HTML5

而我引入的Thymeleaf架包没有指定版本，如下：

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

这时使用

spring.thymeleaf.mode=HTML

就可以了，因为没有没有配置Thymeleaf的版本号时，默认使用的是Thymeleaf2.1。如果要使用THML5，则在引入Thymeleaf后，需要指定版本：

<properties>
    <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

问题2

当一个js或jQuery文件引入页面时，路径是正确的但是无法生效——在浏览器运行这个页面时没有执行jQuery的代码。
解决办法一：可能是浏览器中缓存了你历史的一些纪录，你需要重新刷新浏览器的缓存。
步骤：
1.按组合键快速弹出刷新缓存界面：ctrl+shift+delet。然后清理缓存。

2.clean IDEA

解决办法二：

步骤

1.在idea中选择file->settings中

2.在settings中选择Languages&Frameworks->javaScript->Libraries

3.如果在Libraries中没有jQuery就选择添加，有就勾选再编辑

Thymeleaf踩坑（th:inline=“javascript“）_纯纯打工人-CSDN博客_th:inline="javascript

thymeleaf模板引擎为前端数据的获取提供了较大的便利，在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据，或是想在javascript代码块里访问model中的数据，则要使用内联的方法。

　　比如，我们可以这样访问对象：

<p>Hello, [[${session.user.name}]]!</p>

　　以上代码可以取代下面的一般写法：

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

Expressions between [[...]] or [(...)] are considered inlined expressions in Thymeleaf。
即使用此语法的语句称为“内联”，使用内联的语句的确会更加简洁一些。

若是想在javascript代码块内直接地使用model的对象值，则必须通过内联来实现。代码如下：

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var max = /*[[${maxSumOfDateInYear}]]*/ 20;
    alert(max);
    /*]]>*/
</script>

其中第2、5行为基于XML的转义写法，第3行把内联访问的语句用注释引起来，且后面跟着一个空格20，是指若不存在此对象，则自动设置默认值为20。

注意以上的javascript内联写法是基于你需要“直接地”使用model对象值的场景。
否则还有其它写法，比如简单地声明一个hidden
input：

<input type="hidden" id="maxSumOfDateInYear" th:value="${maxSumOfDateInYear}"/>
<script type="text/javascript" th:inline="none">
    var max = $("#maxSumOfDateInYear").val();
    var data = [["2012-05-07", 6], ["2012-04-16", 4]];
    alert(max);
    alert(data);
</script>

以上第1行声明了一个hidden的maxSumOfDateInYear，然后第3行通过jQuery来间接访问。
注意，若在thymeleaf代码里存在第4行的二维数组字面量的写法，则必须要把javascript代码块设置为inline为none的，否则thymeleaf引擎会把此数组的[[也当成了内联语句处理，从而导致后端报错An error happened during template parsing。要么，你就还是通过hidden间接访问的方式实现。
或者，也可以通过ajax直接获取内容来实现。但这就属与thymeleaf模板引擎计算过程无关了。