Why “href” and “th:href” exist at the same time?

问题

I am reading a page using Thymeleaf.

In "Edit page", there is a "Back" button for going back to "User List Page". The strange thing for me is this button has "href" and "th:href" at the same time. 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" />
                &nbsp; &nbsp; &nbsp;
                <a href="/toAdd" th:href="@{/list}" class="btn btn-info">Back</a>
            </div>

        </div>
    </form>
</div>
</body>
</html>

It is obvious that "th:href" is for going back. Is there any opition on what is the function of the atrribute "href"?

回答1:

ThymeLeaf is designed to use the same file for both as prototype you can view in your browser as well as a working template file. What this means in practice is that if you want, you can open the template file in a browser without actually running it and it still looks okay. For example, in this code:

<a href="/toAdd" th:href="@{/list}" class="btn btn-info">Back</a>

If you open the file directly in a browser, the browser will ignore the th:href (because it doesn't know what to do with it) and instead use href="/toAdd". However, when you run it through the templating engine on a server, href="/toAdd" is replaced with the result of the dynamic expression th:href="@{/list}".

This is more easily shown with a table. Like this:

<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>

When you open that in a browser, you'll see a table with a single row (Onions, 2.41, yes). But when you run it through the server, the actual content of the table is replaced with whatever data exists in the ${prods} variable.

来源：https://stackoverflow.com/questions/54615323/why-href-and-thhref-exist-at-the-same-time

标签

thymeleaf