dojo------做个简单的登录

2019独角兽企业重金招聘Python工程师标准>>>

1. 引入dojo

   1. 引入css:
      

      <link rel="stylesheet" type="text/css" href="${ctx}/static/js/dijit/themes/claro/claro.css">

   2. 引入js:

      <script type="text/javascript" src="${ctx}/static/js/dojo/dojo.js"></script>

2. 页面代码编写

   <div data-dojo-type="dijit/form/Form" id="loginForm"
        data-dojo-id="loginForm"
        style="padding-top: 200px; padding-left: 200px;">
       <table style="border: 1px solid #9f9f9f;" cellspacing="10">
           <tr>
               <td align="right"><label for="loginName">用户名:</label></td>
               <td><input type="text" id="loginName" name="loginName" value="admin"
                          required="true" data-dojo-type="dijit/form/ValidationTextBox"/></td>
           </tr>
           <tr>
               <td align="right"><label for="password">密码:</label></td>
               <td><input type="password" id="password" required="true" value="admin"
                          name="password" data-dojo-type="dijit/form/ValidationTextBox"/></td>
           </tr>
           <tr>
               <td colspan="2" align="right">
                   <button data-dojo-type="dojox/form/BusyButton" id="btn_login"
                           data-dojo-id="btn_login"
                           data-dojo-props="useIcon:true,busyLabel:'正在登录......'"
                           type="button" name="submitButton">登录
                   </button>
               </td>
           </tr>
       </table>
   </div>

3. js代码编写

   require([
      "dojo/parser",
      "dojo/dom",
      "dojo/on",
      "dojo/request",
      "dojo/json",
      "dijit/form/Form",
      "dojo/dom-form",
      'dijit/Dialog',
      "dojox/form/BusyButton",
      "dijit/form/ValidationTextBox",
      "dojo/domReady!"],function(parser,dom,on,request,JSON,form,domForm,Dialog){
      parser.parse();
      on(dom.byId("btn_login"), "click", function(){
         request.post(App.ctx+"/login",{
            data: domForm.toObject("loginForm"),
            handleAs:"json"
         }).then(
            function(result){
                   btn_login.cancel();
               if(result.success){
                  location.href=App.ctx+"/index";
               }else{
                  new Dialog({
                     title: '登录失败',
                     content: result.message,
                     style: "width: 300px"
                  }).show();
               }
            },
            function(error){
                   btn_login.cancel();
            }
         );
      });
   });

4. 页面长啥样

   有点简陋，dojo文档在这里，表示不翻墙打开国外网站有点捉急。。，github有api，可以clone下来，用node.js运行。

   
   

转载于:https://my.oschina.net/luoyezhiqiu/blog/493684