首页 > 代码库 > node.js实现简单的登录注册页面
node.js实现简单的登录注册页面
首先需要新建四个文件
一个服务器js
一个保存数据的txt
一个登陆、一个注册页面html
1、注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regist</title>
</head>
<body>
<div>
<label for="user">用户名</label><input type="text" id="user">
</div>
<div>
<label for="password">密 码</label><input type="password" id="password">
</div>
<div>
<button id="register">注册</button>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
$("#register").click(function () {
$.ajax({
url:"http://localhost:3000/register",
type:"POST",
data:{
username:$("#user").val(),
password:$("#password").val()
},
success:function (res) {
alert(res);
},
error:function (err) {
console.log(err);
}
})
})
});
</script>
</html>
2、登录界面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>login</title> 6 </head> 7 <body> 8 <div> 9 <label for="user">用户名</label><input type="text" id="user"> 10 </div> 11 <div> 12 <label for="password">密 码</label><input type="password" id="password"> 13 </div> 14 <div> 15 <button id="login">登录</button> 16 <button id="register"><a href="http://www.mamicode.com/regist.html">注册</a></button> 17 </div> 18 </body> 19 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 20 <script> 21 $(function () { 22 $("#login").click(function () { 23 if ($("#user").val().length == 0){ 24 return alert("请输入内容!"); 25 } 26 if ($("#password").val().length == 0){ 27 return alert("请输入密码!"); 28 } 29 30 $.ajax({ 31 url:"http://localhost:3000/login", 32 type:"POST", 33 data:{ 34 username:$("#user").val(), 35 password:$("#password").val() 36 }, 37 success:function (res) { 38 alert("登录成功!") 39 }, 40 error:function (err) { 41 console.log(err); 42 } 43 }) 44 45 }) 46 }); 47 </script> 48 </html>
3、搭建服务器
1 var http = require("http"); 2 var url = require("url"); 3 var qs = require("querystring"); 4 var fs = require("fs"); 5 6 http.createServer(function (req , res) { 7 //设置请求头 8 res.setHeader("Access-Control-Allow-Origin","*"); 9 if(req.method == "POST"){ 10 //接收发来的用户名和密码 11 var result = ""; 12 //获取前端代码发来的路由地址 13 var pathName = url.parse(req.url).pathname; 14 req.addListener("data",function (chunk) { 15 result += chunk; 16 }); 17 18 req.on("end" , function () { 19 var user = qs.parse(result); 20 //判断用户是否存在 21 if(user.username){ 22 fs.readFile("db.txt" , "utf-8" , function (err,data) { 23 if (!err){ 24 console.log("读取文件成功"); 25 if (!data){ 26 if(pathName == "/login"){ 27 res.end("该用户不存在"); 28 return; 29 } 30 //根据前端发来的路由地址判断是登录还是注册页面，如果是注册页面 31 if(pathName == "/register"){ 32 //创建一个数组一个对象来保存帐号和密码 33 var arr = []; 34 var obj = {}; 35 //把用户的帐号密码保存 36 obj.username = user.username; 37 obj.password = user.password; 38 arr.push(obj); 39 //同步写入db.txt文件，必须是同步进行 40 fs.writeFileSync("db.txt" , JSON.stringify(arr) , "utf-8"); 41 res.end("注册成功!"); 42 return; 43 } 44 }else { 45 console.log("文件中有数据"); 46 //把数据转成JSON对象，以便我们使用 47 var arr = JSON.parse(data); 48 //遍历整个保存数据的数组 判断登录注册 49 for(var i = 0;i < arr.length;i++){ 50 var obj = arr[i]; 51 if(obj.username == user.username){ 52 if(pathName == "/login"){ 53 if (obj.password == user.password){ 54 res.end("登录成功!"); 55 return; 56 }else { 57 res.end("密码错误！"); 58 return; 59 } 60 } 61 if(pathName == "/register"){ 62 res.end("该用户已存在!"); 63 return; 64 } 65 } 66 } 67 if(pathName == "/login"){ 68 res.end("用户名不存在!"); 69 return; 70 } 71 if(pathName == "/register"){ 72 //创建新对象写入数据 73 var obj = {}; 74 obj.username = user.username; 75 obj.password = user.password; 76 arr.push(obj); 77 fs.writeFileSync("db.txt" , JSON.stringify(arr) , "utf-8"); 78 res.end("注册成功!"); 79 return; 80 } 81 } 82 }else { 83 console.log("读取文件失败"); 84 } 85 }) 86 } 87 }); 88 }else { 89 res.end("get请求"); 90 } 91 }).listen(3000 , function (err) { 92 if (!err){ 93 console.log("服务器启动成功，正在监听port3000..."); 94 } 95 });
4、在db.txt文件中可以查看注册信息
node.js实现简单的登录注册页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。