基于nodeJs的登录注册

发表于2021  |  分类于 前端  |  没有评论

+

  • 核心模块
  • 第三方模块
  • 自定义模块

核心模块：是被编译成二进制代码，引用的时候只需require表示符即可

这个demo主要用得到nodeJs中以下核心模块

  • fs 文件管理
    • 写入文件内容 : fs.writeFile(‘test.txt’, ‘Hello Node’ , [encoding], [callback]);
    • 文件是否存在 : fs.exists(‘test.txt’,[callback]);
    • 读取文件内容 : fs.readFile(‘test.txt’, [encoding], [callback]);
    • 写入文件 : fs.writeFile(filename, data,[encoding],[callback(err)]);
  • url 文件管理
  • Query String 字符串转换
  • http HTTP
  • 创建HTTP服务器 : http.createServer([requestListener])

由于没有服务器，所以不能上传demo的实际效果。

server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var http = require("http");
var fs = require("fs");
var url = require("url");
var querystring = require("querystring")
var server = http.createServer(handle).listen(3000);
function (req,res){
    //文件路径
    var filePath = "";
    if(req.url == "/"){
        filePath = "./public/html/index.html"
        //文件是否存在
        fs.exists(filePath,function(exists){
            if(exists){
                fs.readFile(filePath,function(err,data){
                    if(err){
                        return;
                    }
                    res.end(data);
                })
            }else{
                send404(res);
            }
        })
    }else if(req.url.indexOf("/form") != -1 ){
        if(req.method == "GET"){
            var parme = url.parse(req.url,true);
            var info = parme.query;
            var username = info.username;
            var password = info.password;
            var email = info.email;
            var tell = info.tell;
            fs.readFile("./tsconfig.json","utf-8",function(err,data){
                if(err){
                    return;
                }
                var data = JSON.parse(data);
                var users = data.users;
                for(var i = 0;i<users.length;i++){
                    if(users[i].username  == username && users[i].password == password && users[i].email == email && users[i].tell == tell){
                        //有此账户
                        filePath = "./public/html/login.html"
                        break;
                    }else{
                        filePath = "./public/html/reg.html"
                    }
                }
                fs.exists(filePath,function(exists){
                    if(exists){
                        fs.readFile(filePath,function(err,data){
                            if(err){
                                return;
                            }
                            res.end(data);
                        })
                    }else{
                        send404(res);
                    }
                })
            })
        }else if(req.method == "POST"){
            var postDate = "";
            req.on("data",function(chunk){
                postDate += chunk;
            })
            req.on("end",function(){
                var data = querystring.parse(postDate);
                console.log(data)
                var obj = {};
                obj.username = data.username;
                obj.password = data.password;
                obj.email = data.email;
                obj.tell = data.tell;
                fs.readFile("./tsconfig.json","utf-8",function(err,data){
                    var data = JSON.parse(data);
                    data.users.push(obj)
                    fs.writeFile("./tsconfig.json",JSON.stringify(data),function(){
                    })
                })
            })
            fs.exists(filePath,function(exists){
                if(exists){
                    fs.readFile(filePath,function(err,data){
                        if(err){
                            return;
                        }
                        res.end(data);
                    })
                }else{
                    send404(res);
                }
            })
        }
    }else{
        filePath = "./public" + req.url;
        fs.exists(filePath,function(exists){
            if(exists){
                fs.readFile(filePath,function(err,data){
                    if(err){
                        return;
                    }
                    res.end(data);
                })
            }else{
                send404(res);
            }
        })
    }
}
function send404(res){
    fs.readFile("./public/html/404.html",function(err,data){
        if(err){
            return;
        }
        res.end(data);
    })
}

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{"success":"1","users":[
	{
	"username":"zxz",
	"password":"123",
	"email":"[email protected]",
	"tell":"18711111111"
	},{
	"username":"hsm",
	"password":"520",
	"email":"[email protected]",
	"tell":"1555755895"
	},{
	"username":"ldl",
	"password":"222",
	"email":"[email protected]",
	"tell":"13031031087"
}]}

public/css/index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
body{
    background:#f5f5f5;
}
.box{
    width:400px;
    height:500px;
    position:relative;
    margin:0 auto;
    overflow: hidden;
}
img{
    width:100%;
    height:100%;
}
h2{
    height:35px;
    margin:0;
    text-align:center;
 }
form{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba(0,24,255,0.3);
}
label{
    margin-left:50px;
    color:snow;
}
input{
    width:300px;
    height:40px;
    outline:none;
    background:transparent;
    border-radius:10px;
    margin:15px 50px;
    color:#fff;
}
.login{
    width:100px;
    height:40px;
    font-size:20px;
    color:#fff;
    margin:20px 150px;
}
.oneinput,.two{
    -webkit-animation:zx 0.6s linear;
}
.twoinput,.four{
    -webkit-animation:zxz 0.7s linear;
}
.threeinput,.one{
    -webkit-animation:z 0.8s linear;
}
.fourinput,.three{
    -webkit-animation:hsm 0.9s linear;
}
.login{
    -webkit-animation:sm 1.3s linear;
}
.log{
    -webkit-animation:h 1s linear;
}
@-webkit-keyframes zx{
    from{transform:translateX(-350px) translateY(-50px) rotateZ(45deg);}
    to{transform:translateX(0px) translateY(0px);}
}
@-webkit-keyframes zxz{
    from{transform:translateX(550px) translateY(-60px) rotateZ(45deg);}
    to{transform:translateX(0px) translateY(0px);}
}
@-webkit-keyframes z{
    from{transform:translateX(-350px) translateY(-20px) rotateZ(45deg);}
    to{transform:translateX(0px) translateY(0px);}
}
@-webkit-keyframes hsm{
    from{transform:translateX(550px) translateY(-50px) rotateZ(45deg);}
    to{transform:translateX(0px) translateY(0px);}
}
@-webkit-keyframes sm{
    from{transform:translateX(0px) translateY(500px);}
    to{transform:translateX(0px) translateY(0px);}
}
@-webkit-keyframes h{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(180deg);}
}

public/html/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
   <div class="box">
       <img src="../image/thumb.jpg" width="400" height="500">
       <form action="/form" method="get" class="log">
           <h2></h2>
           <label class="one">Name:</label>
           <input type="text" placeholder="username" name="username" class="oneinput" required/>
           <label class="two">Password:</label>
           <input type="password" placeholder="password" name="password" class="twoinput" required/>
           <label class="three">Email:</label>
           <input type="text" placeholder="email" name="email"  class="threeinput" required/>
           <label class="four">Tell:</label>
           <input type="text" placeholder="tell" name="tell" class="fourinput" required/>
           <input type="submit" value="登录" class="login"/>
       </form>
   </div>
</body>
</html>

public/html/login.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>登录成功</h2>
</body>
</html>

public/html/reg.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="box">
    <img src="../image/thumb.jpg" width="400" height="500">
    <form action="/form" method="post" class="log">
        <h2>你未注册</h2>
        <label class="one">Name:</label>
        <input type="text" placeholder="username" name="username" class="oneinput" required/>
        <label class="two">Password:</label>
        <input type="password" placeholder="password" name="password" class="twoinput" required/>
        <label class="three">Email:</label>
        <input type="text" placeholder="email" name="email"  class="threeinput" required/>
        <label class="four">Tell:</label>
        <input type="text" placeholder="tell" name="tell" class="fourinput" required/>
        <input type="submit" value="注册" class="login"/>
    </form>
</div>
</body>

the end·