Node.js原生及Express方法實現註冊登陸原理

時間 2019-11-09

標籤 node.js node 原生 express 方法實現註冊登陸原理欄目 Node.js 简体版

原文原文鏈接

因爲本文只是實現其原理，因此沒有使用數據庫，只是在js裏面模擬數據庫，固然實際中仍是須要用數據庫的。html

1.node.js原生方法node

①html頁面，很是簡單，沒有一絲美化~咱們叫它user.htmlajax

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>user</title>
</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也是能夠的，稍微改一下便可）express

            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，而後便可操做。json

2.Express方法服務器

總體思路跟原生的差很少，只是多了一些中間件和方法。html和js觸發事件跟前面基本同樣，這裏咱們直接來寫Express服務器。框架

①使用Express須要先下載express框架，後面須要什麼咱們就下載什麼（express-static是咱們後面須要用到的中間件）ui

node install express express-staticurl

②直接來寫登錄服務器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')); //設置靜態文件目錄