上一篇:Node.js之Express(三) web登录服务:代码实现
前提:
和朋友ooomyself同学联手搞了一个小游戏项目,需要登录验证!用web登录验证由ooomyself同学提出制作,本人学习(嘿嘿)!
需求:
需要web服务进行注册登录验证。
大致流程:
注册账户(保存到数据库)->登录(数据库查询验证)->验证通过
HTML5网页调试
上一篇 我们启动了web服务
接下来进行 前后端调试。
首先感谢开源作者提供的HTML5网页登录模版,我这里下载了一份:
网页登录模版来源于网上
然后根据我们的需要,做相应的修改。目的:调试我们的Express写的web登录服务。
更改的主要有三部分:
- 写了一个http_post方法;
- 注册方法中引用http_post请求服务注册用户;
- 登录方法引用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数据的库的数据查询。