node.js实现登录注册页面

2019-11-19 16:52:52

字体：大中小

来源：转载

供稿：网友

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