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 相关文章推荐
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
javascript中indexOf技术详解
May 07 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
纯javascript版日历控件
Nov 24 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
vue实现井字棋游戏
Sep 29 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
详解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实现多张图片上传加水印技巧
2013/04/18 PHP
php实现的日历程序
2015/06/18 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
Javascript实现的分页函数
2006/12/22 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python八皇后问题的解决方法
2018/09/27 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Keras 使用 Lambda层详解
2020/06/10 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
一份Java笔试题
2012/02/21 面试题
房屋改造计划书
2014/01/10 职场文书
商场端午节活动方案
2014/01/29 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
银行委托书范本
2014/09/28 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
红色电影观后感
2015/06/18 职场文书
高中同学会致辞
2015/08/01 职场文书
golang中的空接口使用详解
2021/03/30 Python