node.js實現(xiàn)登錄注冊頁面

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

目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、云州網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

首先需要新建四個文件

一個服務(wù)器js

一個保存數(shù)據(jù)的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("請輸入內(nèi)容!");
      }
      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、搭建服務(wù)器

var http = require("http");
var url = require("url");
var qs = require("querystring");
var fs = require("fs");

http.createServer(function (req , res) {
//設(shè)置請求頭
  res.setHeader("Access-Control-Allow-Origin","*");
  if(req.method == "POST"){
    //接收發(fā)來的用戶名和密碼
    var result = "";
//獲取前端代碼發(fā)來的路由地址
    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ā)來的路由地址判斷是登錄還是注冊頁面，如果是注冊頁面
              if(pathName == "/register"){
//創(chuàng)建一個數(shù)組一個對象來保存帳號和密碼
                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("文件中有數(shù)據(jù)");
//把數(shù)據(jù)轉(zhuǎn)成JSON對象，以便我們使用
              var arr = JSON.parse(data);
//遍歷整個保存數(shù)據(jù)的數(shù)組 判斷登錄注冊
              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"){
//創(chuàng)建新對象寫入數(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("注冊成功!");
                return;
              }
            }
          }else {
            console.log("讀取文件失敗");
          }
        })
      }
    });
  }else {
    res.end("get請求");
  }
}).listen(3000 , function (err) {
  if (!err){
    console.log("服務(wù)器啟動成功，正在監(jiān)聽port3000...");
  }
});

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

node.js實現(xiàn)登錄注冊頁面

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁題目：node.js實現(xiàn)登錄注冊頁面
瀏覽地址：http://chinadenli.net/article0/iegdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、自適應(yīng)網(wǎng)站、建站公司、動態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

node.js實現(xiàn)登錄注冊頁面