nodejs实现简易版登录注册-CSDN博客

1、代码架构

2、node部分（main_server.js)

const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlLib = require('url');
// 模拟用户数据
var users = {};//{"blue":"12345","zhangsna": "15487"}
// 启动服务
var server = http.createServer(function(req, res){
	// get请求
	var obj = urlLib.parse(req.url, true);
	var url = obj.pathname;
	const GET = obj.query;
	// post请求
	var str = "";
	req.on('data',function(data){
		// post请求是分段请求数据，所以要把数据相加
		str += data;
	});
	req.on('end',function(){
		const POST = querystring.parse(str);
	})

	// 区分接口文件
	if(url == '/user'){ //接口
		//定义接口 http:localhost:8081/user?act=reg&name=dylan&pass=12345
		//后台返回数据格式 {"ok":false,"msg": "原因"}
		switch(GET.act){
			case 'reg':
				// 检查用户有没有
				if(users[GET.user]){
					res.write('{"ok": false, "msg": "此用户已存在"}')
				}else{
					// 插入users
					users[GET.user] = GET.pass;
					res.write('{"ok": true, "msg": "注册成功"}')
				}
				break;
			case 'login':
				// 检查用户是否存在
				if(users[GET.user] == null){
					res.write('{"ok": false, "msg": "此用户不存在"}')
				// 密码是否正确
				}else if(users[GET.user] != GET.pass){
					res.write('{"ok": false, "msg": "密码错误"}')
				}else{
					res.write('{"ok": true, "msg": "登录成功"}')
				}
				break;
			default: 
				res.write('{"ok":false, "msg": "未知的act"}');
		}
		res.end()
	}else{ // 文件
		var file_name = './www' + url;
		fs.readFile(file_name, function(err, data){
			if(err){
				res.write('404')
			}else{
				res.write(data);
			}
			res.end();
		})
	}
	
});

server.listen(8081);


复制代码

3、前端部分代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var oUser = document.getElementById('user');
		var oPass = document.getElementById('pass');
		var oReg_btn = document.getElementById('reg_btn');
		var oLogin_btn = document.getElementById('login_btn');
		// 注册
		oReg_btn.onclick = function(){
			ajax({
				url: '/user',
				data: {
					'act': 'reg',
					'user': oUser.value,
					'pass': oPass.value
				},
				type: 'get',
				success: function(str){
					var data = eval('('+str+')');
					console.log(data)
					if(data.ok){
						alert("注册成功");
					}else{
						alert("注册失败："+ data.msg)
					}
				},
				error: function(){
					alert("获取数据失败")
				}
			})
		}
		// 登录
		oLogin_btn.onclick = function(){
			ajax({
				url: '/user',
				data: {
					'act': 'login',
					'user': oUser.value,
					'pass': oPass.value
				},
				type: 'get',
				success: function(str){
					var data = eval('('+str+')');
					if(data.ok){
						alert("登录成功");
					}else{
						alert("登录失败："+ data.msg)
					}
				},
				error: function(){
					alert("获取数据失败")
				}
			})
		}
	}
</script>
<body>
	用户： <input type="text" id="user"><br>
	密码： <input type="password" id=pass><br>
	<input type="button" value="注册" id="reg_btn">
	<input type="button" value="登录" id="login_btn">
</body>
</html>
复制代码

4、ajax代码

function json2url(json){
    var arr=[];
    for(var name in json){
        arr.push(name+'='+json[name]);
    }
    return arr.join('&');
}

function ajax(json){
    json=json || {};
    if(!json.url)return;
    json.data=json.data || {};
    json.type=json.type || 'get';

    var timer=null;

    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
    }

    switch(json.type){
        case 'get':
            oAjax.open('GET',json.url+'?'+json2url(json.data),true);
            oAjax.send();
            break;
        case 'post':
            oAjax.open('POST',json.url,true);
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            oAjax.send(json2url(json.data));
            break;
    }

    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            clearTimeout(timer);
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                json.success && json.success(oAjax.responseText);
            }else{
                json.error && json.error(oAjax.status);
            }
        }
    };
}

复制代码