模板引擎 Jsp就是喽
springboot 官方推荐支持 可以直接打开 jsp就必须要打开服务器访问
https://www.jianshu.com/p/ed9d47f92e37 看一下怎么使用
引入Thymeleaf
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
修改覆盖版本 可不加 上面那一条就行
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>配置
application.yml 里面添加
spring: # 模板引擎content-type: text/html thymeleaf: mode: HTML5 prefix: classpath:/templates/ suffix: .html encoding: UTF-8 # 禁用缓存 cache: false
Thymeleaf的使用
只要我们把HTML页面放在 classpath：/templelates里面， thymeleaf就能自动渲染
<html lang="en" xmlns:th="http://www.thymeleaf.org">th:src="@{}"th:href="@{}加载JS 和 CSS
<link rel="stylesheet" th:href="@{https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css}" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script th:src="@{https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js}" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
对象的使用
properties文件内容 not.null=* 必须填写 user.password.retry.limit.count=密码输入错误{0}次
路径的判断
th:src="@{images/gallery/01_b_car.jpg}" 少了一个/ --> 访问路径为http://localhost:8080/goods/images/gallery/01_b_car.jpg
th:src="@{/images/gallery/01_b_car.jpg}" 访问路径为http://localhost:8080/images/gallery/01_b_car.jpg
<h4 class="panel-title">取出properties文件的值</h4> <div class="panel-collapse collapse in"> <div class="panel-body" th:with="num=5"> not.null=* 必须填写 user.password.retry.limit.count=密码输入错误{0}次 <p class="text-left"> 1 ： [[#{not.null}]]</p> <p class="text-left"> 2 : [[#{user.password.retry.limit.count(${num})}]]</p> </div> </div> <hr> <h4 class="panel-title">获取变量方式 注意是用 $ </h4> <div class="panel-collapse collapse in"> <div class="panel-body"> <p class="text-left"> 1 获取对象username ： [[${user.username}]]</p> <p class="text-left"> 2 获取集合的元素 : [[${users[0].username}]]</p> <p class="text-left"> 2 获取Map的元素 : [[${userMap['userl'].username}]]</p> <p class="text-left"> 2 获取数组的元素 : [[${usersArr[0].username}]]</p> </div> </div> <hr> <h4 class="panel-title">链接表达式 @ </h4> <div class="panel-collapse collapse in"> <div class="panel-body"> <p class="text-left"> <a th:href="@{/user/datails(userId=${user.userId})}">单个参数 </a></p> <p class="text-left"> <a th:href="@{/user/datails(userId=${user.userId}, name=${user.userName})}">多个参数</a></p> <p class="text-left"> <a th:href="@{/user/{userId}/datails(userId=${user.userId})}">rest风格参数 解析成/user/1/datails （1为userId的值）</a></p> </div> </div> <hr> <h4 class="panel-title">处理转译文本 </h4> <div class="panel-collapse collapse in"> <div class="panel-body" th:with="html = '<h4>豪哥最帅</h4>'"> 1 转译字符输出 ：<p class="text-left" th:text="${html}"> </p> 2 无需字符转译 : <p class="text-left" th:untext="${html}"> </p> </div> </div> <hr> <h4 class="panel-title">数字格式化 自己sou博客吧 千位分割符 货币格式化 小数 百分比</h4>
如何在html页面格式化日期
Thymeleaf主要使用org.thymeleaf.expression.Dates 这个类来处理日期，在模板中使用"#dates"来表示这个对象。
1、格式化日期
[[${#dates.format(date)}]] 或 th:text="${#dates.format(date)}
[[${#dates.formatISO(date)}]] 或 th:text="${#dates.formatISO(date)}
[[${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}]] 或 th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}2、获取日期字段
获取当前的年份：[[${#dates.year(date)}]]
获取当前的月份：[[${#dates.month(date)}]]
获取当月的天数：[[${#dates.day(date)}]]
获取当前的小时：[[${#dates.hour(date)}]]
获取当前的分钟：[[${#dates.minute(date)}]]
获取当前的秒数：[[${#dates.second(date)}]]
获取当前的毫秒：[[${#dates.millisecond(date)}]]
获取当前的月份名称：[[${#dates.monthName(date)}]]
获取当前是星期几：[[${#dates.dayOfWeek(date)-1}]]
thymeleaf如何遍历数据 each循环的使用
首先在html开始标签中引入一个属性
<html lang="en" xmlns:th="http://www.thymeleaf.org"><tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td>[[${emp.lastName}]]</td>
<td th:text="${emp.email}"></td>
<td th:text="${emp.gender}==0?'女':'男'"></td>
<td th:text="${emp.department.departmentName}"></td>
<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}"></td>
<td>
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
<button type="submit" class="btn btn-sm btn-danger deleteBtn">删除</button>
<a th:href="@{/delete/{id}(id=${user.id})}">删除</a>
</td>
</tr>
<from id="deleteEmpForm" th:action="@{/emp/}+${emp.id}" method="post">
<input type="hidden" name="_method" value="delete"> <!--点击就发出delect请求-->
</from><link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.css}" rel="stylesheet"><script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:href="@{/asserts/js/jquery-3.2.1.slim.min.js}"></script>
常用语法
三元运算
条件if
表达式条件不成立 才显示内容
<a th:href="@{/login}" th:unless=${session.user != null}> Login </a>
<!-- 因为是员工添加和修改二合一页面 需要区分 ${emp!=null}?-->
<form th:action="@{/emp}" method="post">
<!--发送put请求修改员工数据 员工不为空时说明这是修改页面 然后生成put-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}"><!--gender等于1选中-->
<label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<!-- 提交的是部门ID -->
<select class="form-control" name="department.id">
<option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${emp!=null}?${dept.departmentName}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="birth" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>迭代（重点）
list 数据迭代
<table>
<tr th:each="user : ${users}">
<td th:text="${user.userName }"></td>
</tr>
</table>
map数据迭代
<table>
<tr th:each="map : ${usermap}">
<td th:text="${map.key }"></td>
<td th:text="${map.value.userName }"></td>
</tr>
</table>
* 星号表达式
<tr th:each="user : ${users}" th:object="${user}">
<td th:text="*{userId}"></td>
<td th:text="*{userName}"></td>
</tr>
模块化
对于一些像侧边栏和 顶部导航等一些课重复利用的代码 写一个公共类，需要的时候引入
下面的footer 就是引入的模板
区别 div是自己的主标签 footer是模板的
<!-- 模板名： 使用thymeleaf配置规则 引入dashboard的头部模板 commons/bar为 templates目录下 commons/bar.html -->
<div th:replace="commons/bar::topbar"></div><!-- 引入侧边栏 #sidebar是引入这一段的id名-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
传参
添加属性 th:classappend 和 th:styleappend
调用后台
th:classappend="${@dist.getType('sys.normal.disable')}"dist.getType 是调用后台里面名字叫dict的Service 里面的 getType 方法
@Service("dict")
public class DictService
{
@Autowired
private ISysDictDataService dictDataService;
/**
* 根据字典类型查询字典数据信息
*
* @param dictType 字典类型
* @return 参数键值
*/
public List<SysDictData> getType(String dictType)
{
return dictDataService.selectDictDataByType(dictType);
}
<sql id="selectDictDataVo">
select dict_code, dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time, remark
from sys_dict_data
</sql>
<select id="selectDictDataByType" parameterType="SysDictData" resultMap="SysDictDataResult">
<include refid="selectDictDataVo"/>
where status = '0' and dict_type = #{dictType} order by dict_sort asc
</select>然后查询出来的值就是th:classappend所在标签的class
新手所写 勿喷
9868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
