根据学习笔记一的知识点搭建的简易用户注册登录模块，用户数据暂用json保存。

HTML：

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <link href="bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet" />

  <meta charset="utf-8">

  <style>

    body {

      margin: 0px;

      padding: 0px;

    }

    div{

      position:absolute;

      display: block;

      /* border: 3px solid #116; */

      border-left: 40px;

      border-top: 5px;

      border-bottom: 5px;

      border-right: 3px;

      border-style: solid;

      border-radius: 5px 20px 20px 5px;

      border-color: rgb(0, 123, 255);

      padding:5px 10px;

      left: 5px;

    }

  </style>

  <title></title>

  <script src="ajax.js" charset="utf-8"></script>

  <script type="text/javascript">

    window.onload=function (){

      var oTxtUser=document.getElementById('user');

      var oTxtPass=document.getElementById('pass');

      var oBtnReg=document.getElementById('reg_btn');

      var oBtnLogin=document.getElementById('login_btn');

      oBtnLogin.onclick=function (){

        ajax({

          url: '/user',

          data: {act: 'login', user: oTxtUser.value, pass: oTxtPass.value},

          type: 'get',

          success: function (str){

            var json=eval('('+str+')');

            if(json.ok){

              alert('登录成功');

            }else{

              alert('登录失败：'+json.msg);

            }

          },

          error: function (){

            alert('通信错误');

          }

        });

      };

      oBtnReg.onclick=function (){

        ajax({

          url: '/user',

          data: {act: 'reg', user: oTxtUser.value, pass: oTxtPass.value},

          type: 'get',

          success: function (str){

            var json=eval('('+str+')');

            if(json.ok){

              alert('注册成功');

            }else{

              alert('注册失败：'+json.msg);

            }

          },

          error: function (){

            alert('通信错误');

          }

        });

      };

    };

  </script>

</head>

<body>

  <index>

    <p>Hello Node.js</p>

  </index>

  <div>

    <input type="text" id="user" placeholder="输入用户名" class="form-control"><br />

    <input type="password" id="pass" placeholder="输入密码" class="form-control"><br />

    <input type="button" value="注册" class="btn btn-primary" id="reg_btn">

    <input type="button" value="登陆" class="btn btn-primary" id="login_btn">

  </div>

</body>

</html>

ajax.js：

function json2url(json){

    var arr=[];

    for(var name in json){

        arr.push(name+'='+json[name]);

    }

    return arr.join('&');

}

function ajax(json){

    json=json || {};

    if(!json.url)return;

    json.data=json.data || {};

    json.type=json.type || 'get';

    var timer=null;

    if(window.XMLHttpRequest){

        var oAjax=new XMLHttpRequest();

    }else{

        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

    }

    switch(json.type){

        case 'get':

            oAjax.open('GET',json.url+'?'+json2url(json.data),true);

            oAjax.send();

            break;

        case 'post':

            oAjax.open('POST',json.url,true);

            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

            oAjax.send(json2url(json.data));

            break;

    }

    oAjax.onreadystatechange=function(){

        if(oAjax.readyState==4){

            clearTimeout(timer);

            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){

                json.success && json.success(oAjax.responseText);

            }else{

                json.error && json.error(oAjax.status);

            }

        }

    };

}

Node：

const http=require('http');

const fs=require('fs');

const querystring=require('querystring');

const urlLib=require('url');

var users={};//用来简易地存储用户数据{"blue":"123456","zhangsan":"789456","lisi":"123789"}

var server=http.createServer(function(req,res){

  //解析数据

  var str='';

  req.on('data',function(data){

    str+=data;

  });

  req.on('end',function(){

    var obj=urlLib.parse(req.url,true);

    const url=obj.pathname;

    const GET=obj.query;

    const POST=querystring.parse(str);

    //区分用户访问的是接口还是文件

    if(url=='/user'){ //假设只有这一个接口，其他的都是文件

      switch(GET.act){

        case 'reg':

          //1.检查用户名是否已经有了

          if(users[GET.user]){

            res.write('{"ok":false,"msg":"此用户已存在"}');

          }else{           //2.插入users

            users[GET.user]=GET.pass;

            res.write('{"ok":true,"msg":"注册成功"}');

          }

          break;

        case 'login':

          //1.检查用户是否存在

          if(users[GET.user==null]){

            res.write('{"ok":false,"msg":"此用户不存在"}');

          }else if(users[GET.user]!=GET.pass){//2.检查用户密码

            res.write('{"ok":false,"msg":"用户名或密码有误"}');

          }else{

            res.write('{"ok":true,"msg":"登陆成功"}');

          }

          break;

        default:

          res.write({"ok":false,"msg":"未知的act"});

      }

      res.end();

    }else{ //文件

      //读取文件

      var file_name='./www'+url;

      fs.readFile(file_name,function(err,data){

        if(err){

          res.write('404');

        }else{

          res.write(data);

        }

        res.end();

      });

    }

  });

});

server.listen(8080);

结果显示：

Node.js搭建简易用户登录的更多相关文章

  1. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  2. 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  3. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  4. 使用 Node.js 搭建 Web 服务器

    使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:http模块.文件系统.url解析模块.路径解析模块.以及301重定向技术等, ...

  5. 使用 Node.js 搭建微服务网关

    目录 Node.js 是什么 安装 node.js Node.js 入门 Node.js 应用场景 npm 镜像 使用 Node.js 搭建微服务网关 什么是微服务架构 使用 Node.js 实现反向 ...

  6. node.js 开发简易的小爬虫

    node.js  开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...

  7. 《基于Node.js实现简易聊天室系列之环境搭建》

    前文提到了Demo所涉及的技术,现在讲环境(工具)的配置.环境的配置主要是数据库mongDB和Node.js的配置. Node.js Node.js的官方地址:https://nodejs.org/e ...

  8. node.js搭建Web服务器

    Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...

  9. 使用原生node.js搭建HTTP服务器，支持MP4视频、图片传输，支持下载rar文件

    前言 如何安装node.js,如何搭建一个简易的http服务器我这里就不再赘述了,不懂的同学可以先去学习一下.当然了,我写的也就属于简易版的增强版,大家有什么高见的欢迎提出,然后进入正题. 目录结构 ...

随机推荐

  1. Align Content Properties

    How to align the items of the flexible element? <!DOCTYPE html> <html lang="en"&g ...

  2. Pyqt5_QComboBox

    QComboBox 是一个集按钮和下拉选项于一体的控件,也称做下拉列表框 方法 addItem() 添加一个下拉选项 addItems() 从列表中添加下拉选项 Clear() 删除下拉选项集合中的所 ...

  3. Verilog语言中的系统任务和系统函数

    Verilog语言中预先定义了一些任务和函数,用于完成一些特殊的功能,它们被称为系统任务和系统函数,这些函数大多数都是只能在Testbench仿真中使用的,使我们更方便的进行验证. `timescal ...

  4. [转]什么是OpenSSH

    定义 SSH是什么? 相关概念 OpenSSH安全吗?究竟安全在哪里呢? Telnet这么好的一个工具为什么还要用户手动开启呢? SSH账户类型 iPhone中修改密码的大致步骤 如何从电脑连接通过S ...

  5. 创建多线程的方式&Thread类的常用方法

    创建多线程的第一种方式:继承java.lang.Thread类 注意:1.一个线程只能执行一次start() 2.不能通过Thread实现类对象的 run()去启动一个线程 3.增加加一个线程,需要新 ...

  6. websocket ddos检测脚本

    from websocket import create_connection while(1): ws = create_connection('wss://ha-cmim.cmcc-cs.cn:1 ...

  7. 舵机MX-64AR与MX-28AR驱动

    背景:硬件采用485通信,在tb上采购的无需收发控制的串口转RS485模块(485通信为半双工,一般情况需要控制收发模式).在使用该模块后,即可完全使用一个普通地串口来对485通信的舵机进行操作. 模 ...

  8. 15 . PythonWeb框架本质

    PythonWeb框架的本质 简单描述就是:浏览器通过你输入的网址给你的socket服务端发送请求,服务端接受到请求给其回复一个对应的html页面,这就是web项目.所有的Web应用本质上就是一个so ...

  9. 副业收入是我做程序媛的3倍，工作外的B面人生

    到“程序员”,多数人脑海里首先想到的大约是:为人木讷.薪水超高.工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是 ...

  10. PAT1067 试密码 (20分)——测试点4分析 一个易错点

    1067 试密码 (20分)   当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码( ...