基于nodeJs的登录注册

+

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

核心模块:是被编译成二进制代码,引用的时候只需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·