NodeJs 建立一個簡單的登陸註冊

杭州蘇小小發表於2019-02-16

個人學習記錄,僅供參考

參考

前臺程式碼


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.js"></script>
    <script>
        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>
    使用者名稱:<input type="text" id="user"><br>
    密碼:<input type="password" id="pass"><br>
    <input type="button" id="reg_btn" value="註冊">
    <input type="button" id="login_btn" value="登陸">
</body>
</html>

後臺程式碼

const http = require(`http`);
const fs = require(`fs`);
const querystring = require(`querystring`);
const urlLib = require(`url`);
var users = {};//模擬
http.createServer(function (req,res) {
//解析資料
    var str = ``; //模擬
    req.on("data",function (data) {
        str += data;
    });
    req.on("end",function (err) {
        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,"mag":"此使用者已存在"}`);
                    }else {
                        //2.插入users
                        users[GET.user] = GET.pass;
                        res.write(`{"ok":true,"mag":"註冊成功"}`);
                    }
                    break;
                case  `login`:

                    if(users[GET.user] == null){//1.檢查使用者是否存在
                        res.write(`{"ok":false,"mag":"此使用者不存在"}`);
                    }else if(users[GET.user] != GET.pass){//2.檢查使用者密碼是否正確
                        res.write(`{"ok":false,"mag":"使用者名稱或密碼有誤"}`);
                    }else {
                        res.write(`{"ok":true,"mag":"登陸成功"}`);
                    }

                    break;
                default:
                    res.write(`{"ok":false,"mag":"未知的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();
            });
        }
    });
}).listen(8080);    

相關文章