spring 引入html页面,Spring boot中的HTML页面引用javascript 和css文件详细教程

Spring boot项目的src/main/resources路径下有两个文件夹，分别为static 、templates，如下图：

这两个文件夹的作用不同，static文件夹主要放置静态资源，包含css文件、javascript文件，以及图片等；而templates文件夹主要放置Spring boot的html页面。

如果在static目录下建的html页面，那么和普通工程引入js css一样的做法一样就能成功，但是如果html界面是在templates下面的话，引入js css就无效了，不用担心只需两个步骤就可以解决这个问题。

1、在pom文件中引入thymeleaf

org.springframework.boot

spring-boot-starter-thymeleaf

主意，上面的内容可以直接拷贝到pom文件中，不需要携带thymeleaf的版本号(可能会造成项目启动不起来)

2、创建javascript文件和css文件

在static文件夹中可以任意创建目录来存放文件如下图：

3、创建html页面

在templates文件夹中可以任意创建目录以存放你的html文件，创建html文件后，需要将Html文件的头部改成如下内容：html>

注意：xmlns:th="http://www.thymeleaf.org"必须添加上

4、引入css文件

在你创建的html中使用如下方式引用css文件

5、引入javascript文件

在你创建的html中使用如下方式引用javascript文件

注意：html中引用的js路径为相对路径，相对于static下的路径，因此无论你的静态资源js、css在那个文件夹下，都必须主意html中引用的路径一定为static下的全路径

6、运行项目，访问html页面(要通过controller访问，而不是直接访问html)，即可成功引入javascript文件和css文件