APICloud如何实现登录功能

「爱情、让人受尽委屈。」 2022-03-10 04:14 334阅读 0赞

要求：

1、把表单里面的用户名和密码与云服务器的数据库表里面的信息做比对

2、如果登录成功则跳转到另一个页面，另一个页面接收用户信息

3、不成功就返回提示信息

--------------------

Html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css3炫酷登录页</title>
      <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
      <meta name="author" content="Vincent Garreau" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      
      <script src="../script/jquery-3.3.1.min.js"></script>
          <script src="../script/api.js"></script>
            <script src="../script/ulogin.js"></script>
      
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>
        <link rel="stylesheet" media="screen" href="../css/jstyle.css">
    </head>
    <body>
    <div id="particles-js" style="background-image:../image/bg.jpg">
    
    
      <div id="form">
    <table id="tab">
      <tr><td>登录</td></tr>
    <tr><td><img src="../res/img/yhm.png"  class="icon"/> <input type="text"  id="user" placeholder="请输入用户名"></td></tr>
    <tr><td><img src="../res/img/mm.png" class="icon"/> <input type="password"  id="pass"  placeholder=""></td></tr>
    <tr><td rowspan="2"><input type="button" class="button" value="进入运筹app" onclick="los(user.value,pass.value)"></td></tr>
    </table>
    <span class="others"><a href="regeit.html">注册</a></span><span class="others"><a href="forgetpass.html">忘记密码</a></span>
    <span class="others">微信登录</span><span class="others">qq登录</span>
      </div>
       
    
    <script src="../script/particles.min.js"></script>
    <script src="../script/app.js"></script>
    </body>
    </html>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

js代码如下

//登录
    function los(user,pass) {
        var model = api.require('model');
        var query = api.require('query');
         model.config({
            appId: 'A6006471302025',
            appKey: '41DEF0A4-9F9B-B578-0ED4-A63ACBF338E8',
            host: 'https://d.apicloud.com'
                   });
        // 查询数据
        query.createQuery({
          }, function(ret, err) {
              //条件查询
              query.whereEqual({
                qid:ret.qid,
                column:'name',
                value:user
              });
              query.whereEqual({
                qid:ret.qid,
                column:'password',
                value:pass
              });
              if (ret && ret.qid) {
                  model.findAll({
                      class : 'userinfo',
                      qid : ret.qid
                  }, function(ret, err) {
                    if(ret.length>0){
                      //开启新的窗口
      window.location.href = 'adm_login.html?name='+user+'&pass='+pass;
              //开启新的窗口
                      }else{
                        // 给出提示
                        api.toast({
                                      msg: '账号或密码错误，请重新输入',
                                      duration: 3000,
                                      location: 'bottom'
                                  });
      // 给出提示
                         }
                    });
            }//if
          });
          //funciton
    }

另一个页面

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>后台管理员页面</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <link rel="stylesheet" type="text/css" href="../css/style.css"/>
        <style>
            .empty{ text-align: center; padding: 120px 0; }
        </style>
    </head>
    <body>
    <div class="empty">后台管理页面</div>
    <h1 id="lon"></h1
    </body>
    <script type="text/javascript">
    //获取url中"?"符后的字串    如?name=tjn&pass=123456
      var url = window.location.search;
      //根据&来分隔"?"符后的字串
      var arr=url.split("&");
      //我要取得是第一个参数所以用arr[0]表示?name=tjn  arr[1]  pass=123456
      //我要去?name=tjn的值，也就是tjn;所以采取"="来分割，获取第二个值就是tjn
      var name=arr[0].split("=")[1];
      //把值赋值到html标签里面
      document.getElementById("lon").innerHTML=name;
      alert(name);
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220310/9e2fe8b5af654f5193be69f3c99b231b.png