基于AdminLTE的开发框架-AdminEAP

爱音乐的程序员小新人 05-27 6498

前言：

现在兄弟们对“jqueryiframe关闭”大概比较讲究，小伙伴们都想要剖析一些“jqueryiframe关闭”的相关内容。那么小编也在网上网罗了一些关于“jqueryiframe关闭””的相关文章，希望兄弟们能喜欢，咱们一起来了解一下吧！

最近在研究使用AdminLTE框架化，本文讲解使用sitemesh3使AdminLTE框架化的过程。系统架构为：SpringMVC+Spring+Hibernate+Maven+FreeMarker+Sitemesh

上图为AdminEAP首页展示目前所包含的系统功能，包含了组件集成、CURD增删改查demo、系统工具、工作流、系统权限与安全、Github源码与License、联系我们，提供了前端、后端整体解决方案，使得web开发更简单。

代码已开源，托管在github上，

AdminEAP demo官网：

用户列表：

用户编辑：

字典管理：

图标选择器：

回到正题，下面详细讲解sitemesh3在这个项目上的使用：（sitemesh3的配置可参考本人上篇博客）

1、Maven中引入Sitemesh3

<dependency> <groupId>org.sitemesh</groupId> <artifactId>sitemesh</artifactId> <version>3.0.0</version></dependency>

2、web.xml中配置sitemesh3过滤器

<filter> <filter-name>sitemesh</filter-name> <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class></filter><filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern></filter-mapping>

3、在web.xml的同级目录配置sitemesh3.xml

<?xml version="1.0" encoding="UTF-8"?><sitemesh> <mapping path="/*" decorator="/decorator"></mapping> <mapping path="/*/*edit" exclue="true"></mapping> <mapping path="/resources/*" exclue="true" /> <mapping path="/*/nodecorator/*" exclue="true"/> <mapping path="/nodecorator/*" exclue="true"/>   <content-processor> <tag-rule-bundle class="com.cnpc.framework.tags.CSSTagRuleBundle" /> <tag-rule-bundle class="com.cnpc.framework.tags.ScriptTagRuleBundle" /> </content-processor> </sitemesh>

上面定义了两个自定义标签，主要是将子页面的样式和脚本渲染到装饰页面

CSSTagRuleBundle.java

