thymeleaf 簡易使用範例

thymeleaf 範例:css

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>學生列表</title>
    <!--引用static下的css文件-->
    <!--<link th:href="@{/index.css}" rel="stylesheet"></link>-->
</head>
<body>
<h3>學生信息表</h3>
<!--判斷學生列表是否爲空-->
<table th:unless="${#lists.isEmpty(studentList)}" border="1" cellpadding="10">
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
        <th>電話</th>
    </tr>
    <!--循環遍歷學生列表-->
    <tr th:each="student : ${studentList}" align="center">
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.gender}"></td>
        <td th:text="${student.age}"></td>
        <td th:text="${student.telephone}"></td>
    </tr>
</table>
<div class="msg" th:if="${#lists.isEmpty(studentList)}">暫時沒有學生信息!</div>
<br>
<h3>新增:</h3>
<form method="POST" action="/addStudent">
    <input name="id" id="id" type="text" placeholder="編號"/><br/>
    <input name="name" id="name" type="text" placeholder="姓名"/><br/>
    <input name="gender" id="gender" type="text" placeholder="性別"/><br/>
    <input name="age" id="age" type="text" placeholder="年齡"/><br/>
    <input name="telephone" id="telephone" type="text" placeholder="電話"/><br/>
    <input type="submit" value="新增+"/>
    <input type="button" value="刷新" onclick="location.reload()"/>
</form>
<br>
<h3>根據編號刪除:</h3>
<form action="/deleteStudentById" method="post">
    <span><input type="text" name="id" placeholder="編號"></span><br/>
    <span><button type="submit">刪除</button><input type="button" value="刷新" onclick="location.reload()"/></span>
</form>
</body>
</html>

 

 

界面截圖:html

相關文章
相關標籤/搜索