后台管理系统窗体程序：评论管理

评论管理的功能介绍：

1、进入页面

2、页面内的各种功能设计

（1）网页内的表格

（2）拒绝按钮，批准按钮

（3）删除按钮

（4）页面翻页跳转按钮

一、网页设计编辑

二、html代码

三、css代码

四、js代码

本次项目为后台管理系统，在本系统内的第六个界面为窗体程序内的评论管理页面，作为首页内大分类下项目，我们可以直接点击跳转

评论管理的功能介绍：

在进行本页面时，我们将进行多个功能的串联

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.totalPagevar arr = res.data.datavar 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)}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/466792.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！