天天看点
返回

nodejs实现用户登录注册---前台通过ajax请求数据

1.通过http模块创建服务器，并监听端口8080

const http = require('http');

var server = http.createServer(function (req, res){});

server.listen(8080);

2.解析数据

通过‘querystring’和'url'模块解析数据

req.on('data', function (data){});-----接收到一段数据

req.on('end', function (){});------接收到全部数据

const querystring = require('querystring');
const urlLib = require('url');

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

3.读取文件

通过‘fs’模块读取文件

var file_name = './www' + url;
fs.readFile(file_name, function (err, data) {
   if (err) {
         res.write('404');
    } else {
          res.write(data);
    }
          res.end();
 });

4.ajax参数

url: 发送请求的地址

data:发送到服务器的数据

type：请求的类型

success：请求成功时执行的回调函数

error:请求失败时执行的回调函数

ajax({
          url: '/user',
          data: { act: 'reg', user: oTxtUser.value, pass: oTxtPass.value },
          type: 'get',
          success: function (str) {
            var json = eval('(' + str + ')');

            if (json.ok) {
              alert('注册成功');
            } else {
              alert('注册失败：' + json.msg);
            }
          },
          error: function () {
            alert('通信错误');
          }
        });

完整代码：

1.后台代码：server.js

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

//用户信息
var users = {
    'leimiao': '123'
};

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.检查用户名是否已经有了
                    if (users[GET.user]) {
                        res.write('{"ok": false, "msg": "此用户已存在"}');
                    } else {
                        //2.插入users
                        users[GET.user] = GET.pass;
                        res.write('{"ok": true, "msg": "注册成功"}');
                    }
                    break;
                case 'login':
                    //1.检查用户是否存在
                    if (users[GET.user] == null) {
                        res.write('{"ok": false, "msg": "此用户不存在"}');
                        //2.检查用户密码
                    } 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();
            });
        }
    });
});

server.listen(8080);

2.前端页面代码---user.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>11</title>
  <script src="ajax.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var oTxtUser = document.getElementById('user');
      var oTxtPass = document.getElementById('pass');
      var oBtnReg = document.getElementById('reg_btn');
      var oBtnLogin = document.getElementById('login_btn');

      oBtnLogin.onclick = function () {
        ajax({
          url: '/user',
          data: { act: 'login', user: oTxtUser.value, pass: oTxtPass.value },
          type: 'get',
          success: function (str) {
            var json = eval('(' + str + ')');

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

      oBtnReg.onclick = function () {
        ajax({
          url: '/user',
          data: { act: 'reg', user: oTxtUser.value, pass: oTxtPass.value },
          type: 'get',
          success: function (str) {
            var json = eval('(' + str + ')');

            if (json.ok) {
              alert('注册成功');
            } else {
              alert('注册失败：' + json.msg);
            }
          },
          error: function () {
            alert('通信错误');
          }
        });
      };
    };
  </script>
</head>

<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.js ajax 登录注册
上一篇: 一、简单使用二、 并行循环的中断和跳出三、并行循环中为数组/集合添加项四、返回集合运算结果/含有局部变量的并行循环五、PLinq（Linq的并行计算）并行计算部分
下一篇: 几个重要的属性实现思路代码实现

继续阅读