我读通过Thymeleaf的页面。
在“编辑页面”,对于回到“用户列表页面”“上一步”按钮。我奇怪的是此按钮的“href”和“日:HREF”在同一时间。 image detail of the button
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>user</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>修改用户</h1>
<br/><br/>
<div class="with:80%">
<form class="form-horizontal" th:action="@{/edit}" th:object="${user}" method="post">
<input type="hidden" name="id" th:value="*{id}" />
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">userName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName" id="userName" th:value="*{userName}" placeholder="userName"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" th:value="*{password}" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit" class="btn btn-info" />
<a href="/toAdd" th:href="@{/list}" class="btn btn-info">Back</a>
</div>
</div>
</form>
</div>
</body>
</html>
很明显,“日:HREF”是回头路。是否有什么属性的“href”的功能的任何选项?
ThymeLeaf被设计为使用相同的文件既作为原型,你可以在你的浏览器,以及一个工作模板文件查看。这意味着在实践中,如果你愿意,你可以打开一个浏览器中的模板文件而不实际运行它,它仍然看起来还好。例如,在这样的代码:
<a href="/toAdd" th:href="@{/list}" class="btn btn-info">Back</a>
如果直接在浏览器中打开文件时,浏览器会忽略th:href
(因为它不知道该怎么用它做什么),而使用href="/toAdd"
。但是,当您通过服务器上的模板引擎运行,href="/toAdd"
被替换为动态表情th:href="@{/list}"
的结果。
这也更容易与表中所示。像这样:
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
当您在浏览器中打开,你会看到一个单行(洋葱,2.41,是)一个表。但是,当你通过服务器运行,该表的实际内容被替换的任何数据在${prods}
变量存在。