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

作者:青山常在人不老   阅读 (3371)  |  收藏 (0)  |  点赞 (0)

摘要

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


原文链接: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文件  

评论