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="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文件中可以查看注册信息
浙公网安备 33010602011771号