master

分支 (1)

管理

管理

master

filter02
/
rules.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>过滤规则管理</title>
        <style>
            .td-editBtn,.td-delBtn{
                border: none;
                cursor: pointer;
                margin: 5px;
                padding: 5px 10px;
                border-radius: 5px;
            }
            .td-editBtn{
                background-color: lightblue;
            }
            .td-delBtn{
                background-color: lightcoral;
            }
            .td-editBtn:hover,.td-delBtn:hover{
                /* 透明度 */
                opacity: 0.8;
            }
            .td-editBtn:active,.td-delBtn:active{
                background-color:antiquewhite;
            }
            #form1{
                display: none;
            }
        </style>
    </head>
    <body>
        <button onclick="form1.style='display: block;'">新增规则</button>

        <form id="form1" onsubmit="return validForm(this)">
            <!-- 用于修改时保存当前修改的用户ID -->
            <input type="hidden" name="id" id="uid" value="0">
            <div>
                <label>规则内容</label>
                <input type="text" name="title" placeholder="输入bpf过滤规则">
            </div>
            <div>
                <label>默认是否开启</label>
                <input type="radio" name="flag" value="1" >开启
                <input type="radio" name="flag" value="0" checked>关闭
            </div>

            <div>
                <button>提交</button>
            </div>
        </form>

        <table border="1" cellspacing="0" cellpadding="10" align="center">
            <caption> <h3>过滤规则管理</h3></caption>
            <thead>
                <th>ID</th>
                <th>规则描述</th>
                <th>是否开启</th>
                <th>添加时间</th>
                <th>最后变更时间</th>
                <th>功能列表</th>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <script>
            window.onload=function(){
                loaddata(); // 加载数据
            }

            function loaddata(){
                fetch("/cgi-bin/rules").then(resp=>resp.json()).then(data=>{
                    // data的格式： {code: 0, datas: [{id: 1, title: "", flag: "0", add_time: "", "op_time":""}, {}...]}
                    console.log(data);
                    if(data.code == 0){
                        data.datas.forEach( item => {
                            let tr = document.createElement("tr");
                            let td1 = document.createElement("td");
                            let td2 = document.createElement("td");
                            let td3 = document.createElement("td");
                            let td4 = document.createElement("td");
                            let td5 = document.createElement("td");
                            let td6 = document.createElement("td");

                            td1.innerText = item.id;
                            td2.innerText = item.title;
                            td3.innerText = item.flag == '1'?"已开启":"已关闭";
                            td4.innerText = item.add_time;
                            td5.innerText = item.op_time;

                            // 在td6中添加两个按钮（开启或关闭、删除）
                            let opBtn = document.createElement("button");
                            let delBtn = document.createElement("button");
                            opBtn.innerText = item.flag == '1'?"关闭":"启动";
                            delBtn.innerText = "X";
                            // 为两个按钮添加class类
                            opBtn.className = "td-editBtn"
                            delBtn.className = "td-delBtn"

                            // 设置删除按钮的点击事件
                            delBtn.onclick = function(){
                                if(confirm("是否删除"+item.title+"?")){
                                    // [注意： boa只支持get和post请求，其它的暂不支持]
                                    fetch("/cgi-bin/delrule?id="+item.id).then(resp=>resp.json()).then(data=>{
                                        // data:  {code: 0, msg: "删除成功!"}   {code: 1, msg: "数据库连接失败!"}
                                        alert(data.msg);
                                        if(data.code == 0){
                                            tbody.innerHTML = "";
                                            loaddata(); // 刷新数据
                                        }
                                    })
                                }
                            }

                            // 设置操作按钮的点击事件
                            opBtn.onclick = function(){
                                if(confirm("是否"+opBtn.innerText+item.title+"?")){
                                    // [注意： boa只支持get和post请求，其它的暂不支持]
                                    fetch("/cgi-bin/oprule?id="+item.id+"&flag="+(item.flag=='0'?1:0)).then(resp=>resp.json()).then(data=>{
                                        alert(data.msg);
                                        if(data.code == 0){
                                            tbody.innerHTML = "";
                                            loaddata(); // 刷新数据
                                        }
                                    })
                                }
                            }

                            td6.append(opBtn, delBtn);

                            tr.append(td1, td2, td3, td4, td5, td6);

                            tbody.append(tr);
                        });

                    }else{
                        alert(data.msg);
                    }
                })
            }
            function validForm(_form){
                // 数据验证--自已完成

                let form_data = {
                    title: _form.title.value,
                    flag: _form.flag.value
                };

                // 新增
                fetch(
                    "/cgi-bin/rules",   // 请求路径 url
                    {
                        method: "POST",
                        body: JSON.stringify(form_data),
                        headers: {
                            "content-type": "application/json;charset=utf-8"
                        }
                    }
                ).then(resp=>resp.json()).then(data=>{
                    if(data.code == 0){
                        alert("新增成功");
                        tbody.innerHTML = ""; // 清空原数据
                        loaddata();
                        _form.style="display: none;"; // 显示表单
                        _form.reset(); // 清空表单数据
                    }
                })


                return false;
            }
       </script>
    </body>
</html>