一款简单的登录注册页面 node+html
Posted 慌丿拥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一款简单的登录注册页面 node+html相关的知识，希望对你有一定的参考价值。
前言
?这是一个简单的登录、注册页面，用来实践一下node 系统模块方法，所以前端页面非常简陋，前端使用Ajax，post传数据到node服务器中，sever.js对数据进行处理，返回结果到前端页面。数据存在txt文本内，通过fs方法进行读写更新。
执行代码
?下载代码，进入代码文件夹，使用Shift+鼠标右键=>在此处打开powershell
输入命令：
node .\node_sever\sever.js
开启服务器后打开index.html使用
代码
HTML：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录、注册</title>
<!-- jquery插件 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</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">注册</button>
</div>
</body>
<script>
$(function(){
//登录
$('#login').click(function(){
if($("#user").val()){
if($("#password").val()){
$.ajax({
type : "post",
url : "http://localhost:8080/login",
data : {
username : $("#user").val(),
password : $("#password").val()
},
success : function(res){
alert(res)
},
error : function(err){
alert(err)
}
})
}
else{
alert('密码不能为空')
}
}
else{
alert('用户名不能为空')
}
})
//注册
$('#register').click(function(){
if($("#user").val()){
if($("#password").val()){
$.ajax({
type : "post",
url : "http://localhost:8080/register",
data : {
username : $("#user").val(),
password : $("#password").val()
},
success : function(res){
alert(res)
},
error : function(err){
alert(err)
}
})
}
else{
alert('密码不能为空')
}
}
else{
alert('用户名不能为空')
}
})
})
</script>
</html>node：sever.js
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", "*");
//定义一个post变量，暂时存储Post请求信息
var post = "";
// 通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
req.on("data", function (chunk) {
post += chunk;
});
//获取前端路由地址
var pathName = url.parse(req.url).pathname;
//监听end事件，
req.on("end", function () {
post = qs.parse(post);
console.log("username:" + post.username + ' password：' + post.password);
console.log(pathName);
fs.readFile("./node_sever/data_base.txt", "utf-8", function (err, data) {
if (err) {
console.log(err)
}
else {
if (!data) {
if (pathName == '/login') {
res.end("该用户不存在");
return;
}
if (pathName == '/register') {
//创建一个数组一个对象来保存帐号和密码
var arr = [];
var obj = {};
//把用户的帐号密码保存
obj.username = post.username;
obj.password = post.password;
arr.push(obj);
//同步写入db.txt文件，必须是同步进行
fs.writeFileSync("./node_sever/data_base.txt", JSON.stringify(arr), "utf-8");
res.end("注册成功!");
return;
}
}
else {
//把数据转成JSON对象，以便我们使用
var arr = JSON.parse(data);
console.log(arr);
//遍历整个保存数据的数组 判断登录注册
for (var i = 0; i < arr.length; i++) {
var obj = arr[i];
if (obj.username == post.username) {
if (pathName == "/login") {
if (obj.password == post.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 = post.username;
obj.password = post.password;
arr.push(obj);
fs.writeFileSync("./node_sever/data_base.txt", JSON.stringify(arr), "utf-8");
res.end("注册成功!");
return;
}
}
}
})
})
}).listen(8080, function (err) {
if (!err) {
console.log("成功创建服务器，端口号为8080")
}
})下载
以上是关于一款简单的登录注册页面 node+html的主要内容，如果未能解决你的问题，请参考以下文章