根据学习笔记一的知识点搭建的简易用户注册登录模块，用户数据暂用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. mysql基本操作汇总

    1.数据库操作 (1)创建数据库 CREATE DATABASE <数据库名>; 例子: CREATE DATABASE IF NOT EXISTS RUNOOB DEFAULT CHAR ...

  2. zqt_helper 轻松开发Qt5 Widgets应用

    目标: 1. 代码更加紧凑,所写即所到. 2. 代码层次更直观,直接反映界面窗口层次关系. 3. 不继承类,不重写虚函数,slot接收QEvent. 4. 简单写布局,忘掉api函数. 5. 免去一大 ...

  3. vue脚手架3.0的安装与使用

    一.安装 1.先检查是否有安装vue  (vue-cli3需要node大于等于8.9版本) //vue -V 2.如果没安装跳过.安装有3.0以下的版本就的先卸载掉以前的版本 npm uninstal ...

  4. 容器技术之Docker网络

    上一篇博客我们主要聊了下docker镜像相关的说明以及怎样基于现有镜像制作镜像.分发镜像到docker仓库中的相关测试:回顾请参考https://www.cnblogs.com/qiuhom-1874 ...

  5. Linux操作系统分析 | 深入理解系统调用

    实验要求 1.找一个系统调用,系统调用号为学号最后2位相同的系统调用 2.通过汇编指令触发该系统调用 3.通过gdb跟踪该系统调用的内核处理过程 4.重点阅读分析系统调用入口的保存现场.恢复现场和系统 ...

  6. 二、Spring装配Bean

    内容 声明bean 构造器注入和Setter方法注入 装配Bean 控制bean的创建和销毁 关键词 装配(wiring) 组件扫描(component scanning) 自动装配(AutoWiri ...

  7. canvas锥形渐变进度条

    从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...

  8. 节点流(文件流) FileInputStream & FileOutputStream & FileReader & FileWriter

    节点流(文件流) FileInputStream(字节流)处理视频类的                   FileOutputStream(字节流) FileReader(字符流)处理文本文件    ...

  9. N3飞控踩坑指南

    1.想要使用上位机仿真的话,在本次连接上位机的过程中不要点击IMU校准. 2.两路12S电池并联为飞控供电时(DJI智能电池),需要确保所有电池均为满电.否则如果上电时电量不平衡,电池之间将会自动互相 ...

  10. 微信小程序支付（企业支付给用户零钱）

    内容摘要:本案例客户端支付方式为微信小程序支付(JSAPI).商户运营一段时间后,在微信商户平台开通企业支付服务后,即可调用微信支付提供的企业付款接口将佣金等金额通过微信零钱返现给C端用户零钱. 服务 ...