Webjas
以jar包形式引入前端框架,包括npm
,jquery
,bootstrap
…
官网
pom导入
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1-1</version>
</dependency>
资源路径
-
/
-
classpath:/static/
-
classpath:/public
-
classpath:resource
-
classpath:/META-INF/resource
类路径
classpath
:java或resource都属于类路径
图标配置
**/favacon.ico
:放在静态路径下,自动查找并配置,spring.mvc.favicon.enable
配置启用,默认true
开启
静态文件夹指定
spring.resources.static-location
指定静态文件夹
spring.resources.static-location=classpath:godme,classpath:judas/resource
# 1. 此配置可以配置多个,用逗号进行分隔
# 2. 关键标记如classpath每个文件夹独享
thymeleaf
配置引入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
默认版本2.1.1, 需要进行xml配置来进行新版本替换
新版本Spring-Boot似乎好了的样子,不过还是可以按照如下方法进行版本修正
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<!-- 上面会有其他配置,不用太在意,加上下面的配置就行了,根据自己的需求和环境看着办-->
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<!-- 当使用新版本时注意layout版本, thymeleaf3需要layout2及以上版本支持-->
<thymeleaf-layout-dialect.version>2.0.5</thymeleaf-layout-dialect.version>
</properties>
具体版本可以通过查看pom
知道:
spring-boot-starter-parent
spring-boot-dependencies
thymeleaf.version
前面两个需要点击进去,最后一个是标签名,在第二层dependencies搜索即可
资源路径
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
自动配置的资源前缀为classpath:/templates/
,后缀为.html
如果需要调整,可以通过外部进行配置覆盖
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix='.html'
全部的可配置项,就是spring自动项目下的各种默认配置
未配置时采用的是spring的默认配置项,当外部进行配置的时候对默认配置进行覆盖
资源访问
@Controller
public class MyController {
@RequestMapping("/hello")
public String hello(){
return "hello";
}
}
当直接返回字符串的时候,实际返回的是prefix
+return
+suffix
。
然后系统根据路径自动路由到指定的模板文件。
注意:
@Controller
而不是@RestController
或许开发接口时常用
@RestController
,因为集成了@Controller
和ResponseBody
,比较方便。但是或许会让人忽略
@ResponseBody
的含义:响应内容如果是
@RestController
,thymeleaf
就不能够帮你路由了,只会把return
直接输出页面了。切记切记
模板定义
1. 名称空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2. 特殊标签
<h1 th:text="${fuck}">yes</h1>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${name}">yes</h1>
</body>
</html>
数据传递
@Controller
public class MyController {
@RequestMapping("/hello")
public String hello(Map<String, Object> map){
map.put("name","godme");
return "hello";
}
}
通过参数注入Map
,然后往里面塞东西就行了,Spring会自动把数据传达到模板里面。
<h1 th:text="${fuck}">yes</h1>
模板里面取的数值,就是从传入的数据里面取出来的。
标签属性
1. 替换
<h1 text="default" th:text="${new}">old</h1>
new
default
old
页面按照如上的显示优先级进行显示,优先级高的会对优先级低的进行覆盖。
当th:text
没有取出任何值,就会向下查询,所以放心使用,不会乱抛异常的。
2. 范围
html | thymeleaf |
---|---|
id | th:id |
class | th:class |
href | th:href |
text | th:text |
… | th:… |
每一种标签属性都有对应替换,大胆使用,都覆盖全了。
表达式
${}
# 取值
${person}
# 级联属性
${person.info.age}
# 级联属性
${person['info']['age']}
# map
${students['godme'].name}
# list
${students[0].name}
# 方法调用
${person.getName()}
# 方法传参
${person.setName('param').}
# 内部#使用内置基本对象
${#locate.country}
# 工具对象
${#string.toString(obj)}
${#string.startWith(obj, 'start')}
*{}
<!--同${}, 可以使用${}全部功能,额外提供以其他功能-->
<tr th:object="${user}">
<!-- 指代(存储)前面取出对象, 相当于 ${user.name}, 可以直接取出属性-->
<td>name:<span th:text="*{name}"></span></td>
<td>age :<span th:text="*{age}"> </span></td>
<td>male:<span th:text="*{male}"></span></td>
</tr>
- #{}
- 取国际化信息
- @{}
<!-- 常用于连接设置 -->
<!-- 完整链接-->
<a th:href="http://127.0.0.1:8080/student/search?username=godme$userage=18"></a>
<!-- 可直接替换-->
<a th:href="@{http://127.0.0.1:8080/student/search?username=godme$userage=18}"></a>
<!-- 省略,默认访问本机服务-->
<a th:href="@{/student/search?username=godme$userage=18}"></a>
<!-- 1. 可直接传参 2. 其中可用${} 3. 自动拼接参数-->
<a th:href="@{/student/search(username=${user.name}, userage=${user.age})"></a>
- ~{}
- 插入片段文档
这个不太明白,看
thymeleaf
官方文档吧
特殊标签
th:utext
th:text
设置设置信息,不会经过转义
th:utext
功能同上,但是会对特殊字符进行转义
<!--行内写法-->
<!-- 每次text都得写属性比较麻烦,可以采用行内写法 -->
<span th:text="${user.name}"></span>
<span>[[user.name]]</span>
<!-- 两种行内写法是否转义对照写法 -->
<span th:utext="${user.name}"></span>
<span>[(user.name)]</span>
th-each
<!-- 遍历 -->
<tr th:each="student:${students}">
<td>name: <span th:text="${student.name}"></span></td>
<td>male: <span th:text="${student.male}"></span></td>
<!-- 三目运算 和#{} 内置对象 -->
<td>young: <span th:text="${student.isYoung}?#{true}:#{false}"></span></td>
</tr>
<!-- 单标签遍历-->
<h1 th:text="${student.name}" th:each="student:${students}"></h1><!--会生成多个h1标签-->
<h1 th:each="student : ${students}">[[student.name]]</h1><!-- 行内写法多个信息拼接,标签只有一个-->