脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → node.js登录注册页面

node.js实现登录注册页面

 更新时间：2022年04月26日 14:56:39   作者：bestjarvan  
这篇文章主要为大家详细介绍了node.js实现简单的登录注册页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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">密&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文件中可以查看注册信息

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • TypeScript开发Node.js程序的方法

    TypeScript开发Node.js程序的方法

    这篇文章主要介绍了TypeScript开发Node.js程序的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • node 使用 async 控制并发的方法

    node 使用 async 控制并发的方法

    这篇文章主要介绍了node 使用 async 控制并发的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • node-sass@4.14.1报错的最终解决方案分享

    node-sass@4.14.1报错的最终解决方案分享

    最近在安装node-sass@4.14.1的时候遇到了些问题,所以下面这篇文章主要给大家介绍了关于node-sass@4.14.1报错的最终解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 一文带你了解前端包管理工具npm、yarn和pnpm

    一文带你了解前端包管理工具npm、yarn和pnpm

    如果您是前端开发人员,您将接触到一些包管理工具,包管理工具是连续自动化程序的集合,例如安装、升级、配置和删除程序,下面这篇文章主要给大家介绍了关于前端包管理工具npm、yarn和pnpm的相关资料,需要的朋友可以参考下
    2022-05-05
  • NodeJs环境安装与配置的实现步骤

    NodeJs环境安装与配置的实现步骤

    本文主要介绍了NodeJs环境安装与配置,包括配置环境和配置国内镜像，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • windows使用nvm对node进行版本管理切换的完整步骤

    windows使用nvm对node进行版本管理切换的完整步骤

    这篇文章主要介绍了windows使用nvm对node进行版本管理切换的完整步骤,在使用之前各位务必卸载掉自己安装过的nvm或者node版本包括环境变量之类的,要保证自己的电脑完全没有node环境,需要的朋友可以参考下
    2024-03-03
  • node.js利用socket.io实现多人在线匹配联机五子棋

    node.js利用socket.io实现多人在线匹配联机五子棋

    这篇文章主要介绍了node.js利用socket.io实现多人在线匹配联机五子棋的操作方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Node.js API详解之 querystring用法实例分析

    Node.js API详解之 querystring用法实例分析

    这篇文章主要介绍了Node.js API详解之 querystring用法,结合实例形式分析了Node.js API中querystring的基本功能、用法及相关操作注意事项,需要的朋友可以参考下
    2020-04-04
  • Nodejs实现多人同时在线移动鼠标的小游戏分享

    Nodejs实现多人同时在线移动鼠标的小游戏分享

    这篇文章主要介绍了Nodejs实现多人同时在线移动鼠标的小游戏分享,本文给出了服务器端和客户端代码以及运行方法,需要的朋友可以参考下
    2014-12-12
  • nodejs清空/删除指定文件夹下面所有文件或文件夹的方法示例

    nodejs清空/删除指定文件夹下面所有文件或文件夹的方法示例

    这篇文章主要介绍了nodejs清空/删除指定文件夹下面所有文件或文件夹的方法,通过两个具体案例形式分析了node.js同步删除文件/文件夹,以及异步删除文件/文件夹的相关实现技巧,涉及递归遍历与文件判断、回调等相关操作,需要的朋友可以参考下
    2023-04-04

最新评论