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文件中可以查看注冊信息