页面加载分析

login.html EasyUI独有的结构模式和方法调用

主页不允许在iframe中

获取焦点样式  用户名和密码

回车登陆

login

 $.post("/login/login", param, function(data)；

 $('#ff').submit();
            location.href = "main";

ff:form的id,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tspace</title>
<link rel="icon" type="image/x-icon" href="/res/images/tspace/favicon.ico">
<link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="/res/css/common.css">
<link rel="stylesheet" type="text/css" href="/res/css/icon.css">

<script type="text/javascript">
   var basePath = '';
   var noAuthBtn = '';
   var authField = '';
</script>
<script type="text/javascript" src="/res/js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="/res/js/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/res/js/common.js"></script>
</head>
<body style="visibility: hidden;"><link rel="stylesheet" type="text/css" href="/res/css/login.css">
<script type="text/javascript">
if (self != top) {  //主页不允许在iframe中
   top.window.location.reload();
}
</script>
<div class="crm-register-bg">
  <div class="crm-register-form">
    <header class="crm-login1-header">
      <h1>欢迎登录tspace</h1>
    </header>
    <form id="ff" class="easyui-form" method="post" action="tspaceHead/main" data-options="novalidate:true">
    <div class="crm-register-body crm-login1-body">
        <div class="crm-register-input-warpper">
          <input type="text" class="crm-register-input easyui-validatebox" data-options="required:true,validType:'length[2,20]'" value="tspace" name="user_name" id="user_name" placeholder="请输入用户名" tabindex="1">
        </div>
        <div class="crm-register-input-warpper">
          <input type="password" class="crm-register-input easyui-validatebox" data-options="required:true" class="crm-register-input easyui-validatebox" value="123456" name="password" id="password" placeholder="请输入密码" tabindex="1" onfocus="">
        </div>
        <div class="crm-register-input-warpper" style="display: none;">
          <input type="text" class="crm-register-input " data-options="required:true,validType:'length[4,4]'" name="randomCode" id="randomCode" placeholder="请输入识别码，点击图片可更换" tabindex="3">
          <img id="codeImage" title="点击刷新验证码" src="login/randomCode" style="position: absolute; right: 20px; top: 4px; cursor: pointer;" onclick="this.src = 'login/randomCode?d=' + new Date().getTime();">
        </div>
    </div>
    <div class="crm-register-footer">
      <a href="javascript:login();" class="pg-btn-submit dinline-block " tabindex="3" act="login_btn">登     录</a>
    </div>
    </form>
    <p class="crm-loginfooter-info" style="">
      <a href="javascript: $('#user_name').val('readonly');" class="register_link" tabindex="6" act="reg_link">readonly</a>
      登陆，体验只读权限
    </p>
  </div>
</div>
<script type="text/javascript">
$(function() {
   //获取焦点样式  用户名和密码
   $("#ff :input").focus(function() {
      $(this).parent().addClass("actived");
   }).blur(function() {
      $(this).parent().removeClass("actived");
   });
});

//回车登陆
document.onkeydown = function() {
    if(event.keyCode==13) {
       login();
        return false;                               
    }
}

function login() {
   if($("#ff").form('enableValidation').form('validate')) {
      var param = {"user_name":$(":input[name='user_name']").val(), 
            "password":$(":input[name='password']").val(), 
            "randomCode":$(":input[name='randomCode']").val()
      }
      $.post("/login/login", param, function(data) {
         if(data.result == "success") {
            $('#ff').submit();
            location.href = "main";
         }else {
            if(data.data) {
               $("#randomCode").parent().show();
               $("#randomCode").validatebox({
                   required: true
               });
            }
            showWarnMsg(data.msg);
            $("#codeImage").click();
         }
      });
   }
}
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?96bb51056dd3bece3de02a351f072069";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>

点击登录后的操作。

post和后台进行数据交互，跳转页面main.html

嵌入了index.html.

//主页不允许在iframe中

//修改密码

    onclick='updatePassword()'>修改密码</div>

 onclick="location.href='${basePath}/login/logout'">退出</div>

 <div title="首页">
               <iframe src="${basePath}/tspace/index/index.html" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
  </div>

   <a id="fullScreen" href="###" class="easyui-linkbutton" plain="true" iconCls="glyphicon-fullscreen" onclick="fullScreen(this)"></a>

<script type="text/javascript" src="${basePath}/res/js/menu.js"></script>

<#include "/common/head.html"/>

<script type="text/javascript" src="${basePath}/res/js/menu.js"></script>
<script type="text/javascript">
if (self != top) {  //主页不允许在iframe中
   top.window.location.reload();
}

//修改密码
function updatePassword() {
   top.window.subPage.loadCurrDatagrid = function() {
      showMsg("密码修改成功！");
   }
   top.openWindow("修改密码", "user/updatePasswordPage", {size: '500x350'});
}
</script>
<style type="text/css">
.head{background: #09C; font-size: 14px; color: white; height: 50px; line-height: 50px; padding: 0px 8px; overflow: hidden;}
.head table{border-spacing: 0px; width: 100%;}
.head table,tr,td,th{padding: 0px;}
.head .rtool a{color: white;}
.head .rtool a.l-btn-plain:hover{color: black;}
.head .rtool a.l-btn-plain.m-btn-plain-active{color: black;}

.easyui-tabs .tabs{border-color: #A5C4EF;}
.easyui-tabs .tabs li a.tabs-inner{border-radius: 2px 2px 0 0;}

.tree-node {padding: 8px 0px;}
.tree-node-hover{background: #465467; color: white;}
.tree-node-selected{background: #0099cc; color: white;}
.tree-node .tree-title{font-size: 13px; font-weight: normal; color: #fff; }

.left{background-color: #424f63;}
.menu_head{height: 30px;line-height: 30px;background: #4e5f77;color: #aeb9c2;text-align: center;}
.layout-expand-north, .layout-expand-west{height: 0px;}

.tree-expanded{
    background: url('${basePath}/res/css/images/tree_icons_main.png') no-repeat -18px 0px;
}
.tree-collapsed {
    background: url('${basePath}/res/css/images/tree_icons_main.png') no-repeat 0px 0px;
}
.tree-icon {
    color: #BFBFBF;
    font-size: 12px;
    line-height: 18px;
}


</style>

<div id="layout" class="easyui-layout" data-options="fit:true, border:false">
   <div data-options="region:'north',border:false, collapsedSize:0" style="height:50px;">
      <div class="head"><table><tr>
         <td width="50%" style="font-size: 14px;">tspace 快速开发平台</td>
         <td width="50%" align="right" style="font-size: 12px;">
            <div class="easyui-panel rtool" data-options="border:false" style="text-align: right; background: #09C; color: white; margin-top: -1px;">
                 <a href="#" class="easyui-menubutton" data-options="menu:'#mm1'"><#if session['sysUser']??>${session['sysUser'].user_name}<#else>未登陆</#if></a>
             </div>
             <div id="mm1" style="width:150px;">
                 <div data-options="iconCls:'icon-edit'" onclick='updatePassword()'>修改密码</div>
                 <div class="menu-sep"></div>
                 <div data-options="iconCls:'icon-undo'" onclick="location.href='${basePath}/login/logout'">退出</div>
             </div>
         </td>
      </tr></table></div>
   </div>
   <div id="west" class="scrollbar" data-options="region:'west',split:true, border:false, collapsedSize:0" style="width:200px;background-color: #424f63;color:white">
      <div class="zsy_menu">
         <div class="menu_head">菜单导航</div>
           <ul id="menuTree"></ul>
       </div>
   </div>
   <div data-options="region:'center', border:false">
       <div id="mainTabs" style="height:250px">
           <div title="首页">
               <iframe src="${basePath}/tspace/index/index.html" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
           </div>
       </div>
   </div>
</div>

<div id="tabsMenu">
    <div data-options="iconCls:'glyphicon-refresh'" type="refresh" style="font-size: 12px;">刷新</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'glyphicon-remove'" type="close" style="font-size: 12px;">关闭</div>
    <div data-options="iconCls:''" type="closeOther">关闭其他</div>
    <div data-options="iconCls:''" type="closeAll">关闭所有</div>
</div>
<div id="tabTools" style="border: 0px; border-bottom: 1px solid #D3D3D3;">
   <a id="fullScreen" href="###" class="easyui-linkbutton" plain="true" iconCls="glyphicon-fullscreen" onclick="fullScreen(this)"></a>
</div>

<#include "/common/dialogWindow.html"/>
<#include "/common/foot.html"/>

index.html. ------主要功能：设置模块的隐藏和展示。

引入了common.js中的方法；

var subPage = {};   //用于弹窗，如增删改查页面
var popup = {};       //用于弹层

$(function() {
   //去掉加载页面时，遮挡的div
   $("body").css("visibility", "visible");    //设置元素的可见性
   
   //回车刷新
   if(!/login$/.test(location.href) && !/main/.test(location.href) && window.datagrid && $(".pagination-num:focus").length == 0) {
      document.onkeydown = function() {
         if(event.keyCode==13) {
            if(window.tspaceSearch) {
               tspaceSearch();
            }
            return true;                               
         }
      }
   }
   
   //列表页面，如果没有搜索条件，则隐藏搜索按钮
   if($("#tb .wrap_search .search_item").size() == 0) {
      $("#tb #searchBtnWrap").hide();
   }
});

function log(obj) {
   if(console) {
      console.log(obj);
   }
}

/**
 * 显示消息
 */
function showMsg(msg) {
   top.window.$.messager.show({
        title: '消息',
        msg:'<div style="padding-top: 10px;">' + msg||"消息内容！" + '</div>',
        timeout: 3000,
        showType: 'slide'
    });
}

/**
 * 显示警告消息
 */
function showWarnMsg(msg) {
   top.window.$.messager.show({
        title: '错误消息',
        msg: '<div class="messager-icon messager-warning"></div><div style="padding-top: 10px;">' + (msg || "消息内容！") + "</div>",
        timeout: 3000,
        showType: 'slide'
    });
}

/**
 * 确认消息
 */
function confirmMsg(msg, successFunc){
   top.window.$.messager.confirm('请确认', '<div style="padding-top: 10px;">' + (msg || 'Are you confirm this?') + "</div>", function(r){
      if(r) {
         if($.isFunction(successFunc)) {
            successFunc();
         }
      }
    });
}

/**
 * 打开弹出窗
 * @param title       标题
 * @param url     iframe地址
 * @param options  可选参数
 */
function openWindow(title, url, options) {
   options = options || {};
   if(options.size && options.size.indexOf("x") >= 0) {
      options.width = options.size.split("x")[0];
      options.height = options.size.split("x")[1];
   }
   $("#dialogWindow iframe").attr("src", url);
    $("#dialogWindow").window({
       closed:false,
       modal:true,
       title: title || '增加',
       width: options.width || 700,
       height: options.height || 450,
       onClose: function() {
          $("#dialogWindow iframe").removeAttr("src");
          //关闭popup
          try {
             $("#popupWindow").window("close");
          } catch(err) {
             //没有弹层
          }
          
       }
    });
    $("#dialogWindow").window("center");
}

/**
 * 打开一个弹层，用于选择一些信息（如城市等）
 * @param ipt  需要弹层的input或其它元素
 * @param title    弹层标题
 * @param url  页面ulr
 * @param options  其它参数（参考easyui-window）
 */
function openPopup(ipt, title, url, options) {
   ipt = $(ipt);
   popup.ipt = ipt;
   var os1 = $("#dialogWindow").offset();
   var os2 = ipt.offset();
   
   
   if(!url || popup.currUrl != url) {
      $("#popupWindow iframe").attr("src", url);
   }
   if(!options) {
      options = {};
   }
   options.title = title || "popup";
   options.top = os1.top + os2.top + ipt.outerHeight();
   options.left = os1.left + os2.left;
   options.onClose = function() {
      //回调关闭事件
      if(top.window.popup.close) {
         top.window.popup.close();
      }
   }
   //回调显示事件
   if(top.window.popup.show) {
      top.window.popup.show();
   }
    $("#popupWindow").window(options);
    popup.currUrl = url;
}

/**
 * 关闭弹层
 **/
function closePopup() {
   $("#popupWindow").window("close");
}

/**
 * 关闭弹出窗口
 */
function closeWindow() {
    $("#dialogWindow").window("close");
}

/**
 * 刷新页面
 */
function flushPage() {
   location.replace(location);
}

/**
 * 根据对象属性从集合中获得对象
 * @param list
 * @param attrName
 * @param attrValue
 * @returns    匹配到的第一个对象
 */
function getObjFromList(list, attrName, attrValue) {
   if($.isArray(list)) {
      for (var i = 0; i < list.length; i++) {
         var item = list[i];
         if(item[attrName] == attrValue) {
            return item;
         }
      }
   }
   return null;
}

function getInputValue(inputName) {
   var inputObj = $(":input[name='" + inputName + "']");
   var result = "";
   if(inputObj.attr("type") == "file") {
      result = $("#" + inputName).attr("data");  //如果文件，从文件的显示框架读取
   }else {
      inputObj.each(function(i, item) {
         result += "," + $(item).val();
      });
   }
   return result.replace(",", "");
}

/**
 * 如：当前页面为stockHistoryLog/listPage，则getCurrUrl(addPage)返回stockHistoryLog/addPage
 */
function getCurrUrl(method) {
   return window.location.pathname.replace(/\w+$/, method);
}

/**
 * 使combobox变为多选
 * @param inputIds 单个id或者数组
 */
function changeComboboxToMult(inputIds) {
   if(!$.isArray(inputIds)) {
      inputIds = [inputIds];
   }
   $.each(inputIds, function(i, item) {
      var iptObj = $("#" + item);
      iptObj. combobox({multiple:true});
   });
}


//扩展easyui-datagrid的edit模式
$.extend($.fn.datagrid.defaults.editors, {
   //支持checkbox
    checkbox: {
        init: function(container, options){
           var align = "center";
           if(options && options.align) {
              align = options.align;
           }
           container.attr("align", align);
            var input = $('<input type="checkbox" class="datagrid-editable-checkbox">').appendTo(container);
            return input;
        },
        destroy: function(target){
            $(target).remove();
        },
        getValue: function(target){
            return $(target).is(":checked") ? 1 : 0;
        },
        setValue: function(target, value){
           if(value == 1) {
              $(target).click();
           }
        },
        resize: function(target, width){
            //$(target)._outerWidth(width);
        }
    }
});

//全局ajax事件处理
$(window).ajaxError(function(handler){
   showWarnMsg("操作失败，服务器出现错误！");
});
$(window).ajaxSuccess(function(evt, request, settings){
   var s = request.responseText;
   if(s && s.indexOf('{"result":"fail"') != -1) {
      eval("result = " + s);
      showWarnMsg(result.msg);
   }
});

//删除页面没有权限的按钮
$(function() {
   if(noAuthBtn) {
      $.each(noAuthBtn.split(","), function(i, item) {
         $("." + item).remove();
      });
   }
});

/**
 * 处理页面没有【数据权限】的按钮
 */
function handleAuthDataRule() {
   if(authField) {
      $.each(authField.split(","), function(i, item) {
         //$("#" + item + ",#_start_" + item + ",#_end_" + item).textbox({disabled:true});
         $("#" + item + ",#_start_" + item + ",#_end_" + item).parents(".search_item:first").remove();
      });
   }
}

//extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: '两次输入不一致.'
    }
});

/**
 * 上传文件，用于easyui-filebox异步上传
 * @param fileIptId 文件输入框id
 */
function uploadFile(fileIptId) {
   if(window.FormData) {
      var fileObj = $(":input[name='" + fileIptId + "']");
      var files = fileObj.get(0).files;
      var imgObj = $("#" + fileIptId + "Img");
      
      $("#" + fileIptId).attr("data", "");
      if(files.length > 0) {
         if(files[0].size / 1024 / 1025 > 5) {
            showWarnMsg("上传图片不能大于5M");
            return;
         }
         var formData = new FormData();
         // 建立一个upload表单项，值为上传的文件
         formData.append('upload', fileObj.get(0).files[0]);
         var xhr = new XMLHttpRequest();
         xhr.open('POST', basePath + "/common/uploadFile");
         // 定义上传完成后的回调函数
         xhr.onload = function () {
            if (xhr.status === 200) {
               $("#" + fileIptId).attr("data", xhr.response);
               //显示图片
               imgObj.attr("src", basePath + xhr.response).parent().show();
            } else {
               showWarnMsg("上传图片失败")
            }
         }  
         xhr.send(formData);
      }else {
         //隐藏图片
         imgObj.attr("src", "").parent().hide();
      }
   }else {
      alert("该浏览器不支持文件上传，请用chrome或firefox浏览器~");
   }
}

/**
 * 格式化图片（用于datagrid）
 * @param url
 */
function formatterDgImage(url) {
   return url ? "<img class='dg_img' src='" + basePath + url + "' />" : "";
}

<script type="text/javascript" src="${basePath}/res/js/menu.js"></script>

menu.js的加载

$(function() {
   //加载菜单    左侧menu菜单
   loadTree();
   
   //选项卡
   window.mainTabs = $('#mainTabs').tabs({      
       fit : true,
       border : false,
       tools : "#tabTools",
       onContextMenu : function(e, title) {
           e.preventDefault();
           tabsMenu.menu('show', {
               left : e.pageX,
               top : e.pageY
           }).data('tabTitle', title);
       }
   });

   // 选项卡菜单
   window.tabsMenu = $('#tabsMenu').menu({
       onClick : function(item) {
           var curTabTitle = $(this).data('tabTitle');
           var type = $(item.target).attr('type');

           if (type === 'refresh') {
               var iframe = mainTabs.tabs('getSelected').panel('panel').find('iframe');
               iframe.attr("src", iframe.attr("src"));
               return;
           }

           if (type === 'close') {
               var t = mainTabs.tabs('getTab', curTabTitle);
               if (t.panel('options').closable) {
                   mainTabs.tabs('close', curTabTitle);
               }
               return;
           }

           var allTabs = mainTabs.tabs('tabs');
           var closeTabsTitle = [];

           $.each(allTabs, function() {
               var opt = $(this).panel('options');
               if (opt.closable && opt.title != curTabTitle
                       && type === 'closeOther') {
                   closeTabsTitle.push(opt.title);
               } else if (opt.closable && type === 'closeAll') {
                   closeTabsTitle.push(opt.title);
               }
           });

           for ( var i = 0; i < closeTabsTitle.length; i++) {
               mainTabs.tabs('close', closeTabsTitle[i]);
           }
       }
   });
});

/**
 * 加载菜单        
 */
function loadTree() {
   $.post(basePath + "/login/getMenu", function(data) {
      var menulist = [];
      $.each(data, function(i, item) {
         menulist.push({
            id: item.id,
            text: item.menu_name,
            attributes: basePath + item.menu_url, 
            parent_id: item.parent_id,
            iconCls: item.icon
         });
      });
      
      for(var i = 0; i < menulist.length; i++) {
         var children = menulist[i].children || [];
         for(var j = 0; j < menulist.length; j++) {
            if(menulist[j].parent_id == menulist[i].id) {
               children.push(menulist[j]);
            }
         }
         menulist[i].children = children;
      }
      
      var treeData = [];
      $.each(menulist, function(i, item) {
         if(item.parent_id == 0) {
            treeData.push(item);
         }
      });
      $("#menuTree").tree({
         data: treeData,
         onBeforeSelect: treeBeforeSelect, 
         onSelect: treeSelect
      });
   });
}

/**
 * 菜单事件
 */
function treeBeforeSelect(node) {
    if(node.children && node.children.length > 0) {
        if(node.state == "open") {
            $(this).tree("collapse", node.target);
        }else {
            $(this).tree("expand", node.target);
        }
        return false;
    } 
}
/**
 * 菜单事件
 */
function treeSelect(node) {
   addMainTab(node.text, node.attributes);
}

/**
 * 增加一个主窗口
 */
function addMainTab(text, url) {
   if(!mainTabs.tabs("exists", text)) {
      mainTabs.tabs('add',{
            title: text,
            content:'<iframe src="' + url + '" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>',
            closable:true
        });
    }else {
       mainTabs.tabs("select", text);
       //刷新
       mainTabs.tabs('getSelected').panel('panel').find('iframe').attr("src", url)
    }
}

/**
 * 全屏
 */
function fullScreen() {
   if($("#fullScreen").find(".glyphicon-screenshot").length > 0) {
      $("#layout").layout('expand', 'west').layout('expand', 'north');
      $("#fullScreen").find(".l-btn-icon").addClass("glyphicon-fullscreen").removeClass("glyphicon-screenshot");
   }else {
      $("#layout").layout('collapse', 'north').layout('collapse', 'west');
      $("#fullScreen").find(".l-btn-icon").addClass("glyphicon-screenshot").removeClass("glyphicon-fullscreen");
      $(".layout-expand").hide();
   }
   
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tspace</title>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; line-height: 30px; color: #2f8ec7;}
h2, .color1 {color: orange;}
.zhichi {border: 2px solid orange; padding: 2px; font-size: 22px; width: 30px; height: 30px; line-height: 30px; border-radius: 30px; text-align: center; cursor: pointer; position: fixed; bottom: 50px; right: 50px;}
</style>
</head>
<body>
   <p>tspace是一个通用的后台管理系统，有完善的用户、菜单和权限管理。且提供了一套快速的表单管理的开发方案。<br>简单业务可以通过 [表单配置] 快速生成，特定业务通过代码生成，完成具体业务。tspace能够大大提高开发效率，节省更多时间去陪家人朋友，做自己喜欢的事情。</p>

   <div>
      <h2>tspace的特点</h2>
      <ol>
         <li>强大的表单配置功能，无需编写代码即可生成表单管理页面，快速搞定简单业务。</li>
         <li>简单易用的代码生成，能够把通过表单配置生成的页面生成代码，提搞特定业务开发效率。</li>
         <li>完善的权限控制，能够控制到菜单、按钮和数据权限，做到这些只需要在页面上进行配置。</li>
         <li>采用jfinal+easyui开发，没有其它繁杂技术，项目简洁明了，方便二次开发。</li>
         <li>ui布局整洁精致，支持chrome，firefox，safari，ie8+ 等常用浏览器</li>
      </ol>
      <div>　　<span class="color1">QQ群交流群：</span>497019074</div>
      <div>　　<span class="color1">项目GIT地址：</span>https://git.oschina.net/515097842/tspace</div>
   </div>
   
   <div id="block_zczz" style="display: none;">
      <h2>支持作者</h2>
      <div>项目的发展离不开你的支持，赞助作者买服务器或加个餐吧。</div>
      <img src="../../res/images/tspace/wxzfb.png" width="400px;" />
      <div>微信ID：z2872332</div>
   </div>
   
   <div class="zhichi" onclick="zhichi()">+</div>
   
<script type="text/javascript">
function zhichi() {
   var d = document.getElementById("block_zczz");
   if(d.style.display == "none") {
      d.style.display = "block";
   }else {
      d.style.display = "none";
   }
}
</script>  
</body>
</html>

猜你喜欢