螺丝系统管理项目难点及总结

项目功能：可以实现 用户注册，登录验证，添加用户，修改用户，删除用户，退出登录等功能。
注意点:a标签中的herf会默认跳转，解决方法可以改为button标签或者在敲写完成后加上trun false

用户注册：通过ajax()传输html中表单的信息，发送给后台，后台找到符合对应的路由，开始接受数据，数据接受完成,判断是否符合注册条件，不符合的话直接在html显示错误信息，符合的话就连接数据库，设置变量sql 为添加命令，传入connection.query()中，如果没报错，返回html显示成功。

表单返回（难点1）:当admin.html被页面加载时，马上要去发送数据请求到后台，让后台返回数据到页面，生成table,首先在admin.html设置ajax()的url为"/list"，后台接到这个路径后，马上连接数据库，设置变量sql 为 查询命令，把所有数据查询出来，如果没有错误，会得到result，但是result是一个对象数组，所以需要把它转化为字符串发送给前台的表格各个单元格，前台接收到返回的数据之后，根据返回数组的长度创造一个for循环，用一个obj来存每个循环的对象tr，再使用for(item in obj)获取到对象的每个属性值，同时每次循环就创造一个td，最后把每个属性值赋值给每个td，然后把td放到tr父级中，再把tr放到table父级中，这时候会发现少了一个td，手动创建并把它添加到tr父级中

后台

if (obj_url.pathname === "/list" && req.method === "GET") {
        //连接数据库，把所有数据查询出来
        var sql = "SELECT * FROM user"
        connection.query(sql, function (err, result) {
            // console.log(err, result)
            if (!err && result) {
                //result 是一个对象数组，转化为字符串发送给前台的表格各个单元格
                var arrstr = JSON.stringify(result);
                // console.log(arrstr);
                res.setHeader("content-type", "text/html;charset=utf-8");
                res.write('{"status":0,"data":' + arrstr + '}', "utf-8");
                res.end();
            }
        })
        return;
    }

前台

<script>
    //当admin.html被页面加载时，马上要去发送数据请求到后台，让后台返回数据到页面，生成table
    var oTable = document.getElementById("table");
    ajax({
        method: "get",
        url: "/list",
        success: function (result) {
            //在这里生成数据表格
            if (result.status === 0) {
                //1.result.data 是一个对象数组，每一个元素都是一个对象
                //2.每一个对象就是一个tr
                //3.对象的每个属性是tr下面的每一个td
                //4.批量生成tr，for循环
                for (i = 0; i < result.data.length; i++) {
                    //每次循环的时候创建一个tr
                    var oTr = document.createElement("tr");
                    //把每次循环的每个对象，赋值给obj变量
                    var obj = result.data[i];
                    //循环每个obj，拿到对应的值  内循环完成，说明一行tr创建成功
                    for (item in obj) {
                        //item是对象中的属性名 id username 
                        //可以根据item属性，取得每个对象中的每个item值
                        // console.log(obj[item]);
                        //每次创建一个item值，就创建一个td，并且把值放到td里面
                        var oTd = document.createElement("td");
                        oTd.innerHTML = obj[item];
                        //把td放到tr中
                        oTr.appendChild(oTd);
                    }
                    //问题：少了最后一个td，需要手动生成
                    var op = document.createElement("td");
                    op.innerHTML = '<a href="" class="btn btn-primary">修改</a>'
                    oTr.appendChild(op);
                    //将tr放到table中
                    oTable.appendChild(oTr);
                }
            }
        }
    })
</script>

用户登录：过ajax()传输html中表单的信息，发送给后台，后台找到符合对应的路由，开始接受数据，数据接受完成,连接数据库，设置变量sql 为查询命令，查询数据库中是否有html发过来的数据，如果有返回html登录成功，没有返回html用户名或者密码错误。

添加用户：弹出表单提示框，点击取消再次隐藏，点击保存就通过ajax()传输html中表单的信息，发送给后台，后台找到符合对应的路由，开始接受数据，数据接受完成,连接数据库，设置变量sql 为添加命令，成功的话返回html添加成功，隐藏提示框，window.location.reload() 重新加载发送表格 "/list"请求，添加的用户显示成功。

修改用户（难点2）：因为修改按钮不是特定的一个按钮，存在多个且有变化，因为修改按钮在table里面，所以需要把事件委托到上级table，ev.table可以获取到点击table的具体位置，我们设置ev.table.innerHTML = “修改”，就能获取到修改按钮，同时设置td为一个数组，我们就可以通过allTd[i].innerHTML的方法获取各项数据。点击修改按钮,弹出修改框的内容，然后设置弹出框的值为获取的allTd[i]值。点击保存，就如上述步骤一下，通过ajax()，发送到后台进行数据库修改。

前台

//获取到编辑窗口的表单
var editUser = document.getElementById("editUser");
var editUsername = document.getElementById("edit-username");
var editEmail = document.getElementById("edit-email");
var editPhone = document.getElementById("edit-phone");
var editQq = document.getElementById("edit-qq");
var editId = document.getElementById("edit-id");
oTable.onclick = function (ev) {
//处理兼容性问题
var ev = ev || event;
var allTd = ev.target.parentNode.parentNode.children;
if (ev.target.innerHTML === "修改") {
//弹出对话框，设置位置
editUser.style.display = "block";
var left = document.documentElement.clientWidth / 2 - editUser.offsetWidth / 2;
var top = document.documentElement.clientHeight / 2 - editUser.offsetHeight / 2;
editUser.style.left = left + "px";
editUser.style.top = top + "px";
//显示行各项数据
editUsername.value = allTd[1].innerHTML;
editEmail.value = allTd[2].innerHTML;
editPhone.value = allTd[3].innerHTML;
editQq.value = allTd[4].innerHTML;
editId.value = allTd[0].innerHTML;
return false;
}

删除用户：将 ev.target.innerHTML 设置为 “删除”，只传一个id值就好 editId.value = allTd[0].innerHTML，然后通过ajax()发送数据给后台，连接数据库，设置变量sql 为删除命令，删除成功返回html，然后window.loaction.reload()重新加载页面。

设置cookie（难点3）
1.当登录返回成功信息的时候需要设置一个cookie 带回浏览器

 if (!err && result && result.length !== 0) {
     res.setHeader("Set-Cookie",cookie.serialize("isLogin","true"));
     }

2.返回admin.html 的时候做验证，获取cookie 如果有对应的登录标识，就返回admin.html，如果没有返回错误页面

if(obj_url.pathname === "/admin.html"){
    if(cookie.parse(req.headers.cookie || '').isLogin === "true"){
        render("./template/admin.html",res);
    }else{
        render("./template/error.html",res);
    }
    return;
}

3.退出登录只要把cookie不设置为true即可

if(obj_url.pathname === "/logout"){
        res.setHeader("Set-Cookie",cookie.serialize("isLogin","false"));
        render("./template/index.html",res);
        return;
    }