根据学习笔记一的知识点搭建的简易用户注册登录模块，用户数据暂用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. poj2449第K小路径问题

    Remmarguts' Date Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 30017   Accepted: 8159 ...

  2. LeetCode上的SQL练习

    184. 部门工资最高的员工 SELECT D. NAME Department, E. NAME Employee, E.Salary FROM -- 内连接两张查询表 Employee E INN ...

  3. poi 针对word模板内容替换

    最近多了一个需求,需要对word模板内容进行替换,一开始用的是word03版的,替换起来比较简单,主要是range对像替换非常方便,而且可以保留替换前的字体样式. InputStream is = n ...

  4. JUC整理笔记三之测试工具jcstress

    并发测试工具Jcstress使用教程 Jcstress 全称 Java Concurrency Stress,是一种并发压力测试工具,可以帮助研究JVM.java类库和硬件中并发的正确性. Wiki地 ...

  5. [JavaWeb基础] 005.Hibernate的配置和简单使用

    1.Hibernate简介 Hibernate是一个基于Java的开源的持久化中间件,对JDBC做了轻量的封装.采用ORM映射机制,负责实现Java对象和关系数据库之间的映射,把sql语句传给数据库, ...

  6. 使用 fileupload 组件完成文件的上传应用

    1. 使用 fileupload 组件完成文件的上传应用 commons-dbutils-1.3.jarcommons-fileupload-1.2.1.jar 1). 需求: > 在 uplo ...

  7. Unity 离线建造系统

    很多游戏,特别是养成类手游,都会有自己独特的建造系统,一个建造装置的状态循环或者说生命周期一般是这样的: 1.准备建造,设置各项资源的投入等 2.等待一段倒计时,正在建造中 3.建造结束,选择是否收取 ...

  8. .net core Docker 容器添加ffmpeg 获取视频信息和截图

    最近在处理上传视频,需要获取视频信息和截图,这里就需要用到ffmpeg; 由于我的项目是在docker compose中运行调试,所以ffmpeg也需要在docker中能调用: 网上找到的方法在Doc ...

  9. JSON.parse() 的实现

    目录 1. JSON.parse() 2. 前置知识 2.1 JSON格式中的数据类型 2.2 转义字符的处理 2.2 判断对象是否相等 2.3 寻找匹配的字符串 2.4 基础的递归思想 3. 实现流 ...

  10. Java实现洛谷 P1616 疯狂的采药

    题目背景 此题为NOIP2005普及组第三题的疯狂版. 题目描述 LiYuxiang是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他 ...