Javascript + Ajax + Jquery +Node 模擬實現登入註冊

阿新 • • 發佈：2020-12-24

技術標籤：node.js node.js javascript jquery ajax

一：建資料夾，搭建目錄

專案開始前先建好資料夾目錄，如下圖：
我2在這裡插入圖片描述
強調一點：是什麼樣的檔案型別就放到什麼型別的資料夾中，不要搞混，尤其是在專案當中要特別注意！！！

二：寫靜態頁面

1./register註冊頁面html

<div class="box">
        <h1>使用者註冊</h1>
        <div class="uname">
            <span>使用者名稱:</span 
><input type="text" placeholder="請輸入您的使用者名稱" id="username">
        </div>
        <div class="pwd">
            <span>密碼:</span><input type="password" placeholder="請輸入您的密碼" id="password">
        </ 
div>
        <div id="register">
            <input type="button" value="立即註冊" id="btn">
            <a href="./login.html">前往登入</a>
            <span id="ts"></span>
        </div>
    </div>

/register註冊頁面css

* {
    margin: 0;
    padding: 0;
}

*::selection {
    background: none;
}

body {
    background: url(../img/register.jpg) no-repeat;
    background-size: 100%;
}

.box {
    width: 400px;
    height: 240px;
    border: 2px solid #000;
    background-color: #ccc;
    opacity: .7;
    border-radius: 8px;
    margin: 60px auto;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.box span {
    display: inline-block;
    width: 70px;
    height: 50px;
    margin-left: 66px;
}

.uname input,
.pwd input {
    width: 200px;
    height: 24px;
}

#register {
    text-align: center;
}

#register span {
    display: block;
    margin: 10px auto;
    width: 100%;
    height: 20px;
    font-size: 14px;
}

#register input {
    width: 200px;
    height: 30px;
    background-color: #ff3040;
    outline: none;
    border: none;
    cursor: pointer;
}

#register a {
    text-decoration: none;
}

2./login登入頁面html

 <div class="box">
        <form action="">
            <p>歡迎登入</p>
            <div class="uname">
                <span>使用者名稱:</span><input type="text" placeholder="請輸入您的使用者名稱" id="username">
            </div>
            <div class="pwd">
                <span>密碼:</span><input type="password" placeholder="請輸入您的密碼" id="password">
            </div>
            <div class="login">
                <button>立即登入</button>
                <span id="wz"></span>
            </div>
            <div class="footer">
                <a href="register.html" class="left" target="_blank">新使用者註冊</a>
                <a href="register.html" class="right" target="_blank">忘記密碼？</a>
            </div>
        </form>
    </div>

/login登入頁面css

* {
    margin: 0;
    padding: 0;
}

*::selection {
    background: none;
}

body {
    background: url(../img/login.jpg);
}

.box {
    width: 400px;
    height: 220px;
    border: 2px solid #000;
    margin: 200px auto;
    text-align: center;
    border-radius: 8px;
}

.box p {
    font-size: 26px;
    font-weight: 700;
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
}

.uname,
.pwd {
    padding-right: 44px;
}

.uname span,
.pwd span {
    display: inline-block;
    width: 60px;
    text-align: right;
}

.uname input,
.pwd input {
    width: 200px;
    height: 20px;
    margin-left: 8px;
    margin-bottom: 10px;
}

.login button {
    width: 100px;
    height: 30px;
    background-color: orangered;
    border: none;
    outline: none;
    border-radius: 8px;
    cursor: pointer;
}

.login span {
    display: block;
    margin: 10px auto;
    width: 100%;
    height: 20px;
    font-size: 14px;
}

.footer {
    position: relative;
    margin-top: 10px;
}

.footer a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

.footer a:hover {
    color: red;
}

.footer .left {
    position: absolute;
    left: 20px;
}

.footer .right {
    position: absolute;
    right: 20px;
}

3./index首頁html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首頁</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(../img/index.jpg) no-repeat;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Welcome to my index</h1>
</body>

</html>

4./404頁面html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>錯誤</title>
</head>
<body>
    <h1>404 Not Found Page</h1>
</body>
</html>

三：寫app.js，搭建node環境

下面展示程式碼：

// 通過http模組建立伺服器，並監聽3000埠
const http = require("http")
const server = http.createServer()
const fs = require("fs")
const url = require("url")
const queryString = require("querystring")

server.on("request", (req, res) => {
    // 靜態伺服
    const requrl = url.parse(req.url, true)
    // 讀取register檔案
    if (req.url == "/" || req.url == "/register.html" && req.method == "GET") {
        fs.readFile("./register.html", "utf8", (err, data) => {
            if (err) {
                fs.readFile("./404.html", "utf8", (err, data) => {
                    res.end(data)
                })
            } else {
                res.setHeader("Content-type", "text/html")
                res.end(data)
            }
        })
        // 讀取reg.css
    } else if (req.url == "/css/register.css" && req.method == "GET") {
        fs.readFile("../css/register.css", "utf8", (err, data) => {
            if (err) {
                console.log(err)
            } else {
                res.setHeader("Content-type", "text/css")
                res.end(data)
            }
        })
        // 讀取login檔案
    } else if (req.url == "/login.html" && req.method == "GET") {
        fs.readFile("./login.html", "utf8", (err, data) => {
            if (err) {
                fs.readFile("./404.html", "utf8", (err, data) => {
                    res.end(data)
                })
            } else {
                res.setHeader("Content-type", "text/html")
                res.end(data)
            }
        })
        // 讀取login.css
    } else if (req.url == "/css/login.css" && req.method == "GET") {
        fs.readFile("../css/login.css", "utf8", (err, data) => {
            if (err) {
                console.log(err)
            } else {
                res.setHeader("Content-type", "text/css")
                res.end(data)
            }
        })
        // 讀取index檔案
    } else if (req.url == "/index.html" && req.method == "GET") {
        fs.readFile("./index.html", "utf8", (err, data) => {
            if (err) {
                fs.readFile("./404.html", "utf8", (err, data) => {
                    res.end(data)
                })
            } else {
                res.setHeader("Content-type", "text/html")
                res.end(data)
            }
        })
        //讀取jquery檔案
    } else if (req.url == "/js/jquery-3.4.0.js" && req.method == "GET") {
        fs.readFile("../js/jquery-3.4.0.js", "utf8", (err, data) => {
            if (err) {
                console.log(err)
            } else {
                res.end(data)
            }
        })
        //讀取圖片
    } else if (req.url == "/img/index.jpg" && req.method == "GET") {
        fs.readFile("../img/index.jpg", (err, data) => {
            if (err) {
                console.log(err)
            } else {
                res.setHeader("Content-type", "image/jpg")
                res.end(data)
            }
        })
    } else if (req.url == "/img/login.jpg" && req.method == "GET") {
        fs.readFile("../img/login.jpg", (err, data) => {
            if (err) {
                console.log(err)
            } else {
                res.setHeader("Content-type", "image/jpg")
                res.end(data)
            }
        })
    } else if (req.url == "/img/register.jpg" && req.method == "GET") {
        fs.readFile("../img/register.jpg", (err, data) => {
            if (err) {
                console.log(err)
            } else {
                res.setHeader("Content-type", "image/jpg")
                res.end(data)
            }
        })
    }
    //註冊介面/register
    else if (requrl.pathname == '/register' && req.method == 'POST') {
        let str = '';
        req.on('data', (chunk) => {
            // console.log(0)
            str += chunk;
        })
        // console.log(1)
        req.on('end', () => {
            // console.log(2)
            let dataObj = queryString.parse(str);
            console.log(dataObj) //物件
            fs.readFile('../data/person.json', 'utf8', (err, data) => {
                // console.log(3)
                // console.log(data)
                let obj = JSON.parse(data) //陣列
                for (let i = 0; i < obj.length; i++) {
                    if (obj[i].username == dataObj.username) {
                        return res.end('3')
                    }
                }
                obj.push(dataObj)
                fs.writeFile('../data/person.json', JSON.stringify(obj), 'utf8', (err, result) => {
                    if (err) {
                        return res.end('2')
                    }
                    return res.end('1')
                })
            })
        })
    }
    //登入介面/login
    else if (requrl.pathname == '/login' && req.method == 'GET') {
        // console.log(requrl)
        // let userInput = queryString.parse(requrl.query)
        // console.log(userInput)
        // console.log(requrl.query);

        fs.readFile('../data/person.json', 'utf8', (err, data) => {
            console.log(data)
            if (err) {
                console.log(1);
            } else {
                let obj = JSON.parse(data)
                // console.log(obj)
                for (let i = 0; i < obj.length; i++) {
                    if (obj[i].username == requrl.query.username && obj[i].password == requrl.query.password) {
                        return res.end('1')
                    } else if (obj[i].username == requrl.query.username && obj[i].password != requrl.query.password) {
                        return res.end('3')
                    }
                }
            }
        })
    }
})

server.listen(3000, () => {
    console.log("伺服器已啟動")
})

四：Ajax請求

1./register頁面

 <script src="../js/jquery-3.4.0.js"></script>
    <script>
        $('#btn').on('click', () => {
            $.ajax({
                url: '/register',
                type: 'POST',
                data: {
                    username: $('#username').val(),
                    password: $('#password').val()
                },
                success: function (res) {
                    switch (res) {
                        case '1':
                            $('#ts').text('使用者註冊成功');
                            $('#ts').css('color', 'green');
                            window.location.href = './login.html';
                            break;
                        case '2':
                            $('#ts').text('使用者註冊失敗');
                            $('#ts').css('color', 'red');
                            break;
                        case '3':
                            $('#ts').text('該使用者已註冊').fadeOut(2000);
                            $('#ts').css('color', 'red');
                            break;
                        case '4':
                            $('#ts').text('未知錯誤')
                            $('#ts').css('color', 'red');
                            break;
                    }
                }
            })
        })
    </script>

2./login頁面

<script src="../js/jquery-3.4.0.js"></script>
    <script>
        $('button').on('click', () => {
            $.ajax({
                url: '/login',
                type: 'GET',
                data: {
                    username: $('#username').val(),
                    password: $('#password').val()
                },
                success: function (res) {
                    switch (res) {
                        case '1':
                            $('#wz').text('登陸成功')
                            $('#wz').css('color', 'green');
                            window.location.href = './index.html'
                            break;
                        case '2':
                            $('#wz').text('登入失敗');
                            $('#wz').css('color', 'red');
                            break;
                        case '3':
                            $('#wz').text('密碼錯誤');
                            $('#wz').css('color', 'red');
                            break;
                        case '4':
                            $('#wz').text('未知錯誤');
                            $('#wz').css('color', 'red');
                            break;
                    }
                }
            })
        })
    </script>

五：建立json存放資料

在這裡插入圖片描述

六：開啟node執行測試app.js檔案

如果沒有node的可以自行去官網下載安裝包，安裝步驟next->next->…（參考傻瓜式教程）
一般預設為3000埠，程式碼中有說明，node開啟以後在網址中輸入localhost:3000/就可以訪問了，感興趣的同學可以下去試一試，另外程式碼中還有不少需要改進的地方，希望讀者能夠及時指正，一起進步

Javascript + Ajax + Jquery +Node 模擬實現登入註冊

技術標籤：node.jsnode.jsjavascriptjqueryajax 一：建資料夾，搭建目錄專案開始前先建好資料夾目錄，如下圖：強調一點：是什麼樣的檔案型別就放到什麼型別的資料夾中，不要搞混，尤其是在專案當中要特別注意！

node+express+mysql實現登入註冊功能

node+express+mysql實現登入註冊功能目錄前言因為JavaScript的火熱，學會nodejs也成為前端人員的一個加分項。最近阿鬆在學node，學了一些知識後，決定試著做一個登入註冊的功能。再經過一陣摸爬滾打

JavaScript實現登入註冊驗證

學習需要堅持，墮落了一星期，學也不是，玩也不對，今天終於跑到圖書館來學習。

SpringBoot實現登入註冊常見問題解決方案

一、使用者名稱密碼都正確的情況下被登入攔截器攔截控制檯報錯：org.apache.ibatis.executor.ExecutorException: A query was run and no Result Maps were found for the Mapped Statement \'com.spbt.mapper.Emp