在Spring Boot框架下的web评论系统,用Thymeleaf实现前端设计,给出index.html、comment.html和reply.html文件
时间: 2023-06-26 21:06:58 浏览: 151
index.html:
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Comment System</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<h1>Comment System</h1>
<form th:action="@{/comment}" method="post">
<label>Username:</label>
<input type="text" name="username" required>
<br><br>
<label>Comment:</label>
<textarea name="comment" rows="5" required></textarea>
<br><br>
<button type="submit">Submit</button>
</form>
<br><br>
<table>
<tr>
<th>Username</th>
<th>Comment</th>
<th>Date</th>
</tr>
<tr th:each="comment : ${comments}">
<td th:text="${comment.username}"></td>
<td th:text="${comment.comment}"></td>
<td th:text="${comment.date}"></td>
<td><a th:href="@{/reply/{id}(id=${comment.id})}">Reply</a></td>
</tr>
</table>
</body>
</html>
```
comment.html:
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Comment System</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<h1>Comment System</h1>
<div class="comment">
<h2 th:text="${comment.username}"></h2>
<p th:text="${comment.comment}"></p>
<p th:text="${comment.date}"></p>
</div>
<br><br>
<form th:action="@{/reply}" method="post">
<input type="hidden" name="commentId" th:value="${comment.id}">
<label>Username:</label>
<input type="text" name="username" required>
<br><br>
<label>Reply:</label>
<textarea name="reply" rows="5" required></textarea>
<br><br>
<button type="submit">Submit</button>
</form>
<br><br>
<ul>
<li th:each="reply : ${replies}">
<p th:text="${reply.username}"></p>
<p th:text="${reply.reply}"></p>
<p th:text="${reply.date}"></p>
</li>
</ul>
</body>
</html>
```
reply.html:
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Comment System</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<h1>Comment System</h1>
<div class="comment">
<h2 th:text="${comment.username}"></h2>
<p th:text="${comment.comment}"></p>
<p th:text="${comment.date}"></p>
</div>
<br><br>
<div class="reply">
<h3 th:text="${reply.username}"></h3>
<p th:text="${reply.reply}"></p>
<p th:text="${reply.date}"></p>
</div>
</body>
</html>
```
阅读全文