Node.js模拟实现登录注册

一：建文件夹，搭建目录

项目开始前先建好文件夹目录，如下图：

强调一点：是什么样的文件类型就放到什么类型的文件夹中，不要搞混，尤其是在项目当中要特别注意！！！

二：写静态页面

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/就可以访问了，感兴趣的同学可以下去试一试，另外代码中还有不少需要改进的地方，希望读者能够及时指正，一起进步