1. 程式人生 > >node.js之簡單的使用者登入與註冊

node.js之簡單的使用者登入與註冊

後臺程式碼

//引入模組
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlib = require('url');


var users = {}; //存放使用者名稱和密碼的Json

//搭建伺服器
var server = http.createServer(function(req,res){
	var str = '';
	req.on('data',function(data){
		str+=data;
	});
	req.on('end',function(){
		var obj = urlib.parse(req.url,true);
		const url = obj.pathname;
		const GET = obj.query;
		const POST = querystring.parse(str);
		//區分介面、檔案
		if(url=='/user'){ //介面
			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(8080);

前臺

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<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">
	<script src="ajax.js"></script>
	<script>
		window.onload = function(){
			var o_user = document.getElementById('user');
			var o_pass = document.getElementById('pass');
			var o_reg = document.getElementById('reg_btn');
			var o_login = document.getElementById('login_btn');
			//註冊
			o_reg.onclick = function(){
				ajax({
					url:'/user',
					data:{act:'reg',user:o_user.value,pass:o_pass.value},
					type:'get',
					success:function(str){
						var json = eval('('+str+')');
						if(json.ok){
							alert('註冊成功');
						}else{
							alert('註冊失敗:'+ json.msg);
						}
					},
					error:function(){
						alert('通訊錯誤');
					}
				});
			};
			//登入
			o_login.onclick = function(){
				ajax({
					url:'/user',
					data:{act:'login',user:o_user.value,pass:o_pass.value},
					type:'get',
					success:function(str){
						var json = eval('('+str+')');
						if(json.ok){
							alert('登入成功');
						}else{
							alert('登入失敗'+ json.msg);
						}
					},
					error:function(){
						alert('通訊錯誤');
					}
				});
			};
		}
	</script>
</body>
</html>