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文件