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

更新時(shí)間：2022年04月26日 14:56:39 作者：bestjarvan

這篇文章主要為大家詳細(xì)介紹了node.js實(shí)現(xiàn)簡(jiǎn)單的登錄注冊(cè)頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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">密&nbsp;&nbsp;&nbsp;碼</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);
//同步寫(xiě)入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ì)象寫(xiě)入數(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)聽(tīng)port3000...");
  }
});

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