node.js实现登录注册页面

更新时间：2020-05-05 11:00:01 作者：startmvc

本文实例为大家分享了node.js登录注册页面展示的具体代码，供大家参考，具体内容如下首

本文实例为大家分享了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文件中可以查看注册信息