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

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后端服务器就算搭建成功

前端页面

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


<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>

你可能感兴趣的:(node)