首先需要新建四個文件
一個服務器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文件中可以查看注冊信息
