Node.js之Express（四） web登录服务：HTML5网页调试

上一篇：Node.js之Express（三） web登录服务：代码实现

前提：
和朋友ooomyself同学联手搞了一个小游戏项目，需要登录验证！用web登录验证由ooomyself同学提出制作，本人学习(嘿嘿)！
需求：
需要web服务进行注册登录验证。
大致流程：
注册账户(保存到数据库)->登录(数据库查询验证)->验证通过

HTML5网页调试

上一篇 我们启动了web服务
接下来进行 前后端调试。
首先感谢开源作者提供的HTML5网页登录模版，我这里下载了一份：
网页登录模版来源于网上

然后根据我们的需要，做相应的修改。目的：调试我们的Express写的web登录服务。
更改的主要有三部分：

1. 写了一个http_post方法；
2. 注册方法中引用http_post请求服务注册用户；
3. 登录方法引用http_post请求服务登录用户；

http_post方法代码如下：

/*
path: 路由路径
params:url后参数 暂未用到
body: post请求参数(这里用json.stringify进行格式化成字符串类型)
callback: 请求完成回调方法
*/
function http_post(path, params, body, callback) {
            let url = 'http://127.0.0.1:3000/';		//本地web服务url+端口号
            var xhr = new XMLHttpRequest();
            xhr.timeout = 5000;
            var requestURL = url + path;
            if (params) {
                requestURL = requestURL + "?" + params;
            }
            xhr.open("POST", requestURL, true);

            if (body) {
                // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.setRequestHeader("Content-Type", "application/json");		//设置post请求参数为json格式
            }
            console.log("HTTP:  POST---->" + requestURL + "  WITH:" + body)
            
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
                    try {
                        var ret = xhr.responseText;
                        if (!!callback) {
                            callback(null, ret);
                        }
                        return;
                    } catch (e) {
                        callback(e, null);
                    }
                } else {
                    callback(xhr.readyState + ":" + xhr.status, null);
                }
            };
            if (body) {
                xhr.send(body);
            }
            return xhr;
        }

register()方法代码如下：

let obj = {"user": username, "pwd": password,};
let body = JSON.stringify(obj);
http_post("doReg", null, body, function (state, data) {
    console.log(state);
    console.log(data);
    if (!state) {
        if (data) {
            console.log(data);
            data = JSON.parse(data);
            if (data.code == 200) {
                spop({
                    template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
                    position: 'top-center',
                    style: 'success',
                    autoclose: 3000,
                    onOpen: function () {
                        var second = 2;
                        var showPop = setInterval(function () {
                            if (second == 0) {
                                clearInterval(showPop);
                            }
                            $('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于' + second + '秒后返回登录');
                            second--;
                        }, 1000);
                    },
                    onClose: function () {
                        goto_login();
                    }
                });
                return false;
            } else {
                console.log("注册失败：" + data.ret);
                $.pt({
                    target: $("#register-password"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: data.ret
                });
                return false;
            }
        }
    }
})

login()方法修改添加代码如下：

let obj = {user: username, pwd: password};
 let body = JSON.stringify(obj);
 http_post("doLogin", null, body, function (state, data) {
     console.log(state);
     console.log(data);
     if (!state) {
         if (data) {
             console.log(data);
             data = JSON.parse(data);
             if (data.code == 200) {
                 alert('登录成功!');
                 return false;
             } else {
                 console.log("注册失败：" + data.ret);
                 $.pt({
                     target: $("#login-password"),
                     position: 'r',
                     align: 't',
                     width: 'auto',
                     height: 'auto',
                     content: data.ret
                 });
                 return false;
             }
         }
     }
 })

接下来就可以用浏览器打开index.html进行交互尝试了，
点击注册，成功！
输入注册账号密码，点击登录，成功！
小心动有木有！
没错，我们的登录服务成功了！
如果需要浏览器打印，断点调试数据，别忘了F12(嘿嘿)

至此我们的Node.js之Express–web登录服务已经告一段落。
下面有时间的话，会写一个cocos_reator的前端调试版本，
以及mongodb数据的库的数据查询。