Appcan與後臺數據庫表交互，註冊登陸完整頁面

時間 2019-11-10

原文原文鏈接

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="first_content/css/main.css">
    </head>
    <body class="um-vp bc-bg" ontouchstart>
        <div class="ub-f1 tx-l ub ub-ver c-wh">
            <div class="umh1"></div>
            <form method="get" action="http://www.appcan.cn">
                <div class="umar-a uba bc-border">
                    <div class="ub ub-ac ubb umh5 bc-border ">
                        <div class=" uinput ub ub-f1">
                            <div class="uinn fa fa-user sc-text"></div>
                            <input placeholder="手機/郵箱/用戶名" type="text" class="ub-f1" id="loginName">
                        </div>
                    </div>
                    <div class="ub ub-ac umh5 bc-border ">
                        <div class=" uinput ub ub-f1">
                            <div class="uinn fa fa-lock sc-text"></div>
                            <input placeholder="密碼" type="password" class="umw4 ub-f1" id="password">

                        </div>
                    </div>
                </div>
                <div class="uinn">
                    <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1"  id="submit">
                        登陸
                    </div>
                </div>
                <button type="submit"class="uinvisible"></button>
            </form>

            <div class="umar-a ub t-blu">
                <div class="ub-f1 ulev-1 uinn3" onclick="text_zhuce()">
                    當即註冊
                </div>
                <div class="ulev-1 uinn3">
                    忘記密碼
                </div>
            </div>
            <div class="uinn ub ub-ac ub-pc">
                <div class="resqq ub-img umhw2 umar-a"></div>
                <div class="resxinlang ub-img umhw2 umar-a"></div>
                <div class="resren ub-img umhw2 umar-a"></div>
            </div>
        </div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/main.js"></script>
        <script src="js/config.js"></script>
    </body>
    <script>
     
        appcan.ready(function() {
            appcan.initBounce();
        })
        appcan.button("#submit", "ani-act", function() {
            
            var loginName=$('#loginName').val();
            var password = $('#password').val();
            
            if(loginName=="")
            {
           
              $toast('用戶名不能爲空',2000);
              return;
            }
            if(password=="")
            {
              $toast('密碼不正確',2000);
              return;
            }
             alert(loginName+"==="+password);
              //alert(serverURL);
              ajax({
                url : "userAjax!login",
                data : {
                    name : loginName,
                    password : password
                },
                dataType : "json",
                successx : function(data) {
                  
                  alert(data.result);
                  if(data.result=="userNull"){
                      $toast('查無此用戶',2000)
                  }
                  if(data.result=="passwordError"){
                      $toast('密碼錯誤',2000)
                  }
                  if(data.result=="loginSuccess"){
                     openNewWin("zhuxiao","zhuxiao.html");
                  }  
                },
                error : function(xhr, type) {
                    $toast("網絡鏈接超時", 3500);
                }
            });
        })
        function text_zhuce() {
            openNewWin("zhuce","zhuce.html")
        }

    </script>
</html>

first_content.html

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="zhuce_content/css/main.css">
    </head>
    <body class="um-vp bc-bg" ontouchstart>
        <div class="c-wh uinnh5">
            <div class="uba uc-a1 bc-border">
                <div class="ub uinn5 bc-border ubb">
                    <div class="ub ub-ac uw-reg ulev-app1">
                        登陸名稱
                    </div>
                    <div class="ub ub-ac ub-f1">
                        <div class="uinput ub ub-f1">
                            <input placeholder="請輸入您的登陸名" type="text" class="ub-f1" id="loginName">
                        </div>
                    </div>
                </div>
                <div class="ub uinn5 b-d8 ubb">
                    <div class="ub ub-ac uw-reg ulev-app1" >
                        設置密碼
                    </div>
                    <div class="ub ub-ac ub-f1">
                        <div class="uinput ub ub-f1" >
                            <input placeholder="輸入6~20位字符" type="password" class="ub-f1" id="password">
                        </div>
                    </div>
                </div>
                <div class="ub uinn5">
                    <div class="ub ub-ac uw-reg ulev-app1">
                        確認密碼
                    </div>
                    <div class="ub ub-ac  ub-f1">
                        <div class="uinput ub ub-f1">
                            <input placeholder="再次輸入設置的密碼" type="password" class="ub-f1" id="password_chack">
                        </div>
                    </div>
                </div>
            </div>
            <div class="ub ub-pe uinn-a6 ulev-4">
                    <div class="sc-text">
                        我贊成
                    </div>
                    <div class="sc-text-active">
                        用戶服務協議
                    </div>
                </div>
            <div class="uinn-at1">
                <div class="btn ub ub-ac bc-text-head ub-pc bc-btn"  id="btn2" >
                    註冊
                </div>
            </div>
        </div>
    </body>
    <script src="js/appcan.js"></script>
    <script src="js/appcan.control.js"></script>
    <script src="js/appcan.listview.js"></script>
    <script src="js/main.js"></script>
    <script src="js/config.js"></script>
    </body>
    <script>
        appcan.ready(function() {
            appcan.initBounce();
        })
          appcan.button("#btn2","ani-act",function(){
            
            var loginName = $('#loginName').val();
            var password = $('#password').val();
            var password_chack=$('#password_chack').val();
            
            if(loginName==""){
                $toast("請輸入登陸名","3000")
                return;
            }
            if(password==""){
                $toast("請輸入登陸密碼","3000")
                return;
            }
            if(password!=""&password.length<6){
                $toast("密碼至少六位","3000")
                return;
            }
            if(password_chack==""){
                $toast("請再次輸入密碼","3000")
                return;
            }
            if(password!=password_chack){
                $toast("兩次密碼不一致","3000")
                return;
            }
              alert(serverURL);
                alert(loginName+"==="+password)
                ajax({
                url : "userAjax!add_model",
                data : {
                    loginName : loginName,
                    password : password
                },
                dataType : "json",
                successx : function(data) {
                  alert(111);
                },
                error : function(xhr, type) {
                    $toast("網絡鏈接超時", 3500); 
                }
     
  
                 });
             }
              
        );
    </script>
</html>

zhuce_content.html

測試地址：css

http://localhost:8080/HelloWorld/userAjax!login?name=123&password=123456html

JAVAEEajax

/**
     * 登陸
     */
    @SuppressWarnings("unchecked")
    public String login(){
        User loginUser = userService.getByName(name);
        if(loginUser == null){
            result = "userNull";
        }else if(!(loginUser.getPassword().equals(password))){
            result = "passwordError";
        }else{
            //把用戶存入session
            session.put("user", loginUser);
            
            List<Module> modules = new ArrayList<Module>();
            
            //遍歷session用戶的全部角色
            for(Iterator<Role> roles = loginUser.getRoles().iterator();roles.hasNext();){
                Role role = roles.next();
                List<Module> modules1 = moduleSerivce.getModulesByRoleId(role.getId());
                modules.addAll(modules1);
            }
            
            modules =(List<Module>)new ListUtil().removeRepeat(modules);
            
            //把用戶的模塊存入session
            session.put("modules", modules);
            result = "loginSuccess";
        }

        return SUCCESS;
    }