基于AdminLTE的开发框架-AdminEAP

http://blog.csdn.net/jrn1012/article/details/52278775

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

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

代码已开源，托管在github上，https://github.com/bill1012/AdminEAP

AdminEAP demo官网：http://www.admineap.com

用户列表：

用户编辑：

字典管理：

图标选择器：

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

1、Maven中引入Sitemesh3

[html]  view plain  copy

 

1. <dependency>  
2.         <groupId>org.sitemesh</groupId>  
3.     <artifactId>sitemesh</artifactId>  
4.     <version>3.0.0</version>  
5. </dependency>  

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

[html]  view plain  copy

 

1. <filter>  
2.     <filter-name>sitemesh</filter-name>  
3.     <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>  
4. </filter>  
5. <filter-mapping>  
6.     <filter-name>sitemesh</filter-name>  
7.     <url-pattern>/*</url-pattern>  
8. </filter-mapping>  

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

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <sitemesh>  
3.     <mapping path="/*" decorator="/decorator"></mapping>  
4.     <mapping path="/*/*edit" exclue="true"></mapping>  
5. <!--     <mapping path="/*/*addUpdate" exclue="true"></mapping>  
6.     <mapping path="/*/*add" exclue="true"></mapping>   
7.     <mapping path="/*/*update" exclue="true"></mapping> -->  
8.     <mapping path="/resources/*" exclue="true" />  
9.     <mapping path="/*/nodecorator/*" exclue="true"/>  
10.     <mapping path="/nodecorator/*" exclue="true"/>  
11.   
12.    
13.     <!-- 自定义 tag 规则 -->  
14.     <!-- Sitemesh 3 默认只提供了 body，title，head 等 tag 类型，我们可以通过实现 TagRuleBundle 扩展自定义的 tag 规则： -->  
15.     <content-processor>  
16.         <tag-rule-bundle class="com.cnpc.framework.tags.CSSTagRuleBundle" />   
17.         <tag-rule-bundle class="com.cnpc.framework.tags.ScriptTagRuleBundle" />  
18.     </content-processor>  
19.       
20. </sitemesh>  

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

CSSTagRuleBundle.Java

[html]  view plain  copy

 

1. package com.cnpc.framework.tags;  
2.   
3. import org.sitemesh.SiteMeshContext;  
4. import org.sitemesh.content.ContentProperty;  
5. import org.sitemesh.content.tagrules.TagRuleBundle;  
6. import org.sitemesh.content.tagrules.html.ExportTagToContentRule;  
7. import org.sitemesh.tagprocessor.State;  
8.   
9. public class CSSTagRuleBundle implements TagRuleBundle {  
10.   
11.     @Override  
12.     public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) {  
13.   
14.         defaultState.addRule("myCSS", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("myCSS"), false));  
15.   
16.     }  
17.   
18.     @Override  
19.     public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) {  
20.   
21.         // TODO Auto-generated method stub  
22.   
23.     }  
24.   
25. }  

ScriptTagRuleBundle.java

[html]  view plain  copy

 

1. package com.cnpc.framework.tags;  
2.   
3. import org.sitemesh.SiteMeshContext;  
4. import org.sitemesh.content.ContentProperty;  
5. import org.sitemesh.content.tagrules.TagRuleBundle;  
6. import org.sitemesh.content.tagrules.html.ExportTagToContentRule;  
7. import org.sitemesh.tagprocessor.State;  
8.   
9. public class ScriptTagRuleBundle implements TagRuleBundle {  
10.   
11.     @Override  
12.     public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) {  
13.   
14.         defaultState.addRule("myScript", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("myScript"), false));  
15.   
16.     }  
17.   
18.     @Override  
19.     public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) {  
20.   
21.         // TODO Auto-generated method stub  
22.   
23.     }  
24.   
25. }  

4、其中/decorator跳转的路径

[html]  view plain  copy

 

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

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

[html]  view plain  copy

 

1. <!DOCTYPE html>  
2. <html>    
3.   <head>  
4.     <meta charset="utf-8">  
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
6.     <title>AdminLTE |  
7.       <span style="color:#FF0000;">  
8.         <sitemesh:write property='title' /></span></title>  
9.     <!-- Tell the browser to be responsive to screen width -->  
10.     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  
11.     <!-- -->  
12.     <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" media="screen">  
13.     <!-- <link rel="shortcut icon" type="image/x-icon" href="${basePath}/resources/adminlte/base/img/ysd.ico" media="screen" />-->  
14.     <!-- Bootstrap 3.3.6 -->  
15.     <link rel="stylesheet" href="${basePath}/resources/adminlte/bootstrap/css/bootstrap.min.css">  
16.     <!-- Font Awesome -->  
17.     <link rel="stylesheet" href="${basePath}/resources/adminlte/css/font-awesome.min.css">  
18.     <!-- Ionicons -->  
19.     <link rel="stylesheet" href="${basePath}/resources/adminlte/css/ionicons.min.css">  
20.     <!-- Theme style -->  
21.     <link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/AdminLTE.min.css">  
22.     <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->  
23.     <link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/skins/_all-skins.min.css">  
24.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  
25.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
26.     <!--[if lt IE 9]>  
27.       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>  
28.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>  
29.     <![endif]-->  
30.     <!-- 加入页面的样式 -->  
31.     <span style="color:#FF0000;">  
32.       <sitemesh:write property='myCSS' /></span>  
33.   </head>  
34.     
35.   <body class="hold-transition skin-blue sidebar-mini">  
36.     <div class="wrapper">  
37.       <header class="main-header">  
38.         <!-- Logo -->  
39.         <a href="${basePath}/main" class="logo">  
40.           <!-- mini logo for sidebar mini 50x50 pixels -->  
41.           <span class="logo-mini">  
42.             <b>A</b>LT</span>  
43.           <!-- logo for regular state and mobile devices -->  
44.           <span class="logo-lg">  
45.             <b>Admin</b>LTE</span>  
46.         </a>  
47.         <!-- Header Navbar: style can be found in header.less -->  
48.         <nav class="navbar navbar-static-top">  
49.           <!--此处为顶部导航功能 代码略-->  
50.          </nav>  
51.       </header>  
52.       <!-- Left side column. contains the logo and sidebar -->  
53.       <aside class="main-sidebar">  
54.           
55.           <!--此处为左部菜单功能 代码略--></aside>  
56.       <!-- Content Wrapper. Contains page content -->  
57.       <div class="content-wrapper">  
58.         <sitemesh:write property='body' /></div>  
59.       <!-- /.content-wrapper -->  
60.       <footer class="main-footer">        
61.             <!--此处为底部版权声明功能 代码略-->  
62.       </footer>  
63.       <!-- Control Sidebar -->  
64.       <aside class="control-sidebar control-sidebar-dark">          
65.           <!--此处为右侧浮动配置功能 代码略-->  
66.       </aside>  
67.       <!-- /.control-sidebar -->  
68.       <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->  
69.       <div class="control-sidebar-bg"></div>  
70.     </div>  
71.     <!-- ./wrapper -->  
72.     <script type="text/javascript">var basePath = "${basePath}"; //给外部js文件传递路径参数  
73.       </script>  
74.     <!-- jQuery 2.2.0 -->  
75.     <script src="${basePath}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>  
76.     <!-- Bootstrap 3.3.6 -->  
77.     <script src="${basePath}/resources/adminlte/bootstrap/js/bootstrap.min.js"></script>  
78.     <!-- FastClick -->  
79.     <script src="${basePath}/resources/adminlte/plugins/fastclick/fastclick.js"></script>  
80.     <!-- AdminLTE App -->  
81.     <script src="${basePath}/resources/adminlte/dist/js/app.min.js"></script>  
82.     <!-- Sparkline -->  
83.     <!-- AdminLTE for demo purposes -->  
84.     <script src="${basePath}/resources/adminlte/dist/js/demo.js"></script>  
85.     <script type="text/javascript" src="${basePath}/resources/common/js/base.js"></script>  
86.     <script type="text/javascript" src="${basePath}/resources/common/js/base-modal.js"></script>  
87.     <!-- 加入页面的的脚本 -->  
88.     <sitemesh:write property='myScript' /></body>  
89.   
90. </html>  

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

