node.js實(shí)現(xiàn)登錄注冊(cè)頁(yè)面

2019-11-19 16:52:52

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

本文實(shí)例為大家分享了node.js登錄注冊(cè)頁(yè)面展示的具體代碼，供大家參考，具體內(nèi)容如下

首先需要新建四個(gè)文件

一個(gè)服務(wù)器js

一個(gè)保存數(shù)據(jù)的txt

一個(gè)登陸、一個(gè)注冊(cè)頁(yè)面html

1、注冊(cè)頁(yè)面

<!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">注冊(cè)</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">注冊(cè)</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("請(qǐng)輸入內(nèi)容!");      }      if ($("#password").val().length == 0){        return alert("請(qǐng)輸入密碼!");      }      $.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、搭建服務(wù)器

var http = require("http");var url = require("url");var qs = require("querystring");var fs = require("fs");http.createServer(function (req , res) {//設(shè)置請(qǐng)求頭  res.setHeader("Access-Control-Allow-Origin","*");  if(req.method == "POST"){    //接收發(fā)來(lái)的用戶名和密碼    var result = "";//獲取前端代碼發(fā)來(lái)的路由地址    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;              }//根據(jù)前端發(fā)來(lái)的路由地址判斷是登錄還是注冊(cè)頁(yè)面，如果是注冊(cè)頁(yè)面              if(pathName == "/register"){//創(chuàng)建一個(gè)數(shù)組一個(gè)對(duì)象來(lái)保存帳號(hào)和密碼                var arr = [];                var obj = {};//把用戶的帳號(hào)密碼保存                obj.username = user.username;                obj.password = user.password;                arr.push(obj);//同步寫入db.txt文件，必須是同步進(jìn)行                fs.writeFileSync("db.txt" , JSON.stringify(arr) , "utf-8");                res.end("注冊(cè)成功!");                return;              }            }else {              console.log("文件中有數(shù)據(jù)");//把數(shù)據(jù)轉(zhuǎn)成JSON對(duì)象，以便我們使用              var arr = JSON.parse(data);//遍歷整個(gè)保存數(shù)據(jù)的數(shù)組 判斷登錄注冊(cè)              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("密碼錯(cuò)誤！");                      return;                    }                  }                  if(pathName == "/register"){                    res.end("該用戶已存在!");                    return;                  }                }              }              if(pathName == "/login"){                res.end("用戶名不存在!");                return;              }              if(pathName == "/register"){//創(chuàng)建新對(duì)象寫入數(shù)據(jù)                var obj = {};                obj.username = user.username;                obj.password = user.password;                arr.push(obj);                fs.writeFileSync("db.txt" , JSON.stringify(arr) , "utf-8");                res.end("注冊(cè)成功!");                return;              }            }          }else {            console.log("讀取文件失敗");          }        })      }    });  }else {    res.end("get請(qǐng)求");  }}).listen(3000 , function (err) {  if (!err){    console.log("服務(wù)器啟動(dòng)成功，正在監(jiān)聽port3000...");  }});

4、在db.txt文件中可以查看注冊(cè)信息