编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

基于AdminLTE的开发框架-AdminEAP

wxchong 2024-08-04 02:32:43 开源技术 22 ℃ 0 评论

最近在研究使用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


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

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


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

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


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

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

CSSTagRuleBundle.java


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

ScriptTagRuleBundle.java


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

4、其中/decorator跳转的路径


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

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


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

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


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

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

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

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

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2