Skip to content
GitLab
Commit 179c302d authored by Zhu yizheng's avatar Zhu yizheng
Browse files

Merge branch 'feature' into 'main' 

fronted

See merge request !1
parents 815c3c5b dd97b4e5
Hide whitespace changes
Inline Side-by-side
comment.js 0 → 100644
View file @ 179c302d
// 获取 DOM 元素
const usernameInput = $('#username');
const commentInput = $('#comment');
const submitButton = $('#submit');
const commentsList = $('#commentsList');
const paginationContainer = $('#pagination');
let currentPage = 1;
const commentsPerPage = 2;
let totalComments = 0;
// 初始化加载第一页评论
loadComments(currentPage);
// 添加评论
submitButton.on('click', function () {
const name = usernameInput.val().trim();
const content = commentInput.val().trim();
if (!name || !content) {
alert('请填写用户名和评论内容！');
return;
}
$.ajax({
url: 'http://localhost:8080/comment/add',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify({ name, content }),
success: function (res) {
if (res.code === 0) {
alert('评论成功！');
usernameInput.val('');
commentInput.val('');
loadComments(currentPage); // 重新加载当前页
} else {
alert('添加失败：' + res.msg);
}
},
error: function () {
alert('请求失败，请稍后重试');
}
});
});
// 加载评论
function loadComments(page) {
$.get('http://localhost:8080/comment/get', { page, size: commentsPerPage }, function (res) {
if (res.code === 0) {
totalComments = res.data.total;
displayComments(res.data.comments);
updatePagination();
} else {
alert('加载评论失败：' + res.msg);
}
});
}
// 渲染评论
function displayComments(comments) {
commentsList.empty();
comments.forEach(comment => {
const li = $('<li>').addClass('comment-item');
const usernameSpan = $('<span>').addClass('comment__username').text(comment.name);
const contentSpan = $('<span>').addClass('comment__content').text(comment.content);
const deleteButton = $('<button>').addClass('commonButton').text('删除');
deleteButton.on('click', function () {
if (!confirm('确定删除这条评论吗？')) return;
// 修正：将id放在URL的query参数中
$.post('http://localhost:8080/comment/delete?id=' + comment.id, function (res) {
if (res.code === 0) {
alert('删除成功');
loadComments(currentPage);
} else {
alert('删除失败：' + res.msg);
}
});
});
li.append(usernameSpan).append('<br>').append(contentSpan).append(deleteButton);
commentsList.append(li);
});
}
// 渲染分页
function updatePagination() {
paginationContainer.empty();
const totalPages = Math.ceil(totalComments / commentsPerPage);
for (let i = 1; i <= totalPages; i++) {
const pageButton = $('<button>').addClass('pagination-button').text(i);
if (i === currentPage) {
pageButton.prop('disabled', true);
}
pageButton.on('click', function () {
currentPage = i;
loadComments(currentPage);
});
paginationContainer.append(pageButton);
}
}
index.html 0 → 100644
View file @ 179c302d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="comment.js" defer></script>
<title>评论区</title>
</head>
<body>
<div class="inputArea">
<h3 class="formTitle1">user name</h3>
<input type="text" id="username" placeholder="请输入用户名">
<h3 class="formTitle2">comment content</h3>
<input type="text" id="comment" placeholder="请输入评论内容">
<br>
<button id="submit" class="commonButton">提交</button>
</div>
<div class="commentsArea">
<ul id="commentsList"></ul>
</div>
<div id="pagination"></div>
</body>
</html>
\ No newline at end of file
style.css 0 → 100644
View file @ 179c302d
/* 整个输入模块区域作为一个卡片框 */
.inputArea {
width: 500px;
margin: 50px auto; /* 上下边距50px，左右自动居中 */
padding: 20px;
background-color: #fefefe;
border: 2px solid #ddd;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.commentsArea{
width: 500px;
margin: 50px auto; /* 上下边距50px，左右自动居中 */
}
/* 标题样式 */
.inputArea h3 {
margin: 12px 0 6px 0;
font-size: 16px;
color: #333;
}
/* 输入框样式：相对于 inputArea 宽度设置 */
.inputArea input[type="text"] {
width: 90%;
height: 36px;
padding: 0 10px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
/* 提交按钮样式 */
#submit {
width: 100px;
height: 36px;
border: none;
border-radius: 6px;
background-color: #333;
color: white;
font-size: 16px;
cursor: pointer;
display: block;
margin-top: 15px;
margin-left: 70%;
}
/* 提交按钮样式 */
.commonButton {
width: 100px;
height: 36px;
border: none;
border-radius: 6px;
background-color: #333;
color: white;
font-size: 16px;
cursor: pointer;
display: block;
margin-top: 15px;
margin-left: 70%;
}
#commentsList {
list-style: none;
padding-left: 0;
margin: 0;
}
/* 评论项样式 */
#commentsList {
padding: 0;
margin: 0;
list-style: none;
}
#commentsList li {
width: 100%;
margin: 18px auto 0 auto; /* 上下留白更自然 */
padding: 20px 26px 18px 22px;
background-color: #fafbfc;
box-shadow: 0 4px 16px rgba(60, 60, 60, 0.07);
font-size: 17px;
color: #333;
box-sizing: border-box;
border-bottom: none; /* 取消底部实线 */
position: relative;
transition: box-shadow 0.2s;
border-left:4px solid #333
}
#commentsList li:not(:last-child)::after {
content: "";
display: block;
position: absolute;
left: 24px;
right: 24px;
bottom: -10px;
height: 1px;
background: #eee;
opacity: 0.85;
}
#commentsList li:hover {
background-color: #fafbfc;
box-shadow: 0 0 20px #cbcccd50;
transform: scale(1.01);
border-left: red 5px solid;
}
#commentsList li:active {
background-color: #eff1f3;
transition: all 0.25s;
-webkit-transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
}
/* 用户名样式 */
.comment__username {
font-weight: 600;
font-size: 19px;
color: black;
letter-spacing: 0.5px;
display: block;
margin-bottom: 8px;
}
/* 评论内容样式 */
.comment__content {
font-size: 17px;
color: #454d5d;
line-height: 1.65;
margin-top: 0;
}
#pagination {
text-align: center;
margin-top: 20px;
}
.pagination-button {
display: inline-block;
padding: 8px 16px;
margin: 4px ;
background-color: #343434;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment