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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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多维数组去掉重复值示例分享
2014/03/02 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python日期操作学习笔记
2008/10/07 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
关于工资低的辞职信
2014/01/14 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
入党介绍人意见2015
2015/06/01 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
python实现会员管理系统
2022/03/18 Python
python 离散点图画法的实现
2022/04/01 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers