Node.js进阶之【5】 : 模拟注册、登录
2020-03-19 本文已影响0人
岚平果
一、建立本地服务器
-
文件夹目录如下
image.png
-
- 【ajax.js】内容如下
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//创建xhr对象 - 非IE6
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//GET POST 两种请求方式
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText);
} else {
options.error && options.error(status);
}
}
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}
- 服务器建立
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlLib = require('url');
// 我们先在服务器里储存用户信息,类似这种的，key为用户名，vaule为密码 {"xxl": "123456"}
let userData = {};
var server = http.createServer((req, res) => {
let str = '';
req.on('data', (data) => {
str += data;
})
req.on('end', () =>{
var urlObj = urlLib.parse(req.url, true);
var url = urlObj.pathname;
var getData = urlObj.query;
var postData = querystring.parse(str);
// 如果请求的是接口
if(url === '/user') {
switch(getData.type) {
// 说明请求的是注册接口
case 'reg':
// 判断用户名是否已被注册
if(userData[getData.name]) {
res.write('{"ok":false, "msg": "用户名已被注册"}')
} else {
// 如果没有被注册，把用户信息储存在useData里
userData[getData.name] = getData.password;
res.write('{"ok": true, "msg": "注册成功"}')
}
break;
// 说明请求的是登录接口
case 'login':
// 判断用户是否已存在
if(userData[getData.name] === undefined) {
res.write('{"ok": false, "msg": "用户名不存在，请先注册"}')
} else if(userData[getData.name] !== getData.password) {
// 说明用户名或者密码不正确
res.write('{"ok": false, "msg": "用户名或密码不正确"}');
} else {
res.write('{"ok": true, "msg": "登录成功"}')
}
break;
// 其他说明接口有误
default:
res.write('{"ok":false}');
break;
}
res.end();
} else{
// 说明请求的是文件
var file_name = './www' + url;
fs.readFile(file_name, (err, data) => {
if(err) {
res.write('404')
} else {
res.write(data)
}
res.end()
})
}
})
})
server.listen(8080)
- 前台页面【index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册、登录</title>
<script src="ajax.js"></script>
<script type="text/javascript">
window.onload = ()=> {
var nameNode = document.getElementById('name');
var passNode = document.getElementById('password');
var regBtn = document.getElementById('reg_btn');
var loginBtn = document.getElementById('login_btn');
regBtn.onclick = ()=> {
ajax({
type: 'get',
url: '/user',
data: {
type: 'reg',
name: nameNode.value,
password: passNode.value,
},
success:(res)=> {
let result = JSON.parse(res);
if(result.ok) {
alert(result.msg)
} else {
alert(`注册失败：${result.msg}`)
}
}
})
};
loginBtn.onclick = () => {
ajax({
type: 'get',
url: '/user',
data: {
type: 'login',
name: nameNode.value,
password: passNode.value
},
success: (res)=> {
let result = JSON.parse(res);
if(result.ok) {
alert(result.msg)
} else {
alert(`登录失败：${result.msg}`)
}
}
})
}
}
</script>
</head>
<body>
用户名：<input type="text" name="用户名" id="name"></br></br>
密码：<input type="password" name="密码" id="password"></br></br>
<input type="button" value="注册" id="reg_btn">
<input type="button" value="登录" id="login_btn">
</body>
</html>
-
注册、登录前我们需注意【ajax会跨域】
image.png
image.png
-
- 我们注册一个【用户名为xxl， 密码为 123456】的用户，发现注册成功
// 如果没有被注册，把用户信息储存在useData里
userData[getData.name] = getData.password;
res.write('{"ok": true, "msg": "注册成功"}')
image.png
- 我们再用【用户名为xxl， 密码为 123456】注册过的再进行注册，发现注册失败，该用户名已被注册
if(userData[getData.name]) {
res.write('{"ok":false, "msg": "用户名已被注册"}')
}
image.png
- 我们用注册过的【用户名为xxl， 密码为 123456】进行登录，发现登录成功
res.write('{"ok": true, "msg": "登录成功"}')
image.png
- 我们用一个没有注册过的【用户名为 gg, 密码为123456】进行登录，发现登录失败，没有该用户
// 判断用户是否已存在
if(userData[getData.name] === undefined) {
res.write('{"ok": false, "msg": "用户名不存在，请先注册"}')
}
image.png
- 我们用注册过的【用户名为xxl, 但是密码输入错误的为654321】，进行登录 ，发现登录失败，用户名或密码输入错误
// 说明用户名或者密码不正确
res.write('{"ok": false, "msg": "用户名或密码不正确"}');
image.png
