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 相关文章推荐
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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 动态随机生成验证码类代码
2010/04/09 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
django如何实现视图重定向
2019/07/24 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
为什么使用接口?
2014/08/13 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
法律专业推荐信范文
2013/11/29 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
家长对孩子评语
2014/01/30 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书