注册登录的实现

最新推荐文章于 2024-05-06 14:03:35 发布

ㄗòs╃牸架

最新推荐文章于 2024-05-06 14:03:35 发布

阅读量403

点赞数

分类专栏： Node.js 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/122152438

版权

Node.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、

------------------------注册页面----------------------------------------------
<!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>注册</title>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    <h1>注册页面</h1>
    <p>
        用户名：<input type="text">
    </p>
    <p>
        密码：<input type="text">
    </p>
    <button>注册</button>
    <script>
        $(function(){
        //ajax 请求必须在同一个服务器端打开
            $("button").click(function(){
                $.ajax({
                    type:"get",    //设置发送的方式
                    url:"http://localhost:8088/reg",   //接口
                    data:{     //发送的数据     其中input标签中的name 应该加上属性 因为name的值为 获取对象的KEY值
                        username:$("input").eq(0).val(),  
                        upass:$("input").eq(1).val()
                    },
                    dataType:"JSON",  //获取的值得类型JSon
                    success(data){
                        if(data=='注册成功'){    //传送过来的数据是登录成功的话则打开login 网页
                            location.herf('login.html')
                        }
                        else{
                            console.log('登录失败')
                        }
                    }
                })
            })
        })
    </script>
</body>
</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>注册</title>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    <h1>登录页面</h1>
    <p>
        用户名：<input type="text">
    </p>
    <p>
        密码：<input type="text">
    </p>
    <button>登录</button>
    <script>
        $(function(){
            $("button").click(function(){  //登录点击事件
                $.ajax({
                    type:"post",  //登录时数据的发送方式
                    url:"http://localhost:8088/login",  //端口
                    data:{
                        username:$("input").eq(0).val(),
                        upass:$("input").eq(1).val()
                    },
                    dataType:"JSON",
                    success(data){
                        if(data=='登录成功'){    //传送过来的数据是登录成功的话则打开index 网页
                            location.herf('inxex.html')
                        }
                        else{
                            console.log('登录失败')
                        }
                    }
                })
            })
        })
    </script>
</body>
</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>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    <script>
        $(function(){
            $.ajax({
                    type:"get",
                    url:"http://localhost:8088/getusers",
                    data:{
                         //为空则表示发送过去的值为空
                    },
                    dataType:"JSON",
                    success(data){
                      console.log(data)
                    }
                })
        })
    </script>
</body>
</html>

const http = require("http")
const fs=require("fs")    //解读文件
const url = require("url")   //解析get 传输过来的值
const querystring=require("querystring")  //解析post传输过来的值
let users=[{id:1,username:"王一",upass:123}]
let server = http.createServer((req, res) => {
    if (req.method == "GET") {
        let { pathname, query } = url.parse(req.url, true)
        if (pathname.endsWith(".html")) {
            fs.readFile(`./www${pathname}`, (err, data) => {
                if (err) {
                    res.write("404")
                    res.end()
                } else {
                    res.write(data)
                    res.end()
                }
            })
        } else if (pathname == "/reg") {
            let result = users.some(item => item.username == query.username)
            if (result) {
                res.write(JSON.stringify({ message: "用户已存在" }))
                res.end()
            } else {
                let user = {
                    id: users.length + 1,
                    ...query
                }
                users.push(user)
                res.write(JSON.stringify({ message: "注册成功" }))
                res.end()
            }
        } else if (pathname == "/getusers") {
            res.write(JSON.stringify({ message: users }))
            res.end()
        }
    } else if (req.method == "POST") {
        if (req.url == "/login") {
            let arr = []
            req.on("data", data => {
                arr.push(data)
            })
            req.on("end", () => {
                let buffer = Buffer.concat(arr) //转化成一个Buffer对象
                let result = querystring.parse(buffer.toString())//将buffer对象转为js对象
                let user = users.filter(item => item.username == result.username)
                if (user.length > 0) {
                    if (user[0].upass == result.upass) {
                        res.write(JSON.stringify({ message: "登录成功" }))
                        res.end()
                    } else {
                        res.write(JSON.stringify({ message: "密码不正确" }))
                        res.end()
                    }
                } else {
                    res.write(JSON.stringify({ message: "用户名不存在" }))
                    res.end()
                }
            })
        }
    }
})
server.listen(8088)

ㄗòs╃牸架

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
注册登录的实现

一、引用socket.io 模块二、利用,on()监听事件 .emit()发送响应来完成------------------------注册页面----------------------------------------------<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="...
复制链接

扫一扫