Node.js 数据交互 模拟用户注册和登录

  • 这里需要用到几个文件,其目录结构如下所示:
  • pic
    目录结构
  • 规定注册接口为 /user?act=reg&user=username&pass=password
  • 规定登录接口为 /user?act=login&user=username&pass=password
  • server.js 文件如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    const http = require('http'); //引入http模块
    const fs = require('fs'); //引入fs模块
    const querystring = require('querystring'); //引入querystring模块
    const urlLib = require('url'); //引入url模块
    const users = {};//模拟用户注册存储内存如:{user:"zhangsan",pass:"123456"}

    const server = http.createServer(function(req,res) {
    const str = '';
    req.on('data',function(data) {
    str += data;
    });
    req.on('end',function() {
    var obj = urlLib.parse(req.url,true);

    const url = obj.pathname;
    const getData = obj.query;
    const postData = querystring.parse(str);

    //区分接口 和 文件

    if (url === '/user') {
    switch(getData.act) {
    case 'reg':
    //1.检查用户名是否已经存在
    //2.插入users 保存数据
    if (users[getData.user]) {
    res.write('{"ok":false,"msg":"此用户已经存在"}');
    } else {
    users[getData.user] = getData.pass;
    res.write('{"ok":true,"msg":"注册成功"}');
    }
    break;
    case 'login':
    //1.检查用户是否存在
    //2.检查用户密码是否正确
    if (users[getData.user] == null) {
    res.write('{"ok":false,"msg":"此用户不存在"}');
    } else if (users[getData.user] != getData.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,(err,data)=>{
    if (err) {
    res.write('404');
    } else {
    res.write(data);
    }
    res.end();
    });
    }
    });
    });
    server.listen(3000);
  • index.html 文件如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></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 (){
    // alert('123');
    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('注册成功:'+json.msg);
    }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>
  • ajax.js 文件如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    function json2url(json){
    var arr=[];
    for(var name in json){
    arr.push(name+'='+json[name]);
    }
    return arr.join('&');
    }

    function ajax(json){
    json=json || {};
    if(!json.url)return;
    json.data=json.data || {};
    json.type=json.type || 'get';

    var timer=null;

    if(window.XMLHttpRequest){
    var oAjax=new XMLHttpRequest();
    }else{
    var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
    }

    switch(json.type){
    case 'get':
    oAjax.open('GET',json.url+'?'+json2url(json.data),true);
    oAjax.send();
    break;
    case 'post':
    oAjax.open('POST',json.url,true);
    oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    oAjax.send(json2url(json.data));
    break;
    }

    oAjax.onreadystatechange=function(){
    if(oAjax.readyState==4){
    clearTimeout(timer);
    if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
    json.success && json.success(oAjax.responseText);
    }else{
    json.error && json.error(oAjax.status);
    }
    }
    };
    }
  • 开启服务器,如下为演示效果:

  • pic
    演示