nodejs 静态资源文件与登陆交互

Posted 2020-10-13 1点

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nodejs 静态资源文件与登陆交互相关的知识，希望对你有一定的参考价值。

server2.js

var express=require(\'express\');
var expressStatic=require(\'express-static\');

var server=express();
server.listen(63342);

//用户数据
var users={
  \'mike\': \'123456\',
  \'jack\': \'654321\',
  \'luci\': \'987987\'
};

server.get(\'/login\', function (req, res){
  var user=req.query[\'user\'];
  var pass=req.query[\'pass\'];

  if(users[user]==null){
    res.send({ok: false, msg: \'此用户不存在\'});
  }else{
    if(users[user]!=pass){
      res.send({ok: false, msg: \'密码错误\'});
    }else{
      res.send({ok: true, msg: \'成功\'});
    }
  }
});

server.use(expressStatic(\'./www\'));

a.html

<!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 oUser=document.getElementById(\'user\');
      var oPass=document.getElementById(\'pass\');
      var oBtn=document.getElementById(\'btn1\');

      oBtn.onclick=function (){
        ajax({
          url: \'/login\',
          data: {user: oUser.value, pass: oPass.value},
          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="btn1" />
  </body>
</html>

ajax.js

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

截图：

效果：

以上是关于nodejs 静态资源文件与登陆交互的主要内容，如果未能解决你的问题，请参考以下文章

nodejs请求静态资源404错误，后台需处理返回http请求的静态资源

nodejs 几行代码实现静态资源服务器

nodejs 构建本地web测试服务器以及解决访问静态资源的问题！

nodejs监听服务端口并且代理请求与静态资源

Springday05 SpringMVC访问静态资源操作请求域控制器方法返回值JSON数据交互RESTful风格文件上传异常处理拦截器