目录
本次项目为后台管理系统，在本系统内的第六个界面为窗体程序内的评论管理页面，作为首页内大分类下项目，我们可以直接点击跳转
评论管理的功能介绍：
在进行本页面时，我们将进行多个功能的串联
1、进入页面
在首页进入时需要变换分类的样式，使用排他思想即可进行该项操作，而在大分类展开小分类的事件中使用基础动画效果即可
2、页面内的各种功能设计
（1）网页内的表格
通过调取数据库来渲染数据至表格内，同时通过判断值来选择渲染按钮
（2）拒绝按钮，批准按钮
改变其状态，并返回数据库后重新渲染
（3）删除按钮
直接通过唯一标识符来删除该行，并返回数据库后重新渲染
（4）页面翻页跳转按钮
通过获取数据库内表格的页码值和条目值（后端数据库返回）来渲染，并在修改后写入数据库并再次渲染
一、网页设计
二、html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>评论管理</title>
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/comment.css">
</head>
<body>
<div class="header" id="header">评论列表</div>
<div class="main" id="main">
<table>
<thead>
<th id="author">作者</th>
<th id="comment">评论</th>
<th id="commentObject">评论对象</th>
<th id="submission">提交时间</th>
<th id="state">状态</th>
<th id="operate">操作</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="btm" id="btm">
<span class="btmup" id="btmup">上一页</span>
<input type="text" class="btmtext" id="btmtext">
<span style="background-color: #f2f3f5;" id="btmt"></span>
<span class="btmload" id="btmload">跳转</span>
<span class="btmdown" id="btmdown">下一页</span>
</div>
</body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/move.js"></script>
<script src="./JS/comment.js"></script>
</html>三、css代码
button{ cursor: pointer; } body { font-size: 16px; background-color: #f2f3f5; } .header { width: 89vw; height: 4vh; background-color: #fbfbfb; margin: 3vh auto; margin-bottom: 0px; line-height: 4vh; border: 1px solid #a2a2a3; padding-left: 1vw; } .main { width: 88vw; background-color: #ffffff; margin: 3vh auto; margin-top: 0px; border: 1px solid #a2a2a3; border-top: none; padding: 2vh 1vw; } table { border: 1px solid #a2a2a3; border-collapse: collapse; font-size: 14px; } th ,td{ border: 1px solid #a2a2a3; height: 55px; } td { padding:0px 10px; } #author { width: 5vw; } #comment { width: 20vw; } #commentObject { width: 40vw; } #submission { width: 6vw; } #state { width: 5vw; } #operate { width: 12vw; } .btn1 { background-color: #5bc0de; border: 1px solid #48b9da; width: 60px; height: 30px; color: white; font-size: 12px; border-radius: 5px; } .btn3 { background-color: #f0ad4e; border: 1px solid #eea43b; width: 60px; height: 30px; color: white; border-radius: 5px; font-size: 12px; } .btn2 { background-color: #d9534f; border: 1px solid #d4413c; width: 60px; height: 30px; color: white; border-radius: 5px; font-size: 12px; } .btm { width: 600px; position: fixed; z-index: 9999; bottom: 20px; left: 50%; margin-left: -220px; } .btm span{ padding: 10px 20px; background-color: #c5c5c5; border-radius: 10px; margin: 0px 10px; cursor: pointer; } .btmtext{ min-width: 20px; max-width: 50px; /* padding-left: 5px; */ text-align: center; outline: none; height: 30px; }
四、js代码
//入口函数
var page = 1;
var totalpage
var id;
getTable()
// $("#btmt").val(totalpage)
$("#btmup").on("click", function () {
if (page > 1) {
page--
// console.log(page)
getTable()
}
})
$("#btmdown").on("click", function () {
if (page < totalpage) {
page++
// console.log(page)
getTable()
}
})
$("#btmload").on("click", function () {
var text = $("#btmtext").val()
// console.log(text);
if (text <= totalpage && text > 0) {
page = text;
getTable()
} else {
alert("请输入正确的页数")
$("#btmtext").val("")
$("#btmtext").val(page)
}
})
$("tbody").on("click", "#btn1", function () {
// console.log(e.index);
id = $(this).attr("index")
console.log(id)
$.ajax({
url: "http://localhost:8080/api/v1/admin/comment/pass",
type: "post",
data:
{
id
},
headers: {
"Authorization": sessionStorage.getItem("token")
},
success(res) {
if (res.msg == "已通过") {
getTable()
alert("已批准通过该评论")
}
},
error(err) {
console.log(err);
}
})
})
$("tbody").on("click", "#btn2", function () {
// console.log(e.index);
var r = confirm("确定要删除吗")
if (r) {
id = $(this).attr("index")
console.log(id)
$.ajax({
url: "http://localhost:8080/api/v1/admin/comment/delete",
type: "post",
data:
{
id
},
headers: {
"Authorization": sessionStorage.getItem("token")
},
success(res) {
if (res.msg == "已删除") {
getTable()
alert("已删除该评论")
}
},
error(err) {
console.log(err);
}
})
}
})
$("tbody").on("click", "#btn3", function () {
// console.log(e.index);
id = $(this).attr("index")
console.log(id)
$.ajax({
url: "http://localhost:8080/api/v1/admin/comment/reject",
type: "post",
data:
{
id
},
headers: {
"Authorization": sessionStorage.getItem("token")
},
success(res) {
if (res.msg == "已拒绝") {
getTable()
alert("已拒绝通过该评论")
}
},
error(err) {
console.log(err);
}
})
})
function getTable() {
//表格渲染
$.ajax({
url: "http://localhost:8080/api/v1/admin/comment/search?page=" + page + "&perpage=10",
type: "get",
data: {
},
headers: {
"Authorization": sessionStorage.getItem("token")
},
success(res) {
console.log(res);
if (res.msg == "数据获取成功") {
// console.log(1);
$("#btmt").html("共 " + res.data.totalPage + " 页")
totalpage = res.data.totalPage
var arr = res.data.data
var str = "";
for (var item of arr) {
str += `<tr>
<td style="text-align: center;">${item.author}</td>
<td>${item.content}</td>
<td>${item.title}</td>
<td style="text-align: center;">${item.time}</td>
<td style="text-align: center;">${item.state}</td>
`
if (item.state == "待审核") {
str += `
<td style="text-align: center;">
<button class="btn1" id="btn1" index=${item.id}>批准</button>
<button class="btn2" id="btn2" index=${item.id}>删除</button>
</td>`
}
else if (item.state == "已拒绝") {
str += `
<td style="text-align: center;">
<button class="btn2" id="btn2" index=${item.id}>删除</button>
</td>`
}
else {
str += `
<td style="text-align: center;">
<button class="btn3" id="btn3" index=${item.id}>拒绝</button>
<button class="btn2" id="btn2" index=${item.id}>删除</button>
</td>`
}
}
$("tbody").html(str)
// console.log(totalpage);
$("tr:odd").css("background", "#f1f1f1")
}
},
error(err) {
console.log(err);
}
})
$("#btmtext").val(page)
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
