Node.js原生及Express方法实现注册登录原理

2021-06-06 16:01

阅读:351

标签:思路   url   静态文件   stat   制造   框架   ajax   btn   客户   

由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然实际中还是需要用数据库的。

1.node.js原生方法

①html页面,非常简单,没有一丝美化~我们叫它user.html

DOCTYPE html>
html>
head>
    meta charset="utf-8">
    title>usertitle>
head>
body>
    用户:input type="text" id="user">br>
    密码:input type="password" id="pass">br>
    input type="button" value="注册" id="reg_btn">
    input type="button" value="登录" id="login_btn">
body>
html>

②然后,我们来写node服务器,关键的点我都注释出来了,起个名字叫server.js吧

const http = require(‘http‘);             //node原生模块,用来创建服务器
const fs = require(‘fs‘);                 //node原生模块,用于文件操作
const urlLib = require(‘url‘);            //node原生模块,用于解析URL地址
const querystring = require(‘querystring‘);//node原生模块,用于解析POST数据

var users = {};//{"user":"pass"}   模拟数据库船建一个JSON对象,用于存储用户信息

var server = http.createServer(function (req, res) {        //创建服务器
    var str = ‘‘;                   //创建空字符串用来保存接收到的POST数据
    req.on(‘data‘,function (data) {
        str += data;                //此处需注意,如果客户端传过来的数据非常大,它会分多次接收
    });
    req.on(‘end‘,function () {      //当数据传输结束,会执行‘end‘(只执行一次)
        var obj = urlLib.parse(req.url,true);  //解析URL地址
        const url = obj.pathname;              //获得接口地址
        const GET = obj.query;                 //获得GET数据
        const POST = querystring.parse(str);   //解析POST数据
        if (url == ‘/user‘){  //读取接口
            switch (GET.act){
                case ‘reg‘:
                    //1.用户名是否存在
                    if (users[GET.user]){
                        res.write(‘{"ok":false,"msg":"此用户已存在!"}‘)
                    }else {
                    //2.插入新注册用户
                        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){
                        res.write(‘{"ok":false,"msg":"用户名或密码错误!"}‘)
                    }else {
                        res.write(‘{"ok":true,"msg":"登陆成功!"}‘)
                    };
                    break;
                default:
                    res.write(‘{"ok":false,"msg":"未知操作!"}‘)
            };
            res.end();
        }else {  //读取文件
            var fileName = ‘./www‘ + url;  //静态文件存放地址(www是目录)
            fs.readFile(fileName,function (err,data) {
                if (err){
                    res.write(‘404‘);
                }else {
                    res.write(data)
                };
                res.end()
            });
        };
    });
});
server.listen(8081); //监听端口

③服务器写好了,我们来写触发事件(我用的封装过的Ajax.js,大家用jQuery也是可以的,稍微改一下即可)

            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+‘)‘);
                        console.log(json);
                        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(‘通信错误‘);
                    }
                });
            };

至此,我们的简单注册登录就完成了,启动一下server.js,然后即可操作。

技术分享

 

 2.Express方法

整体思路跟原生的差不多,只是多了一些中间件和方法。html和js触发事件跟前面基本一样,这里我们直接来写Express服务器。

①使用Express需要先下载express框架,后面需要什么我们就下载什么(express-static是我们后面需要用到的中间件)

node install express express-static

②直接来写登陆服务器login.js

const express=require(‘express‘);                           //引入Express框架
const expressStatic=require(‘express-static‘);              //用来给静态文件设置目录
var server=express();       //创建Express服务器
server.listen(8081);        //监听服务器
var users={                 //模拟数据库,制造假的用户注册信息
    "zhangsan":"123",
    "lisi":"456",
    "wangwu":"789"
};
server.get(‘/login‘,function (req,res) {
    console.log(req.query)
    var user = req.query["user"];
    var pass = req.query["pass"];
    if (users[user]==null){
        res.send({ok:false,msg:‘此用户不存在!‘});
    }else {
        if(users[user]!=pass){
            res.send({ok:false,msg:‘密码错误!‘});
        }else {
            res.send({ok:true,msg:‘成功!‘});
        }
    };
});
server.use(expressStatic(‘./www‘)); //设置静态文件目录

启动一下login.js,然后即可操作。

这两种方法都是最基础的原理,如果在实际工作中还需要考虑很多东西,共勉!

Node.js原生及Express方法实现注册登录原理

标签:思路   url   静态文件   stat   制造   框架   ajax   btn   客户   

原文地址:http://www.cnblogs.com/toma113/p/7337939.html


评论


亲,登录后才可以留言!