溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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、登錄界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</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="login">登錄</button>
<button id="register"><a href="regist.html">注冊</a></button>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
$("#login").click(function () {
if ($("#user").val().length == 0){
return alert("請輸入內容!");
}
if ($("#password").val().length == 0){
return alert("請輸入密碼!");
}
$.ajax({
url:"http://localhost:3000/login",
type:"POST",
data:{
username:$("#user").val(),
password:$("#password").val()
},
success:function (res) {
alert("登錄成功!")
},
error:function (err) {
console.log(err);
}
})
})
});
</script>
</html>
3、搭建服務器
var http = require("http");
var url = require("url");
var qs = require("querystring");
var fs = require("fs");
http.createServer(function (req , res) {
//設置請求頭
res.setHeader("Access-Control-Allow-Origin","*");
if(req.method == "POST"){
//接收發來的用戶名和密碼
var result = "";
//獲取前端代碼發來的路由地址
var pathName = url.parse(req.url).pathname;
req.addListener("data",function (chunk) {
result += chunk;
});
req.on("end" , function () {
var user = qs.parse(result);
//判斷用戶是否存在
if(user.username){
fs.readFile("db.txt" , "utf-8" , function (err,data) {
if (!err){
console.log("讀取文件成功");
if (!data){
if(pathName == "/login"){
res.end("該用戶不存在");
return;
}
//根據前端發來的路由地址判斷是登錄還是注冊頁面，如果是注冊頁面
if(pathName == "/register"){
//創建一個數組一個對象來保存帳號和密碼
var arr = [];
var obj = {};
//把用戶的帳號密碼保存
obj.username = user.username;
obj.password = user.password;
arr.push(obj);
//同步寫入db.txt文件，必須是同步進行
fs.writeFileSync("db.txt" , JSON.stringify(arr) , "utf-8");
res.end("注冊成功!");
return;
}
}else {
console.log("文件中有數據");
//把數據轉成JSON對象，以便我們使用
var arr = JSON.parse(data);
//遍歷整個保存數據的數組 判斷登錄注冊
for(var i = 0;i < arr.length;i++){
var obj = arr[i];
if(obj.username == user.username){
if(pathName == "/login"){
if (obj.password == user.password){
res.end("登錄成功!");
return;
}else {
res.end("密碼錯誤！");
return;
}
}
if(pathName == "/register"){
res.end("該用戶已存在!");
return;
}
}
}
if(pathName == "/login"){
res.end("用戶名不存在!");
return;
}
if(pathName == "/register"){
//創建新對象寫入數據
var obj = {};
obj.username = user.username;
obj.password = user.password;
arr.push(obj);
fs.writeFileSync("db.txt" , JSON.stringify(arr) , "utf-8");
res.end("注冊成功!");
return;
}
}
}else {
console.log("讀取文件失敗");
}
})
}
});
}else {
res.end("get請求");
}
}).listen(3000 , function (err) {
if (!err){
console.log("服務器啟動成功，正在監聽port3000...");
}
});
4、在db.txt文件中可以查看注冊信息
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
