后台管理系统窗体程序：文章管理 ＞ 文章类别管理

已于 2024-11-08 16:26:04 修改
阅读量578 收藏 3
点赞数 5
文章标签： html 前端
于 2024-11-08 16:17:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jourkern/article/details/143628655
版权

 

目录

文章类别管理的的功能介绍：

        1、进入页面

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

        （1）编辑按钮

        （2）删除按钮

        （3）新增分类按钮

        （4）确定，新增按钮

        （5）关闭按钮

一、网页设计

二、html代码

三、css代码

四、js代码

本次项目为后台管理系统，在本系统内的第六个界面为窗体程序内的文章类别管理页面，作为首页内大分类下的小分类项目，需要和首页进行联合

文章类别管理的的功能介绍：

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

        1、进入页面

        在首页进入时需要变换分类的样式，使用排他思想即可进行该项操作，而在大分类展开小分类的事件中使用基础动画效果即可

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

        （1）编辑按钮

        点击时跳出模态框，并将数据库的值渲染至模态框，以完成值的编辑

        （2）删除按钮

        通过唯一标识符来确定需要删除的具体对象，并返回数据库更改，再次渲染新的数据

        （3）新增分类按钮

        点击跳出模态框，并清空模态框内的值，写入所需的值并返回数据库加入数据

        （4）确定，新增按钮

        点击写入数据至数据库，并关闭模态框，重新渲染表格更改样式

        （5）关闭按钮

        关闭模态框

一、网页设计

二、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/ACM.css">

</head>

<body>
    <div class="mask" id="mask">
        <div class="modal" id="moadl">
            <p class="modal-p" id="modal-p">编辑分类</p>
            <hr>
            <p class="modal-span" id="modal-span">名称:</p>
            <input type="text" class="modal-ipt1" id="modal-ipt1">
            <p class="modal-span" id="modal-span">Slug:</p>
            <input type="text" class="modal-ipt2" id="modal-ipt2">
            <button class="modal-btn1" id="modal-btn1">关闭</button>
            <button class="modal-btn2" id="modal-btn2">确定</button>


        </div>
    </div>
    <div class="middle">


        <div class="middle-top">文章类别管理</div>

        <div class="middle-center">
            <table id="table" class="table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>Slug</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>

        <div class="middle-bottom">
            <button class="mb-btn" id="mb-btn">新增分类</button>
        </div>


    </div>


</body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/move.js"></script>
<script src="./JS/ACM.js"></script>

</html>

三、css代码

.middle
{
    font-size: 16px;
    width:calc(100vw - 200px) ;
    height: 100%;
    background-color: #f2f3f5;
    margin: 3vh 5.5vw;
    position: relative;
}
.middle-top
{
    height: 40px;
    width:calc(100vw - 200px) ;
    background-color: #fbfbfb;
    padding:0px 20px;
    line-height: 40px;
    border:1px solid #e7e7e9;
}

.middle-center
{
    min-height: 400px;
    max-height: 80vh;
    width:calc(100vw - 200px) ;
    background-color:white;
    border:1px solid #e7e7e9;
    position: relative;
    padding: 20px;
    padding-bottom: 100px;

}
.table
{
    border: 1px solid #dddddd;
    border-collapse: collapse;
    width: 100%;
}

