基于AdminLTE的开发框架-AdminEAP

冷不防 2022-07-12 10:41 1023阅读 0赞

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

![SouthEast][]

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

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

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

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

用户列表：

![Center][]

用户编辑：

![SouthEast 1][]

字典管理：

![SouthEast 2][]

图标选择器：

![SouthEast 3][]

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

1、Maven中引入Sitemesh3

**\[html\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml**version="1.0"encoding="UTF-8"**?>**
2.  **<****sitemesh****>**
3.  **<****mapping**path="/\*"decorator="/decorator"**>****</****mapping****>**
4.  **<****mapping**path="/\*/\*edit"exclue="true"**>****</****mapping****>**
5.  
14. 
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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.  
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. 
14. 
15. **<****link**rel="stylesheet"href="$\{basePath\}/resources/adminlte/bootstrap/css/bootstrap.min.css"**>**
16. 
17. **<****link**rel="stylesheet"href="$\{basePath\}/resources/adminlte/css/font-awesome.min.css"**>**
18. 
19. **<****link**rel="stylesheet"href="$\{basePath\}/resources/adminlte/css/ionicons.min.css"**>**
20. 
21. **<****link**rel="stylesheet"href="$\{basePath\}/resources/adminlte/dist/css/AdminLTE.min.css"**>**
22. 
23. **<****link**rel="stylesheet"href="$\{basePath\}/resources/adminlte/dist/css/skins/\_all-skins.min.css"**>**
24. 
25. 
26.  
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. 
39. **<****a**href="$\{basePath\}/main"class="logo"**>**
40. 
41. **<****span**class="logo-mini"**>**
42. **<****b****>**A**</****b****>**LT**</****span****>**
43. 
44. **<****span**class="logo-lg"**>**
45. **<****b****>**Admin**</****b****>**LTE**</****span****>**
46. **</****a****>**
47. 
48. **<****nav**class="navbar navbar-static-top"**>**
49. 
50. **</****nav****>**
51. **</****header****>**
52. 
53. **<****aside**class="main-sidebar"**>**
54. 
55. **</****aside****>**
56. 
57. **<****div**class="content-wrapper"**>**
58. **<****sitemesh:write**property='body'**/>****</****div****>**
59. 
60. **<****footer**class="main-footer"**>**
61. 
62. **</****footer****>**
63. 
64. **<****aside**class="control-sidebar control-sidebar-dark"**>**
65. 
66. **</****aside****>**
67. 
68. 
69. **<****div**class="control-sidebar-bg"**>****</****div****>**
70. **</****div****>**
71. 
72. **<****script**type="text/javascript"**>**var basePath = "$\{basePath\}"; //给外部js文件传递路径参数 
73. **</****script****>**
74. 
75. **<****script**src="$\{basePath\}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.min.js"**>****</****script****>**
76. 
77. **<****script**src="$\{basePath\}/resources/adminlte/bootstrap/js/bootstrap.min.js"**>****</****script****>**
78. 
79. **<****script**src="$\{basePath\}/resources/adminlte/plugins/fastclick/fastclick.js"**>****</****script****>**
80. 
81. **<****script**src="$\{basePath\}/resources/adminlte/dist/js/app.min.js"**>****</****script****>**
82. 
83. 
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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.  
8.  **<****meta**content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"name="viewport"**>**
9.  
10. 
11. 
12. 
13. 
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. 
40. **<****section**class="content"**>**
41. **<****div**class="row"**>**
42. **<****div**class="col-xs-12"**>**
43. **<****div**class="box"**>**
44. 
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. 
63. **</****div****>**
64. **</****div****>**
65. 
66. **</****div****>**
67. 
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. 
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][https_github.com_bill1012_AdminEAP]

[demo详见 http://www.admineap.com][https_github.com_bill1012_AdminEAP]

[SouthEast]: /images/20220710/b64d27dafaac4ef18bb3d4ba2a06c337.png
[Link 1]: http://lib.csdn.net/base/architecture
[spring]: http://lib.csdn.net/base/javaee
[https_github.com_bill1012_AdminEAP]: https://github.com/bill1012/AdminEAP
[http_www.admineap.com]: http://www.admineap.com/
[Center]: /images/20220710/3d90adcd1cb147b284b8ea142e15d5ed.png
[SouthEast 1]: /images/20220710/1c4fd0fbb1d940e9bebd86570c5e58b6.png
[SouthEast 2]: /images/20220710/11d3970411cc41519345a0f447f9c30c.png
[SouthEast 3]: /images/20220710/376202d37de94a06adf0fc8d12ae9f83.png
[view plain]: http://blog.csdn.net/jrn1012/article/details/52278775#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1845032
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1845032/fork
[Java]: http://lib.csdn.net/base/javase
[jQuery]: http://lib.csdn.net/base/jquery

发表评论取消回复

表情：

评论列表（有 0 条评论，1023人围观）

还没有评论，来说两句吧...

相关阅读

相关 Codefi基于区块链的开发框架

Codefi基于区块链的开发框架

待我称王封你为后i/ 2024年04月22日 19:15/ 0 赞/ 74 阅读

相关基于SpringBoot框架的程序开发步骤

![在这里插入图片描述][d1362e277d9f47e383076e6317b59b9f.png_pic_center] SpringBoot简介

逃离我推掉我的手/ 2023年09月27日 22:31/ 0 赞/ 9 阅读

相关基于WADE框架开发流程

基于WADE框架开发流程步骤一：创建导航栏按钮在Sidebar.html中，按需求增加下列代码： <li class="open hover work

àì夳堔傛蜴生んèń/ 2022年07月24日 12:23/ 0 赞/ 378 阅读

相关基于AdminLTE的开发框架-AdminEAP

http://blog.csdn.net/jrn1012/article/details/52278775 ![SouthEast][] 最近在研究使用Admi

╰半橙微兮°/ 2022年07月12日 10:41/ 0 赞/ 188 阅读

相关基于AdminLTE的开发框架-AdminEAP

http://blog.csdn.net/jrn1012/article/details/52278775 ![SouthEast][] 最近在研究使用Admi

冷不防/ 2022年07月12日 10:41/ 0 赞/ 1024 阅读

相关 AdminLTE的使用

1.AdminLTE的必要配置文件 <head> <meta charset="utf-8"> <meta http-equiv="X

浅浅的花香味﹌/ 2022年03月16日 05:14/ 0 赞/ 262 阅读

相关基于EasyUi的快速开发框架

先看图，下边这个简单的增、删、改、查，如果自己写代码实现，这两个页需要多少行代码？如果再有类似的增、删、改、查，又需要多少行代码？ ![231755475434733.p

谁践踏了优雅/ 2022年01月10日 07:19/ 0 赞/ 286 阅读

相关 adminLTE的介绍

一.adminLTE的介绍 adminLTE的官方网站：[adminLTE官方网站][adminLTE] 和github：[adminLTE的github][adminLTE

客官°小女子只卖身不卖艺/ 2021年09月14日 09:38/ 0 赞/ 404 阅读

相关基于 Django 框架的敏捷 Web 开发

<table> <tbody> <tr> <td> <h1>基于 Django 框架的敏捷 Web 开发</h1><img height="6" alt

我会带着你远行/ 2021年09月10日 07:16/ 0 赞/ 361 阅读

相关 AdminLTE框架的基本使用

框架介绍：`AdminLTE`是一个完全响应管理模板。基于`Bootstrap3，jQuery 3.3.1` 这两个框架框架，易定制模板。适合多种屏幕分辨率，从小型移动设备到大

桃扇骨/ 2021年07月04日 21:59/ 0 赞/ 498 阅读