package com.cnpc.framework.tags; import org.sitemesh.SiteMeshContext;import org.sitemesh.content.ContentProperty;import org.sitemesh.content.tagrules.TagRuleBundle;import org.sitemesh.content.tagrules.html.ExportTagToContentRule;import org.sitemesh.tagprocessor.State; public class CSSTagRuleBundle implements TagRuleBundle { @Override public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { defaultState.addRule("myCSS", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("myCSS"), false)); } @Override public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { // TODO Auto-generated method stub } }

ScriptTagRuleBundle.java

package com.cnpc.framework.tags; import org.sitemesh.SiteMeshContext;import org.sitemesh.content.ContentProperty;import org.sitemesh.content.tagrules.TagRuleBundle;import org.sitemesh.content.tagrules.html.ExportTagToContentRule;import org.sitemesh.tagprocessor.State; public class ScriptTagRuleBundle implements TagRuleBundle { @Override public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { defaultState.addRule("myScript", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("myScript"), false)); } @Override public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { // TODO Auto-generated method stub } }

4、其中/decorator跳转的路径

@RequestMapping(method = RequestMethod.GET, value = "/decorator") public String decorator(HttpServletRequest request) { return "decorator"; }

decorator.html即为“母版页”，其代码如下，请主要下面<sitemesh:write 部分

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE | <span style="color:#FF0000;"> <sitemesh:write property='title' /></span></title>  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  <link rel="shortcut icon" type="image/ico" href="" media="screen">   <link rel="stylesheet" href="${basePath}/resources/adminlte/bootstrap/css/bootstrap.min.css">  <link rel="stylesheet" href="${basePath}/resources/adminlte/css/font-awesome.min.css">  <link rel="stylesheet" href="${basePath}/resources/adminlte/css/ionicons.min.css">  <link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/AdminLTE.min.css">  <link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/skins/_all-skins.min.css">     <span style="color:#FF0000;"> <sitemesh:write property='myCSS' /></span> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header">  <a href="${basePath}/main" class="logo">  <span class="logo-mini"> <b>A</b>LT</span>  <span class="logo-lg"> <b>Admin</b>LTE</span> </a>  <nav class="navbar navbar-static-top">  </nav> </header>  <aside class="main-sidebar"> </aside>  <div class="content-wrapper"> <sitemesh:write property='body' /></div>  <footer class="main-footer">  </footer>  <aside class="control-sidebar control-sidebar-dark">  </aside>   <div class="control-sidebar-bg"></div> </div>  <script type="text/javascript">var basePath = "${basePath}"; //给外部js文件传递路径参数 </script>  <script src="${basePath}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>  <script src="${basePath}/resources/adminlte/bootstrap/js/bootstrap.min.js"></script>  <script src="${basePath}/resources/adminlte/plugins/fastclick/fastclick.js"></script>  <script src="${basePath}/resources/adminlte/dist/js/app.min.js"></script>   <script src="${basePath}/resources/adminlte/dist/js/demo.js"></script> <script type="text/javascript" src="${basePath}/resources/common/js/base.js"></script> <script type="text/javascript" src="${basePath}/resources/common/js/base-modal.js"></script>  <sitemesh:write property='myScript' /></body> </html>

5、一个“子页面”的配置，如用户管理列表界面 user_list.html

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>用户列表</title><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <myCSS><link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/datatables/dataTables.bootstrap.css"><link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/datatables/select.bootstrap.min.css"><link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/bootstrap-validator/dist/css/bootstrap-validator.css"/><link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/iCheck/all.css"><link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/datepicker/datepicker3.css"></myCSS> </head><body class="hold-transition skin-blue sidebar-mini">  <section class="content-header"> <h1> 用户管理 <small>列表</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li> <li><a href="#">系统管理</a></li> <li class="active">用户管理</li> </ol> </section>  <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box">  <div class="dataTables_filter" id="searchDiv"> <input placeholder="请输入姓名" name="name" class="form-control" type="search" likeOption="true" /> <input placeholder="请输入登录名" name="loginName" class="form-control" type="search" likeOption="true" /> <div class="btn-group"> <button type="button" class="btn btn-primary" action_type="search">查询</button> <button type="button" class="btn btn-default" action_type="reset">重置</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default" action_type="add">新增</button> <button type="button" class="btn btn-default" action_type="edit" >编辑</button> <button type="button" class="btn btn-default" action_type="delete">删除</button> </div> </div> <div class="box-body"> <table id="user_table" class="table table-bordered table-striped table-hover"> </table> </div>  </div> </div>  </div>  </section> <myScript> <script src="${basePath}/resources/adminlte/plugins/datatables/jquery.dataTables.js"></script> <script src="${basePath}/resources/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script> <script src="${basePath}/resources/common/js/dataTables.js"></script>  <script src="${basePath}/resources/adminlte/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script> <script src="${basePath}/resources/adminlte/plugins/iCheck/icheck.min.js"></script> <script src="${basePath}/resources/adminlte/plugins/datepicker/bootstrap-datepicker.js"></script> <script> //tableId,queryId,conditionContainer var userTable; var winId="userWin"; $(function() { //init table and fill data userTable = new CommonTable("user_table", "user_list", "searchDiv"); //button event $('button[action_type]').click(function() { var action = $(this).attr('action_type'); var rowId=userTable.getSelectedRowId(); switch (action) { case 'add': modals.openWin({ winId:winId, title:'新增用户', top:'auto', width:'900px', url:basePath+"/user/edit" /*, hideFunc:function(){ modals.info("hide me"); }, showFunc:function(){ modals.info("show me"); } */ }); break; case 'edit': if(!rowId){ modals.info('请选择要编辑的行'); return false; } modals.openWin({ winId:winId, title:'编辑用户【'+userTable.getSelectedRowData().name+'】', top:'auto', width:'900px', url:basePath+"/user/edit?id="+rowId }); break; case 'delete': if(!rowId){ modals.info('请选择要删除的行'); return false; } modals.confirm("是否要删除该行数据？",function(){ ajaxPost(basePath+"/user/delete/"+rowId,null,function(data){ if(data.success){ //modals.correct("已删除该数据"); userTable.reloadRowData(); } }); }) break; } }); //form_init(); }) </script> </myScript></body></html>

以上过程完成了AdminLTE的框架化，但是存在一个性能问题，即每次需要访问/decorator路径，会重置顶部导航和左侧菜单，导致不能记住顶部导航和左侧当前菜单。后续可能不会使用Sitemesh3，可能会用jquery 的load方法。

当然有人说，sitemesh3太折腾了，用iframe不就可以吗？确实可以，但iframe的高度自适应的问题是在太恶心了，也存在一些其他问题。

代码已开源，托管在github上，

本文地址：http://www.longkongtuishu.com/cab9cBAVsAVQO.html

标签： #jqueryiframe关闭