td ,th{
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
.middle-bottom
{
    position: absolute;
}

.tb-btnIn
{
color: white;
background-color: #5bc0de;
border-radius: 3px;
border: none;
width: 50px;
height: 25px;
cursor: pointer;
}
.tb-btnOff
{
color: white;
background-color: #d9534f;
border-radius: 3px;
border: none;
width: 50px;
height: 25px;
cursor: pointer;
}

.mask
{
    padding: 0;
    margin: 0;
    width: 100vw;
    height:105vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: -40px;
    z-index: 1000;
    display: none;
}

.modal
{
width: 700px;
height: 500px;
margin: 50px auto;
background-color: white;
font-size: 20px;
position: relative;
}
.modal-p
{
    font-size: 25px;
    line-height: 80px;
    margin-left:30px;
    color: #212121;

}
.modal-span{
margin: 40px 0px 20px 60px;
color: #313030;
}

.modal input{
    margin: 0px 0px 0px 70px;
    width: 550px;
    height: 45px;border: 1px solid #dddddd;
    border-radius: 3px;
    padding-left: 10px;
    font-size: 16px;
    outline: none;;
}

.modal button
{
    color: white;
    width: 70px;
    height: 40px;
    position: absolute;
    border: none;
    bottom: 40px;
    border-radius: 5px;
    cursor: pointer;
}
.modal-btn1
{
    background-color: #6a747d;
    right: 120px;
}
.modal-btn2
{
    background-color: #0077ff;
    right: 40px;
}

.mb-btn
{
    width: 90px;
    height: 30px;
    border: none;
    position: absolute;
    bottom: 10px;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    left: 600px;
}

四、js代码

//创建一个空字符串用于拼接
var index;

//调用函数渲染表格
getTable()

//关闭按钮的点击事件
$("#modal-btn1").on("click", function () {
    // 渲染在模态框内的按钮，用来关闭模态框
    $("#mask").css("display", "none")
})


//删除按钮的点击事件
$("tbody").on("click", "#del", function (e) {
    // 获取当前点击的按钮的索引
    var index = $(this).attr("index");
    // 提示用户是否确定删除
    var r = confirm("确定删除吗？")
    // 如果用户点击确定
    if (r) {
        // 调用删除接口
        $.ajax({
            // 接口地址
            url: "http://localhost:8080/api/v1/admin/category/delete",
            // 请求方式
            type: "post",
            // 提交的数据
            data: {
                id: index
            },
            // 请求头
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            // 当请求成功时
            success: function (res) {
                // console.log(res);
                // 如果msg是删除成功
                if (res.msg == "删除成功") {
                    // 渲染表格
                    getTable()
                }

            },
            // 请求失败时
            error: function (err) {
                console.log(err);

            }
        })
    }
})

//新增分类的点击事件
$("#mb-btn").on("click", function (e) {
    // 点击时显示模态框
    $("#mask").css("display", "block")
    // 点击时将模态框的标题改为新增分类
    $("#modal-p").html("新增分类")
    // 将模态框内的按钮改为新增
    $("#modal-btn2").html("新增")
    // 清空输入框
    $("#modal-ipt1").val("")
    $("#modal-ipt2").val("")
    //将index置空 
    index = null

})

//确定按钮点击事件
$("#modal-btn2").on("click", function () {
    // 如果index存在值
    if (index) {
        // 两个输入框都有值
        if ($("#modal-ipt1").val() && $("#modal-ipt2").val()) {
            // 调用修改接口
            $.ajax({
                // 接口地址
                url: "http://localhost:8080/api/v1/admin/category/edit",
                // 请求方式
                type: "post",
                // 提交的数据
                data: {
                    name: $("#modal-ipt1").val(),
                    slug: $("#modal-ipt2").val(),
                    id: index
                },
                // 请求头
                headers:
                {
                    "Authorization": sessionStorage.getItem("token")
                },
                // 请求数据成功
                success(res) {
                    console.log(res)
                    // 如果msg是修改成功
                    if (res.msg == "修改成功") {
                        // 关闭模态框
                        $("#mask").css("display", "none")
                        // 渲染表格
                        getTable()
                    }
                },
                // 请求数据失败
                error(err) {
                    // 打印错误信息
                    console.log(err)
                }

            })
        }
    }

    //新增分类按钮点击事件
    else {
        // 两个输入框都有值
        if ($("#modal-ipt1").val() && $("#modal-ipt2").val()) {
            // 调用新增接口
            $.ajax({
                // 接口地址
                url: "http://localhost:8080/api/v1/admin/category/add",
                // 请求方式
                type: "post",
                // 提交的数据
                data: {
                    // 数据为输入框内的值
                    name: $("#modal-ipt1").val(),
                    slug: $("#modal-ipt2").val(),
                },
                // 请求头
                headers:
                {
                    "Authorization": sessionStorage.getItem("token")
                },
                // 请求数据成功
                success(res) {
                    console.log(res)
                    // 如果msg是修改成功
                    if (res.msg == "创建成功") {
                        // 关闭模态框
                        $("#mask").css("display", "none")
                        // 渲染表格
                        getTable()
                    }
                },
                // 请求数据失败
                error(err) {
                    // 打印错误信息
                    console.log(err)
                }

            })
        }
    }
})


//编辑按钮的点击事件
$("tbody").on("click", "#edit", function () {
    // 将模态框的标题改为编辑分类
    $("#modal-p").html("编辑分类")
    // 将模态框内的按钮改为确定
    $("#modal-btn2").html("确定")
    // 获取当前点击的按钮的index属性
    index = $(this).attr("index");
    // 显示模态框
    $("#mask").css("display", "block")

    // 接口
    $.ajax({
        // 地址接口
        // 需携带唯一标识符进入已确定需要编辑的分类
        url: "http://localhost:8080/api/v1/admin/category/search?id=" + ($(this).attr("index")),
        // 请求方式
        type: "get",
        // 请求头
        headers: {
            "Authorization": sessionStorage.getItem("token")
        },
        // 请求数据成功
        success: function (res) {
            // 当msg返回的数值为获取成功时
            if (res.msg == "获取成功") {

                // 将数据库内的值赋值给模态框
                $("#modal-ipt1").val(res.data[0].name)
                $("#modal-ipt2").val(res.data[0].slug)
            }
        },
        // 请求数据失败
        error: function (err) {
            // 打印错误信息
            console.log(err);
        }
    })
})

//表格渲染，封装为一个函数方便调用
function getTable() {
    // 调用
    $.ajax
        ({
            //请求地址
            url: "http://localhost:8080/api/v1/admin/category/list",
            //  请求方式
            type: "get",
            //请求头
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            //请求数据成功
            success: function (res) {
                // 当msg返回的数值为获取成功时
                if (res.msg == "获取成功") {
                    //将数据提取到自定义数组中
                    var data = res.data;
                    // 定义一个空字符串
                    var str = "";
                    //遍历该伪数组，并拼接成表格
                    for (var item of data) {
                        // 拼接时需要加上item.id以分辨唯一标识符
                        str += `<tr>
                            <td>${item.name}</td>
                            <td>${item.slug}</td>
                            <td>
                            <button class="tb-btnIn" id="edit" index="${item.id}">编辑</button>
                            <button class="tb-btnOff" id="del" index="${item.id}">删除</button>
                            </td>
                                </tr>`
                    }
                    // 将拼接好的字符串赋值给tbody
                    $("tbody").html(str)
                    //表格的隔行换色 
                    $("tr:even").css("background", "#f9f9f9")

                }
            },
            //请求数据失败
            error: function (err) {
                // 打印错误信息
                console.log(err);
            }
        })
}

天郁青
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值