thymeleaf使用介绍，解决路径问题

来源：互联网发布：hifi音乐软件官网编辑：程序博客网时间：2024/06/03 09:17

在web开发中，经常会思考使用哪一种页面技术。通常jsp比较方便，但是没法实时的查看页面效果，而html的话效果比较好，推荐一个工具：brackets，可实时查看页面效果（结合chrome）

本文简单介绍thymeleaf，主要解决地址的获取，以及js内部地址与值的获取

thymeleaf的使用：
pom引入：

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

html存放路径（默认寻址路径）：

src/main/resources/templates

静态文件存放路径（默认匹配路径）

src/main/resources/static
- （如js文件引用时：/js/jquery-3.0.0.min.js ==> @{/js/jquery-3.0.0.min.js} 此方式后续介绍）

html内容：

html头引用：

<html xmlns:th="http://www.thymeleaf.org">

html模板头引用：

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

html模板引入：

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="xxxx">【xxxx：为引入的页面名称，可加相对地址】

路径问题：
文件引用的路径：

使用@{}可将项目contextPath包含在路径内

css：    th:href="@{/css/editormd.min.css}"js： th:src="@{/js/jquery-3.0.0.min.js}"

以上为静态资源的引用路径，接下来看下js内的使用：
如：
首先在js标签加上内联标签：

<script type="text/javascript" th:inline="javascript">

在js中获取地址可这样：

var path = /*[[@{/yourPath}]]*/；

此处，最好将所有js使用/*

<span th:text="${book.name}">

等等
ognl或者el表达式即可
其他类型的标签以及操作可查看搜索网站后使用。

js内部的取值：

alert([[${info}]]);也可：alert(/*[[${info}]]*/);

关于静态资源的路径可查看spring boot的静态资源默认配置。

阅读全文

0 0