根据学习笔记一的知识点搭建的简易用户注册登录模块，用户数据暂用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. vue项目报错Missing space before function parentheses的问题

    问题描述为——函数括号前缺少空格 导致原因主要是,使用eslint时,严格模式下,会报错Missing space before function parentheses的问题,意思是在方法名和刮号之 ...

  2. docker的file内容解释

    关键字---重点啊) FROM 基础镜像,当前新镜像是基于哪个镜像的 MAINTAINER  镜像维护者的姓名和邮箱地址 RUN  容器构建时需要运行的命令 EXPOSE 当前容器对外暴露的端口 WO ...

  3. thinkphp路由简介和设置使用

    use think\Route; //静态路由 Route::rule('/', 'index/index/index'); Route::rule('test', 'index/index/test ...

  4. html文本超出加省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  5. Ef core 如何设置主键

    在正题之前,先说明几个问题. (1)写 sql 不好吗,为什么要引入 ORM ? 总的来说由于需求的复杂性增加,引入了面向对象编程,进而有了 ORM ,ORM 使得开发人员以对象的方式表达业务逻辑.对 ...

  6. 自定义值类型一定不要忘了重写Equals，否则性能和空间双双堪忧

    一:背景 1. 讲故事 曾今在项目中发现有同事自定义结构体的时候,居然没有重写Equals方法,比如下面这段代码: static void Main(string[] args) { var list ...

  7. python(3.x)自动化全栈开发100天集训计划(跟上进度，到一个新高度)——day1

            Day1 目录: Python介绍 * 了解Python的特点.发展史 * 介绍Python广泛的应用领域和前景 第一个Python程序 * 掌握Python代码的2种执行方式 变量 ...

  8. Linux、Android系统调用从上层到底层的调用路径浅析

    参考: https://blog.csdn.net/liuhangtiant/article/details/85149369 http://blog.sina.com.cn/s/blog_79433 ...

  9. Java实现 蓝桥杯VIP 算法训练 最长字符串

    题目描述 字符串可是比赛经常出的问题,那么给大家出一个题, 输入五个字符串,输出5个字符串当中最长的字符串.每个字符串长度在100以内,且全为小写字母. 输入 无 输出 无 样例输入 one two ...

  10. Java实现 蓝桥杯VIP 算法训练 矩阵加法

    时间限制:1.0s 内存限制:512.0MB 问题描述 给定两个N×M的矩阵,计算其和.其中: N和M大于等于1且小于等于100,矩阵元素的绝对值不超过1000. 输入格式 输入数据的第一行包含两个整 ...