中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

node.js實現登錄注冊頁面

發布時間:2020-10-25 23:57:50 來源:腳本之家 閱讀:202 作者:bestjarvan 欄目:web開發

本文實例為大家分享了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">密&nbsp;&nbsp;&nbsp;碼</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">密&nbsp;&nbsp;&nbsp;碼</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文件中可以查看注冊信息

node.js實現登錄注冊頁面

 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

格尔木市| 固阳县| 商丘市| 肥东县| 萝北县| 浮梁县| 安西县| 威海市| 英超| 南陵县| 长武县| 明水县| 长顺县| 龙井市| 新竹县| 璧山县| 江油市| 商水县| 洞口县| 淮滨县| 巨野县| 古田县| 西华县| 宁化县| 滦南县| 延庆县| 涪陵区| 南昌市| 阜新| 新乡市| 高阳县| 鹤庆县| 启东市| 广平县| 铅山县| 苏州市| 通江县| 同江市| 延长县| 五台县| 龙井市|