node.js+ajax实现最基本的登录注册

node.js登录注册功能

1.先来看下我的目录结构

2.看看每个文件里面的代码

data.json

[
    {
        "username": "z123",
        "password": "zzz333"
    }
]

json里面储存用户的数据

login.html登录页面

    <div class="reg">
        <h1>用户登录</h1>
        <p>
            <label for="">用户名：</label>
            <input type="text" id="username">
        </p>
        <p>
            <label for="">密&emsp;码：</label>
            <input type="text" id="password">
        </p>
        <button id="btn">登录</button>
        <button id="reBtn">注册</button>
    </div>
<script src="/js/jquery.min.js"></script>
<script src="/js/login.js"></script>

register.html注册页面

    <div class="reg">
        <h1>用户注册</h1>
        <p>
            <label for="">用户名：</label>
            <input type="text" id="username" placeholder="必须以字母开头">
        </p>
        <p>
            <label for="">密&emsp;码：</label>
            <input type="text" id="password" placeholder="字母开头并且大于6位">
        </p>
        <button id="btn">注册</button>
        <button id="loBtn">登录</button>
    </div>
<script src="/js/jquery.min.js"></script>
<script src="/js/register.js"></script>

login.js

let uname = document.getElementById('username')
let upwd = document.getElementById('password')
let btn = document.getElementById('btn')
let reBtn = document.getElementById('reBtn')
reBtn.onclick = function(){
    location.href = '../page/register.html'
}
btn.onclick = function(){
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            //这里xhr.responseText 请求回来的值是app.js里面res.end()过来的
            code(xhr.responseText)
        }
    }
    xhr.open('POST', '/login', true)
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    //post请求需要发送数据过去，app.js中用req.on('data', chunk => {}) 接收
    xhr.send("username=" + uname.value + "&password=" + upwd.value)
}

//接收的数据处理产生提示
function code(num){
    if(num == 0){
        alert('妈了个巴子！密码正确！')
        location.href = '../index.html'
    }else if(num == 1){
        alert('账号或密码不正确,请重新输入！');
    }
}

register.js

let btn = document.getElementById('btn')
let username = document.getElementById('username')
let password = document.getElementById('password')
let loBtn = document.getElementById('loBtn')
loBtn.onclick = function () {
    location.href = '../page/login.html'
}
btn.onclick = function () {
    //注册使用正则
    let test = /^[a-zA-Z]+/g
    let reg = /^[0-9A-Za-z]{6,}$/ 
    if (test.test(username.value)) {
        if (reg.test(password.value)) {
            let xhr = new XMLHttpRequest()
            //这里用get请求方式,数据直接放在地址栏,app.js中直接用query可接受到
            xhr.open('GET', '/register?username=' + username.value + '&password=' + password.value, true)
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.send()
            // xhr.send("username=" + username.value + "&password=" + password.value)
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    //接收的数据处理
                    code(xhr.responseText)
                }
            }
        }else{
            alert('密码格式不对')
        }
    } else {
        alert('用户名格式不对');
    }
}

function code(num) {
    if (num == 0) {
        alert('giao!注册成功啦！')
        location.href = '../page/login.html'
    } else if (num == 1) {
        alert('逗比！这个账号被注册过了！')
    } else if (num == 2) {
        alert('不会正则?')
    } else {
        alert('未知错误!')
    }
}

app.js

const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");

const post = 5000;
//通过http模块创建服务器，并监听端口5000
const server = http.createServer();
server.on("request", (req, res) => {
    let dataurl = url.parse(req.url, true);
    let pathname = dataurl.pathname
    let query = dataurl.query
    // console.log(query);
    // console.log(pathname);
    //静态伺服
    if ((pathname == "/" || pathname == "/page/register.html") && req.method == "GET" && pathname != '/favicon.ico') {
        console.log(111);
        fs.readFile("./page/register.html", "utf8", (err, data) => {
            if (err) {
                fs.readFile("./page/404.html", "utf8", (err, data) => {
                    res.end(data);
                    return
                })
            }
            res.setHeader("Content-type", "text/html");
            res.end(data);
        })
    //读取login.html
    } else if (pathname == "/page/login.html" && req.method == "GET") {
        fs.readFile("./page/login.html", "utf8", (err, data) => {
            if (err) {
                fs.readFile("./page/404.html", "uft8", (err, data) => {
                    res.end(data);
                    return
                })
            }
            res.setHeader("Content-type", "text/html");
            res.end(data);
        })
    //读取index.html
    } else if (pathname == "/index.html" && req.method == "GET") {
        fs.readFile("./index.html", "utf8", (err, data) => {
            if (err) {
                fs.readFile("./page/404.html", "uft8", (err, data) => {
                    res.end(data);
                    return
                })
            }
            res.setHeader("Content-type", "text/html");
            res.end(data);
        })
    //读取register.js
    } else if (pathname == '/js/register.js' && req.method == "GET") {
        fs.readFile("./js/register.js", 'utf8', (err, data) => {
            if (err) {
                fs.readFile("./page/404.html", "uft8", (err, data) => {
                    res.end(data);
                    return
                })
            }
            res.end(data)
        })
    // 读取jquery
    } else if (pathname == '/js/jquery.min.js' && req.method == 'GET') {
        fs.readFile('./js/jquery.min.js', 'utf8', (err, data) => {
            if (err) {
                fs.readFile("./page/404.html", "uft8", (err, data) => {
                    res.end(data);
                    return
                })
            }
            res.end(data)
        })
    // 读取login.js
    } else if (pathname == '/js/login.js' && req.method == "GET") {
        fs.readFile("./js/login.js", 'utf8', (err, data) => {
            if (err) {
                fs.readFile("./page/404.html", "uft8", (err, data) => {
                    res.end(data);
                    return
                })
            }
            res.end(data)
        })
    // 注册处理
    } else if (pathname == '/register' && req.method == 'GET') {
        // 读取json文件
        fs.readFile("./data/data.json", 'utf8', (err, datas) => {
            if (err) {
                fs.readFile("./page/404.html", "uft8", (err, datas) => {
                    res.end(datas);
                    return
                })
            }else{
                // 转换为数组
                let userData = JSON.parse(datas)
                // query 就是从register那边传递过来的数据
                let newData = {
                    username: query.username,
                    password: query.password
                }
                // 判断用户名是否存在
                for(let i = 0; i < userData.length; i++){
                    if(userData[i].username == newData.username){
                        // 这里发送过去的1会在 register.js那边接收 然后弹出用户名已存在
                        res.end('1')
                        return
                    }
                }
                // 不存在直接存入userData中
                userData.push(newData)
                // 写入文件必须是string或者 buffer类型
                userData = JSON.stringify(userData)
                fs.writeFile('./data/data.json', userData, 'utf8', err => {
                    if(err){
                        res.end('3')
                    }else{
                        res.end('0')
                    }
                })
            }
        })
    } else if (pathname == '/login' && req.method == 'POST') {
        let content = ''
        // 用的是POST请求,所以不能用query接收数据
        req.on('data', chunk => {
            content += chunk 
            // 接收过来的是字符串形式，所以把它转换成对象格式         
            content = querystring.parse(content)
        })
        req.on('end', () => {
            fs.readFile('./data/data.json', 'utf8', (err, data) => {
                if (err) {
                    fs.readFile("./page/404.html", "uft8", (err, data) => {
                        res.end(data);
                        return
                    })
                }
                // json格式转换为数组
                data = JSON.parse(data)
                for(let i = 0; i < data.length; i++){
                    // console.log(data[i].username == content.username && data[i].password == content.password);
                    // 判断用户名密码是否正确
                    if(data[i].username == content.username && data[i].password == content.password){
                        res.end('0')
                        return
                    }
                }
                res.end('1')
            })
        })      
    }
})

server.listen(post, () => {
    console.log('服务已经启动');
});

以上就是node.js+ajax实现最基本的登录注册，如有bug,请纠正