Spring boot中的HTML页面引用javascript 和css文件详细教程|Spring boot引入css文件,Spring boot引入js文件CDCN-码上中国博客

摘要

对于初次使用Spring boot框架开发web项目的朋友们来说，每个使用的细节都需要摸索一番，本文就是在作者摸索的基础之上为广大使用Spring boot开发项目的朋友们介绍如何在html页面中引入javascript 和css文件

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

Spring boot 中html页面引用javascript文件和css文件的方法

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

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

1、在pom文件中引入thymeleaf

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

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

2、创建javascript文件和css文件

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

Spring boot项目中javascript 文件和css文件存放路径

3、创建html页面

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

<!DOCTYPE html> 
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

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

4、引入css文件

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

<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">

5、引入javascript文件

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

<script type="text/javascript" th:src="@{/js/VisaCard.js}"></script>

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

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

分类 Spring 配置

字数 1079

博客标签 Spring boot引入css文件 Spring boot引入js文件