标签:function data tempfile nali tail localhost 后台 files version
目录
@(thymeleaf这样玩)
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId><br></dependency>
非springboot项目使用如下依赖:
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>2.1.4</version>
</dependency>
默认的模板映射路径是:src/main/resources/templates
springboot1.4之后,可以使用thymeleaf3来提高效率,并且解决标签闭合问题,配置方式:
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- set thymeleaf version -->
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
<!--set java version-->
<java.version>1.8</java.version>
</properties>
这点与springMVC是相类似的:
#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello!, ' + ${name} + '!'">3333</p>
</body>
</html>
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text={nationality}">Saturn</span>.</p>
</div>
等价于
<div>
<p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a> <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<a href="details.html" th:href="@{order/{orderId}/details(orderId=${o.id})}">Content路径,默认访问static下的order文件夹</a>
条件 if/unless
使用th:if和th:unless属性进行条件判断,th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
switch
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
循环 通过th:each
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!-- 不存在则忽略,显示hello null!(可以通过默认值进行设置)-->
<p th:text="'Hello ' + (${name}?:'admin')">3333</p>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr th:each="emp : ${empList}">
<td th:text="${emp.id}">1</td>
<td th:text="${emp.name}">海</td>
<td th:text="${emp.age}">18</td>
</tr>
</table>
</body>
</html>
使用thymeleaf前提是
<html xmlns:th="www.thymeleaf.org">
Thymeleaf th:each 遍历格式如下
<table border="1">
<thead>
<tr>
<th>工号</th>
<th>姓名</th>
<th>生日</th>
<th>是否已婚</th>
<th>工资</th>
</tr>
</thead>
<tbody>
一定要谨记!!!!下面的userList一定得是后台controller通过把查到的list集合存储到了model中然后才转发到html页面的。
<!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
<tr th:each="user : ${userList}">
<!-- 将用户的主键 uId 存在在 name 属性中-->
<td th:text="${user.uId}" th:name="${user.uId}"></td>
<td th:text="${user.uName}"></td>
<!-- 使用dates对象格式化日期-->
<td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
<!-- 三运运算判断是否已婚-->
<td th:text="${user.isMarry}?'是':'否'"></td>
<td th:text="${user.price}"></td>
</tr>
</tbody>
</table>
通过thymeleaf模板遍历Controller层传递来的数组对象,并通过超链接将对象的某个属性当作参数再传到Controller层,重点是后面的删除链接拿到参数
<!DOCTYPE html>
<!-- 引用thymeleaf模板-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr th:each="user : ${users}">
<td th:text="${user.userId}">1</td>
<td th:text="${user.userName}">yxc</td>
<td th:text="${user.userPwd}">123456</td>
<td th:text="${user.userEmail}">yes</td>
<!-- 用 / 打头, 会自动把上下文路径(比如 http://localhost:8888/demo) 路径加上去. -->
<td style="text-align: center" width="100px"><intput type="button" th:onclick="del([[${user.id}]]);">删除</intput></td>
</tr>
</table>
</body>
</html>
上传的图片回显
把图片上传的文件夹设置为静态资源,然后进行访问,这里的picpath我添加的信息其实是图片的名字,并不是路径
$.ajax({
url:"/demo/getPic",
data:{"kind":"男装"},
type:"post",
dataType:"json",
success:function (data) {
alert(JSON.stringify(data));
var path="D:/tempFiles/files/";
var str = "";
if (data != "") {
for (var i = 0; i < data.length; i++) {
str+= '<a href="/demo/buy" class="floor-item"><div class="item-img hot-img">[外链图片转存失败(img-HtyDtpRY-1562144284695)(https://mp.csdn.net/mdeditor/images/'+data[i].picpath+')]</div> <div class="price clearfix"><span class="pull-left cr fz16">' + data[i].price + '</span> <span class="pull-right c6">进货价</span></div> <div class="name ep" title="'+data[i].name+'">' + data[i].name + '</div></a>';
}
$("#nanzhuang").append(str);
}
}
});
thymeleaf标签之th:href的使用
如果是需要从model中取值的话,写法为
java th:href="@{${model中的name值}}"
java
有的时候我们不止需要从model中进行取值,还需写字符串与model中的值进行拼接,写法为
th:href="@{'字符串'+${model中的nam值}}"
获取到url路径的参数
var str=location.href;//获取url整条路径
var num=str.indexOf("=");//获取“=”之前的字符个数
var slice=str.slice(num+1);//截取多少个字符之后的字符串,从多少个开始截取
alert(slice);//获取到参数
标签:function data tempfile nali tail localhost 后台 files version
原文地址:https://www.cnblogs.com/fantongxue/p/12443258.html