Skip to content
GitLab
Commit 943bca90 authored by Zhu yizheng's avatar Zhu yizheng
Browse files

前端适配接口文档

parent a0ca0d92
Show whitespace changes
Inline Side-by-side
comment.js
View file @ 943bca90
// 获取 DOM 元素 // 获取 DOM 元素
const usernameInput = document.getElementById('username'); const usernameInput = $('#username');
const commentInput = document.getElementById('comment'); const commentInput = $('#comment');
const submitButton = document.getElementById('submit'); const submitButton = $('#submit');
const commentsList = document.getElementById('commentsList'); const commentsList = $('#commentsList');
const paginationContainer = document.getElementById('pagination'); // 翻页容器 const paginationContainer = $('#pagination');
// 计数器 let currentPage = 1;
let count = 0; const commentsPerPage = 2;
let currentPage = 1; // 当前页码 let totalComments = 0;
const commentsPerPage = 2; // 每页显示的评论数
// 初始化加载第一页评论
// 存储评论数据 loadComments(currentPage);
let comments = [];
// 添加评论
// 监听提交按钮点击事件 submitButton.on('click', function () {
submitButton.addEventListener('click', function () { const name = usernameInput.val().trim();
usernameInput.value = usernameInput.value.trim(); const content = commentInput.val().trim();
commentInput.value = commentInput.value.trim();
if (!name || !content) {
// 验证输入是否为空
if (usernameInput.value === '' || commentInput.value === '') {
alert('请填写用户名和评论内容！'); alert('请填写用户名和评论内容！');
return; return;
} }
console.log('提交评论:', usernameInput.value, commentInput.value); $.ajax({
count++; // 增加计数器 url: '/comment/add',
console.log('当前评论数量:', count); 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('请求失败，请稍后重试');
}
});
});
// 将评论添加到评论数组中 // 加载评论
const newComment = { function loadComments(page) {
username: usernameInput.value, $.get('/comment/get', { page, size: commentsPerPage }, function (res) {
content: commentInput.value if (res.code === 0) {
}; totalComments = res.data.total;
comments.push(newComment); displayComments(res.data.comments);
updatePagination();
} else {
alert('加载评论失败：' + res.msg);
}
});
}
// 清空输入框 // 渲染评论
usernameInput.value = ''; function displayComments(comments) {
commentInput.value = ''; commentsList.empty();
// 更新评论显示 comments.forEach(comment => {
displayComments(); const li = $('<li>').addClass('comment-item');
updatePagination();
});
// 显示评论 const usernameSpan = $('<span>').addClass('comment__username').text(comment.name);
function displayComments() { const contentSpan = $('<span>').addClass('comment__content').text(comment.content);
// 清空评论列表 const deleteButton = $('<button>').addClass('commonButton').text('删除');
commentsList.innerHTML = '';
// 计算当前页显示的评论范围
const startIndex = (currentPage - 1) * commentsPerPage;
const endIndex = Math.min(startIndex + commentsPerPage, comments.length);
// 根据当前页显示评论
for (let i = startIndex; i < endIndex; i++) {
const comment = comments[i];
const li = document.createElement('li');
li.className = 'comment-item'; // 给评论项添加类名（可选，方便整体样式）
// 创建用户名元素（span）
const usernameSpan = document.createElement('span');
usernameSpan.className = 'comment__username'; // 用户名类名（用于CSS）
usernameSpan.textContent = comment.username;
// 创建评论内容元素（span）
const contentSpan = document.createElement('span');
contentSpan.className = 'comment__content'; // 评论内容类名（用于CSS）
contentSpan.textContent = comment.content;
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.className = 'commonButton'; // 删除按钮类名（用于CSS）
// 添加删除按钮的点击事件
deleteButton.textContent = '删除'; // 设置删除按钮文本
deleteButton.addEventListener('click', function () {
// 删除当前评论
comments.splice(i, 1); // 从评论数组中移除该评论
displayComments(); // 重新渲染评论
updatePagination(); // 更新分页
});
// 将元素组装到li中（顺序：用户名 → 分隔符 → 内容） deleteButton.on('click', function () {
li.appendChild(usernameSpan); if (!confirm('确定删除这条评论吗？')) return;
li.appendChild(document.createElement('br')); // 添加换行符
li.appendChild(contentSpan);
li.appendChild(deleteButton); // 添加删除按钮
commentsList.appendChild(li); // 将li添加到评论列表中 $.post('/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() { function updatePagination() {
// 清空分页容器 paginationContainer.empty();
paginationContainer.innerHTML = ''; const totalPages = Math.ceil(totalComments / commentsPerPage);
const totalPages = Math.ceil(comments.length / commentsPerPage); // 计算总页数
// 生成翻页按钮
for (let i = 1; i <= totalPages; i++) { for (let i = 1; i <= totalPages; i++) {
const pageButton = document.createElement('button'); const pageButton = $('<button>').addClass('pagination-button').text(i);
pageButton.className = 'pagination-button'; // 翻页按钮类名（用于CSS）
pageButton.textContent = i; if (i === currentPage) {
pageButton.addEventListener('click', function () { pageButton.prop('disabled', true);
currentPage = i; // 设置当前页码 }
displayComments(); // 更新评论显示
pageButton.on('click', function () {
currentPage = i;
loadComments(currentPage);
}); });
paginationContainer.appendChild(pageButton);
paginationContainer.append(pageButton);
} }
} }
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