gitee：https://gitee.com/bestjarvan/user-register-nodejs-demo.git
首先需要新建四個(gè)文件
一個(gè)服務(wù)器js
一個(gè)保存數(shù)據(jù)的txt (代碼會(huì)自動(dòng)新建，手動(dòng)新建也可)
一個(gè)登陸前联、一個(gè)注冊頁面html
1.注冊頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</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.msg);
if (res.code === 200) {
// TODO....
}
},
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="register.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("請輸入內(nèi)容!");
}
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(res.msg)
if (res.code === 200) {
// TODO...
}
},
error: function (err) {
console.log(err);
}
})
})
});
</script>
</html>
3.搭建服務(wù)器
var http = require("http");
var url = require("url");
var qs = require("querystring");
var fs = require("fs");
// 讀取文件
function readFileFnc (cb, fail) {
fs.readFile("db.txt", "utf-8", function (err, data) {
if (!err && data) {
console.log("文件中有數(shù)據(jù)");
cb(data)
} else {
console.log("讀取文件失敗");
fail()
}
})
}
function registerUser (user, res, arr) {
//根據(jù)前端發(fā)來的路由地址判斷是登錄還是注冊頁面，如果是注冊頁面
//同步寫入db.txt文件
var userList = arr || []
userList.push(user)
fs.writeFileSync("db.txt", JSON.stringify(userList), "utf-8");
sendMsg(res, '注冊成功!', 200)
}
function sendMsg (res, msg, code = 200) {
res.writeHead(200, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({code, msg}))
}
http.createServer(function (req, res) {
//設(shè)置請求頭
res.setHeader("Access-Control-Allow-Origin", "*");
if (req.method == "POST") {
//接收發(fā)來的用戶名和密碼
var result = "";
//獲取前端代碼發(fā)來的路由地址
var pathName = url.parse(req.url).pathname;
req.addListener("data", function (chunk) {
result += chunk;
});
req.on("end", function () {
var user = qs.parse(result);
//判斷用戶是否存在
(!user.username || !user.password) && sendMsg(res, '請輸入用戶名或密碼', 103)
console.log(123123);
if (pathName === '/login') {
// 登錄頁
readFileFnc(
function (data) {
var arr = JSON.parse(data);
//遍歷整個(gè)保存數(shù)據(jù)的數(shù)組 判斷登錄注冊
if (Array.isArray(arr)) {
const userInfo = arr.find(obj => obj.username == user.username)
if (userInfo) {
if (userInfo.password == user.password) {
sendMsg(res, '登錄成功娶眷！', 200)
} else {
sendMsg(res, '密碼錯(cuò)誤似嗤！', 101)
}
} else {
sendMsg(res, '該用戶不存在', 102)
}
}
},
function () {
sendMsg(res, '該用戶不存在', 102)
}
)
} else if (pathName === '/register') {
// 注冊頁
console.log('zhuce')
readFileFnc(
function (data) {
var arr = JSON.parse(data);
//遍歷整個(gè)保存數(shù)據(jù)的數(shù)組 判斷登錄注冊
if (Array.isArray(arr)) {
const userInfo = arr.find(obj => obj.username == user.username)
if (userInfo) {
sendMsg(res, '該用戶已存在', 101)
} else {
registerUser(user, res, arr)
}
}
},
function () {
registerUser(user, res)
}
)
}
});
} else {
sendMsg(res, '請使用post請求', 105)
}
}).listen(3000, function (err) {
if (!err) {
console.log("服務(wù)器啟動(dòng)成功，正在監(jiān)聽port3000...");
}
});
4.在db.txt文件中可以查看注冊信息
------end------
