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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
详解Vue的sync修饰符
May 15 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
destoon二次开发入门示例
2014/06/20 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python中最大递归深度值的探讨
2019/03/05 Python
django 环境变量配置过程详解
2019/08/06 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python中open函数的基本用法示例
2019/09/07 Python
Python中常见的数制转换有哪些
2020/05/27 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
C语言50道问题
2014/10/23 面试题
低碳日宣传活动总结
2014/07/09 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
党员个人整改措施
2014/10/24 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
考研复习计划
2015/01/19 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers