node + jquery+ajax实现简单的注册与登录

最新推荐文章于 2024-05-15 23:46:08 发布

chensadasda

最新推荐文章于 2024-05-15 23:46:08 发布

阅读量3.6k

点赞数 1

分类专栏： node

本文链接：https://blog.csdn.net/colorfulqq/article/details/79850523

版权

node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

node+ajax实现post与get两种方式

才开始学习node，花了两天时间来实现一个比较简单的用户注册和登录，前端与后台的交互是利用的ajax来实现后台与前端的交互，但是由于是用的ajax来进行交互，在本地服务器来实现这个功能的时候会有一个关于跨域的小问题，现在我还去解决这个问题。所以我们在打开user.html这个文件的时候，我们不能用文件的地址来打开，我们应该先用node开启服务器，然后通过localhost这个方式来打开这个页面。

node

1.node的下载和安装(由于主要是讲解这个简单应用的实现，而不是怎么安装和使用node，我相信你们肯定已经安装好node才会来用他做一些简单的尝试)

2.node的模块

const http = require('http')
const fs = require('fs')
const querystring = require('querystring')
const urlLib = require('url')

这里我们引用了http，fs， querystring， url四个模块,每个模块的作用大家可以到node官网去看http://nodejs.cn/api/

3.一个简单服务器的搭建

var http = require('http')
//引入http

http.createServer(function (request, response) {

    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'})

    // 发送响应数据 "Hello World"
    response.end('Hello World\n')
}).listen(8888)

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/')

4.由于是简单的功能，所以我没用数据库来保存和调用用户的信息,ps:是因为现在还不会数据库，我用是一个数组来保存和调用用户的信息。有一个坏处是当我重启我的服务器后，我的数据会丢失。

5.接口代码

var server = http.createServer(function(req, res) {
    // 解析数据
    var str = ''
    req.on('data', function(data) {
        str += data
    })

    req.on('end', function() {
        var obj = urlLib.parse(req.url, true)
        const url = obj.pathname
        const GET = obj.query
        const POST = querystring.parse(str) 

        // 区分
        if(url == '/user') { // 接口
            switch(GET.act) {
                case 'reg':

                    // 1.检查用户名
                    // 2.插入users
                    if(users[GET.user]) {
                        res.write('{"ok": false, "msg": "此用户已存在"}')
                    } else {
                        users[GET.user] = GET.pass
                        res.write('{"ok": true, "msg": "注册成功！"}')
                    }
                    break;

                case 'login':

                    if(users[GET.user] == null) {
                        res.write('{"ok": false, "msg": "此用户不存在"}')
                    } else if(users[GET.user] != GET.pass){
                        res.write('{"ok": false, "msg": "用户名或密码有误"}')
                    } else {
                        res.write('{"ok": true, "msg": "登录成功"}')
                    }
                    break
                default:
                    res.write('{"ok": false, "msg": "未知的act"}')
            }
            res.end()
        } else {
            // 读取文件
            var file_name = './www' + url
            fs.readFile(file_name, function(err, data) {
                if(err) {
                    res.write('404')
                } else {
                    res.write(data)
                }
                res.end()
            })
        }
    })
})

node后端服务器就算搭建成功

前端页面

由于这个前端页面比较简单，就不详述，直接贴代码了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        $("#login_btn").click(function() {
            $.ajax({
                type: 'get',
                url: '/user',
                data: {
                    act: 'login',
                    user:　$("#user").val(),
                    pass:　$("#pass").val(),
                },
                success: function(str) {
                    var json = eval('('+str+')');

                    if(json.ok) {
                        alert('登录成功')
                        console.log(json)
                    } else {
                        alert('登录失败' + json.msg)
                        console.log(json)
                    }
                },
                error: function() {
                    alert('错误！')
                }
            });
        });


        $("#reg_btn").click(function() {
            $.ajax({
                type: 'get',
                url: '/user',
                data: {
                    act: 'reg',
                    user:　$("#user").val(),
                    pass:　$("#pass").val(),
                },
                success: function(str) {
                    var json = eval('('+str+')')

                    if(json.ok) {
                        alert('注册成功')
                        console.log(json)
                    } else {
                        alert('注册失败' + json.msg)
                        console.log(json)
                    }

                },
                error: function() {
                    alert('错误！')
                }
            });
        });
    }
</script>
<body>  
    用户：<input type="text" id="user"><br>
    密码：<input type="password" id="pass"><br>
    <input type="button" value="注册" id="reg_btn">
    <input type="button" value="登录" id="login_btn">
</body>
</html>

chensadasda

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
node + jquery+ajax实现简单的注册与登录

node+ajax实现post与get两种方式才开始学习node，花了两天时间来实现一个比较简单的用户注册和登录，前端与后台的交互是利用的ajax来实现后台与前端的交互，但是由于是用的ajax来进行交互，在本地服务器来实现这个功能的时候会有一个关于跨域的小问题，现在我还去解决这个问题。所以我们在打开user.html这个文件的时候，我们不能用文件的地址来打开，我们应该先用node开启服务器，然...
复制链接

扫一扫

专栏目录