简易的登陆和注册（node.js学习）

最新推荐文章于 2023-05-16 11:23:41 发布

珣呀珣

最新推荐文章于 2023-05-16 11:23:41 发布

阅读量283

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_41327520/article/details/83379802

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

之前学习视频的时候学习了node.js简单的项目联系，后台使用了node.js，前台交互用了原生ajax。

node部分

const http = require('http');
const fs = require('fs');
const querystring=require('querystring');
const urllib = require('url');

var users = {}//储存用户信息 名字:密码

var server = http.createServer(function (req,res){
	//解析数据
	var str = '';
	req.on('data',function (data){
		str += data;
	});
	req.on('end',function(){
		var obj = urllib.parse(req.url,true);
		const url = obj.pathname;
		const GET = obj.query;
		const POST = querystring.parse(str);//将字符串转化为json格式
		//区分————接口或文件
		if(url == '/user'){//接口
			switch(GET.act){
				case 'reg':
				//检查用户名是否已经有了
				//插入users
				if(users[GET.user]){
					res.write('{"ok":false,"msg":"此用户已存在"}');
				}else{
					//插入用户名
					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"}');
				break;
			}
			res.end();
		}else{//文件
									//读取文件
			var filename = './www'+url;
			fs.readFile(filename,function(err,data){
				if(err){
					res.write('404');
				}else{
					res.write(data);
				}
				res.end();
			});
		}
	});
});

server.listen(8080);

原生ajax部分

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ajax</title>
</head>
<body>
	
	用户名:<input type="text" id="user"><br>
	密码：<input type="password" id="pass"><br>
	<input type="button" value="注册" id="reg">
	<input type="button" value="登陆" id="login">
	<script type="text/javascript">
		var user = document.getElementById('user');
		var padd = document.getElementById('pass');
		var reg = document.getElementById('reg');
		var login = document.getElementById('login');
		reg.onclick = function(){
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.onload = function(){
				if(xhr.status == 200){
					var json = JSON.parse(this.responseText);
					console.log(json);
					if(json.ok){
						alert('注册成功');
					}else{
						alert('注册失败 '+json.msg);
					}
				}else{
					alert('404');
				}
			}
			xhr.open("GET","/user?act=reg&user="+user.value+"&pass="+pass.value,true);
			xhr.send(null);
		}
		login.onclick = function (){
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.onload = function(){
				if(xhr.status == 200){
					var json = JSON.parse(this.responseText);
					console.log(json);
					if(json.ok){
						alert('登陆成功');
					}else{
						alert('登陆失败 '+json.msg);
					}
				}else{
					alert('404');
				}
			}
			xhr.open("GET","/user?act=login&user="+user.value+"&pass="+pass.value,true);
			xhr.send(null);
		}
	</script>

</body>
</html>

这部分的完成是根据视频完成了node部分的内容，自己完成了前端部分的内容，个人认为还有很多部分没有真正掌握。node中主要使用了get接受前端传来的数据并加以响应，而我的前端部分自然是主写get请求。