master

分支 (1)

管理

管理

master

xa_iot2402_www
/
users.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="name" placeholder="请输入用户名">
            </div>
            <div>
                <label>性别</label>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </div>
            <div>
                <label>手机号</label>
                <input type="text" name="phone" placeholder="请输入11位的手机号">
            </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>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <script>
            window.onload=function(){
                loaddata(); // 加载数据
            }

            function loaddata(){
                fetch("/cgi-bin/users").then(resp=>resp.json()).then(data=>{
                    // data的格式： {code: 0, datas: [{id: 1, name: '', sex: '', phone: ''}, {}...]}
                    console.log(data);
                    if(data.code == 0){
                        data.datas.forEach(user => {
                            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");

                            td1.innerText = user.id;
                            td2.innerText = user.name;
                            td3.innerText = user.sex;
                            td4.innerText = user.phone;

                            // 在td5中添加两个按钮（编辑、删除）
                            let editBtn = document.createElement("button");
                            let delBtn = document.createElement("button");
                            editBtn.innerText = "E";
                            delBtn.innerText = "X";
                            // 为两个按钮添加class类
                            editBtn.className = "td-editBtn"
                            delBtn.className = "td-delBtn"

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

                            // 设置编辑按钮的点击事件
                            editBtn.onclick = function(){
                                // 当前user用户信息显示在表单中
                                form1.id.value = user.id;
                                form1.name.value = user.name;
                                form1.sex.value = user.sex;
                                form1.phone.value = user.phone;

                                form1.style="display: block"; // 显示表单
                            };

                            td5.append(editBtn, delBtn);

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

                            tbody.append(tr);
                        });

                    }else{
                        alert(data.msg);
                    }
                })
            }
            function validForm(_form){
                // 数据验证--自已完成
                // 表单获取数据
                let uid = _form.id.value;
                let form_data = {
                    name: _form.name.value,
                    sex: _form.sex.value,
                    phone: _form.phone.value
                };
                if(uid == '0'){
                    // 新增
                    fetch(
                        "/cgi-bin/users",   // 请求路径 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(); // 清空表单数据
                        }
                    })
                }else {
                    // 修改
                    fetch(
                        "/cgi-bin/user?id="+uid,   // 请求路径 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>