node.js实现登录注册页面


Posted in Javascript onApril 08, 2017

本文实例为大家分享了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">密   码</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实现登录注册页面

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 #Javascript
js仿微信公众平台打标签功能
Apr 08 #Javascript
详解node.js搭建代理服务器请求数据
Apr 08 #Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 #Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 #Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 #Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 #Javascript
You might like
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
Javascript window对象详解
2014/11/12 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python之时间和日期使用小结
2019/02/14 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
审计主管岗位职责
2014/01/31 职场文书
幼儿园开学寄语
2014/04/03 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
环保项目建议书
2014/08/26 职场文书
三八节活动简报
2015/07/20 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers