ajax+node.js玩转注册与登录

Posted 2021-07-22 Ultraman_agul

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax+node.js玩转注册与登录相关的知识，希望对你有一定的参考价值。

需求

使用node.js搭建本地服务器，使用ajax进行请求和获取数据，功能是实现用户登录与注册功能。

结构

server.js为搭建服务器的文件，data.json存储的是用户信息，index.html和register.html分别为登录和注册页面
在这里插入图片描述

写服务接口

创建server.js文件，编写服务端代码，使用express框架搭建本地服务器，创建三个路由分别监听登录方式的get方法和post方法，以及注册功能get方法。

const express = require('express')
const fs = require('fs')
const querystring = require('querystring')
const app = express()
app.use(express.static(__dirname))
app.listen(91)

app.get('/a', (req, res) => {
    let content = {
        username: req.query.username,
        password: req.query.password
    }
    fs.readFile('./data.json', 'utf8', (err, data) => {
        if (err) {
            res.end(err);
            return
        }
        data = JSON.parse(data)
        for (let i = 0; i < data.length; i++) {
            // 判断用户名密码是否正确
            if (data[i].username == content.username && data[i].password == content.password) {
                res.end('0')
                return
            }
        }
        res.end('1')
    })
})

app.post('/a', (req, res) => {
    // res.send('post成功')
    let content = ''
    req.on('data', params => {
        content += params
    })
    req.on('end', () => {
        content = querystring.parse(content)
        fs.readFile('./data.json', 'utf8', (err, data) => {
            if (err) {
                res.end(err);
                return
            }
            data = JSON.parse(data)
            for (let i = 0; i < data.length; i++) {
                // 判断用户名密码是否正确
                if (data[i].username == content.username && data[i].password == content.password) {
                    res.end('0')
                    return
                }
            }
            res.end('1')
        })
    })
})


app.get('/b', (req, res) => {
    // res.send('ok')
    fs.readFile("./data.json", 'utf8', (err, datas) => {
        if (err) {
            res.end(err);
            return
        } else {
            let userData = JSON.parse(datas)
            let newData = {
                username: req.query.username,
                password: req.query.password
            }
            // 判断用户名是否存在
            for (let i = 0; i < userData.length; i++) {
                if (userData[i].username == newData.username) {
                    res.end('1')
                    return
                }
            }
            userData.push(newData)
            // 写入文件必须是string或者 buffer类型
            userData = JSON.stringify(userData)
            fs.writeFile('./data.json', userData, 'utf8', err => {
                if (err) {
                    res.end('3')
                } else {
                    res.end('0')
                }
            })
        }
    })
})

console.log('正在监听端口：91')

前端页面代码

`index.js`

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class='form'>

        <form>
            <div class='item'>
                <img src="./agul.jpg" alt="">
            </div>
            <div class='item'>
                <h3>AJAX登录与注册系统</h3>
            </div>
            <div class="item">
                <i class='iconfont icon-yonghu'></i><input type="text" id='username' placeholder="用户名">
            </div>
            <div class="item">
                <i class='iconfont icon-mima'></i><input type="password" id='psw' placeholder=" 密&nbsp;&nbsp;&nbsp;码">
            </div>
            <div class='method'>
                <span>method</span>
                <label>
                    <input name="method" type="radio" value="" id='getMethod' checked />get </label>
                <label>
                    <input name="method" type="radio" value="" id='postMethod' />post </label>
            </div>
            <div class="item1">
                <a href="#" id='login'>登录</a>
            </div>
            <div class="item1">
                <a href="./register.html">注册</a>
            </div>
        </form>
    </div>
    <script>
        let getMethod = document.querySelector('#getMethod')
        let user = document.querySelector('#username')
        let psw = document.querySelector('#psw')
        let login = document.querySelector('#login')
        login.onclick = function () {
            console.log('发送中')
            let type = getMethod.checked ? 'get' : 'post'
            ajax(type, 'http://127.0.0.1:91/a')
        }

        function ajax(method, url) {
            let data = 'username=' + user.value + '&password=' + psw.value
            let xhr = new XMLHttpRequest()
            url = method.toUpperCase() === 'GET' ? url + '?' + data : url
            xhr.open(method, url, true)
            if (method.toUpperCase() === 'GET') {
                xhr.send()
            } else {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(data)
            }
            xhr.onreadystatechange = function () {
                if (xhr.status === 200 && xhr.readyState === 4) {
                    console.log(xhr.responseText)
                    if (xhr.responseText == 0) {
                        alert('登录成功！')
                    } else {
                        alert('用户名或密码错误!')
                    }
                }
            }
        }

    </script>
</body>

</html>

`register.html`

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class='form' style="height: 300px;">

        <form>
            <div class='item'>
                <img src="./agul.jpg" alt="">
            </div>
            <div class='item'>
                <h3>AJAX登录与注册系统</h3>
            </div>
            <div class="item">
                <i class='iconfont icon-yonghu'></i><input type="text" id='username' placeholder="用户名">
            </div>
            <div class="item">
                <i class='iconfont icon-mima'></i><input type="password" id='psw' placeholder=" 密&nbsp;&nbsp;&nbsp;码">
            </div>

            <div class="item1">
                <a href="#" id='register'>注册</a>
            </div>

        </form>

        <script>
            let register = document.querySelector('#register')
            let user = document.querySelector('#username')
            let psw = document.querySelector('#psw')
            register.onclick = function () {
                let data = 'username=' + user.value + '&password=' + psw.value
                let xhr = new XMLHttpRequest()
                url = 'http://127.0.0.1:91/b?' + data
                xhr.open('get', url, true)
                xhr.send()
                xhr.onreadystatechange = function () {
                    if (xhr.status === 200 && xhr.readyState === 4) {
                        console.log(xhr.responseText)
                        if (xhr.responseText == 1) {
                            alert('用户已存在！')
                        } else if (xhr.responseText == 0) {
                            alert('恭喜你注册成功！')
                            location.href = './index.html'
                        } else if (xhr.responseText == 3) {
                            alert('很遗憾注册失败!')
                        }
                    }
                }
            }
        </script>
</body>

</html>

`CSS代码`

*{
    padding: 0;
    margin: 0;
}

@font-face {
  font-family: "iconfont"; /* Project id 2596412 */
  src: url('//at.alicdn.com/t/font_2596412_4zfffoecsgg.woff2?t=1623039392557') format('woff2'),
       url('//at.alicdn.com/t/font_2596412_4zfffoecsgg.woff?t=1623039392557') format('woff'),
       url('//at.alicdn.com/t/font_2596412_4zfffoecsgg.ttf?t=1623039392557') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yonghu:before {
  content: "\\e912";
}

.icon-mima:before {
  content: "\\eb26";
}

.icon-yonghu1:before {
  content: "\\e640";
}

.icon-mima1:before {
  content: "\\e6d4";
}

html,body{
    background-color: #eee;
}

.form{
    margin: 100px auto;
    background-color: #fff;
    height: 400px;
    width: 300px;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #919191;
}

.item{
    margin: 0 auto;
    width: 300px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    position: relative;
}

.form img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.item input{
    width: 60%;
    outline: none;
    height: 30px;
    border-radius: 15px;
    padding-left: 40px;
    border: 1px solid #919191;
    box-shadow: 0 0 4px 0 #919191;
}
.item i{
    color: #919191;
    position: absolute;
    left: 50px;
    top: 2px;
}

.method{
    padding-left: 50px;
}

.method input{
    width: 30px;
}

.item1{
    height: 40px;
    line-height: 40px;
    margin: 10px 0;
}

.item1 a{
    display: block;
    background-color: #667aff;
    width: 60%;
    height: 40px;
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 0 4px 0 #919191;
}

.item1 a:hover{
    opacity: 0.8;
}

展示

使用node server.js命令运行服务器文件启动服务，在本地地址91端口访问：
在这里插入图片描述
切换到注册页进行注册：

回到登录页登录验证，支持get、post方式请求

注册成功会在data.json文件插入数据，登录时会进行用户和密码的比对，注册时会对用户名是否存在进行判断。
简单的小功能就完成了。

以上是关于ajax+node.js玩转注册与登录的主要内容，如果未能解决你的问题，请参考以下文章

node.js 服务器登录注册

Node.js+express+MySQL仿美团注册登录绑定第三方登录

Node.js_express_中间件 middleware_登录/注册实例

node.js实现简单的登录注册页面

Vue(vue+node.js+mongodb)_登录注册（密码登录）

node js实战：带数据库，加密的注册登录表单