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

前端适配接口文档

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