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">密&nbsp;&nbsp;&nbsp;码</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>
View Code

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">密&nbsp;&nbsp;&nbsp;码</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>
View Code

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文件中可以查看注册信息

 

posted @ 2017-04-08 09:05  bestjarvan  阅读(...)  评论(...编辑  收藏