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

 

目录

评论管理的功能介绍:

        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.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)


}







 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值