[html]  view plain  copy

 

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset="utf-8">  
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
6. <title>用户列表</title>  
7. <!-- Tell the browser to be responsive to screen width -->  
8. <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  
9. <!-- Bootstrap 3.3.6 -->  
10.   
11. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  
12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
13. <!--[if lt IE 9]>  
14.   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>  
15.   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>  
16.   <![endif]-->  
17. <myCSS>  
18. <link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/datatables/dataTables.bootstrap.css">  
19. <link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/datatables/select.bootstrap.min.css">  
20. <link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/bootstrap-validator/dist/css/bootstrap-validator.css"/>  
21. <link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/iCheck/all.css">  
22. <link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/datepicker/datepicker3.css">  
23. </myCSS>  
24.   
25. </head>  
26. <body class="hold-transition skin-blue sidebar-mini">  
27.     <!-- Content Header (Page header) -->  
28.     <section class="content-header">  
29.         <h1>  
30.             用户管理 <small>列表</small>  
31.         </h1>  
32.         <ol class="breadcrumb">  
33.             <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>  
34.             <li><a href="#">系统管理</a></li>  
35.             <li class="active">用户管理</li>  
36.         </ol>  
37.     </section>   
38.   
39.     <!-- Main content -->  
40.     <section class="content">  
41.         <div class="row">  
42.             <div class="col-xs-12">  
43.                 <div class="box">  
44.                     <!-- /.box-header -->  
45.                     <div class="dataTables_filter" id="searchDiv">  
46.                         <input placeholder="请输入姓名" name="name" class="form-control" type="search" likeOption="true" /> <input  
47.                             placeholder="请输入登录名" name="loginName" class="form-control" type="search" likeOption="true" />  
48.                         <div class="btn-group">  
49.                             <button type="button" class="btn btn-primary"    action_type="search">查询</button>  
50.                             <button type="button" class="btn btn-default" action_type="reset">重置</button>  
51.                         </div>  
52.                         <div class="btn-group">  
53.                             <button type="button" class="btn btn-default" action_type="add">新增</button>  
54.                             <button type="button" class="btn btn-default" action_type="edit" >编辑</button>  
55.                             <button type="button" class="btn btn-default" action_type="delete">删除</button>  
56.                         </div>  
57.                     </div>  
58.                     <div class="box-body">  
59.                         <table id="user_table" class="table table-bordered table-striped table-hover">  
60.                         </table>  
61.                     </div>  
62.                     <!-- /.box-body -->  
63.                 </div>  
64.             </div>  
65.             <!-- /.col -->  
66.         </div>  
67.         <!-- /.row -->  
68.     </section>  
69.   
70.     <myScript>   
71.         <script src="${basePath}/resources/adminlte/plugins/datatables/jquery.dataTables.js"></script>  
72.         <script  src="${basePath}/resources/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>  
73.         <script src="${basePath}/resources/common/js/dataTables.js"></script>  
74.         <!-- form -->  
75.         <script src="${basePath}/resources/adminlte/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script>  
76.         <script src="${basePath}/resources/adminlte/plugins/iCheck/icheck.min.js"></script>  
77.         <script src="${basePath}/resources/adminlte/plugins/datepicker/bootstrap-datepicker.js"></script>  
78.         <script>    
79.             //tableId,queryId,conditionContainer  
80.             var userTable;  
81.             var winId="userWin";  
82.             $(function() {   
83.                 //init table and fill data  
84.                 userTable = new CommonTable("user_table", "user_list", "searchDiv");  
85.                   
86.                 //button event  
87.                 $('button[action_type]').click(function() {  
88.                     var action = $(this).attr('action_type');  
89.                     var rowId=userTable.getSelectedRowId();  
90.                     switch (action) {  
91.                     case 'add':  
92.                         modals.openWin({  
93.                             winId:winId,  
94.                             title:'新增用户',  
95.                             top:'auto',  
96.                             width:'900px',  
97.                             url:basePath+"/user/edit"  
98.                             /*, hideFunc:function(){  
99.                                 modals.info("hide me");  
100.                             },  
101.                             showFunc:function(){  
102.                                 modals.info("show me");  
103.                             } */  
104.                         });                          
105.                         break;  
106.                     case 'edit':  
107.                         if(!rowId){  
108.                             modals.info('请选择要编辑的行');  
109.                             return false;  
110.                         }  
111.                         modals.openWin({  
112.                             winId:winId,  
113.                             title:'编辑用户【'+userTable.getSelectedRowData().name+'】',  
114.                             top:'auto',  
115.                             width:'900px',  
116.                             url:basePath+"/user/edit?id="+rowId  
117.                         });   
118.                        break;  
119.                     case 'delete':  
120.                         if(!rowId){  
121.                             modals.info('请选择要删除的行');  
122.                             return false;  
123.                         }  
124.                         modals.confirm("是否要删除该行数据？",function(){  
125.                             ajaxPost(basePath+"/user/delete/"+rowId,null,function(data){  
126.                                 if(data.success){  
127.                                     //modals.correct("已删除该数据");  
128.                                     userTable.reloadRowData();  
129.                                 }  
130.                             });  
131.                         })  
132.                         break;  
133.                     }  
134.   
135.                 });  
136.                 //form_init();  
137.             })  
138.               
139.           
140.         </script>   
141.     </myScript>  
142. </body>  
143. </html>  

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

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

代码已开源，托管在github上，https://github.com/bill1012/AdminEAP

demo详见 http://www.admineap.com