基于AdminLTE的开发框架-AdminEAP

最新推荐文章于 2024-09-14 10:28:45 发布

推敲

最新推荐文章于 2024-09-14 10:28:45 发布

阅读量6.8w

点赞数 50

分类专栏： web开发开源架构文章标签： AdminLTE Sitemesh3

本文链接：https://blog.csdn.net/jrn1012/article/details/52278775

版权

web开发同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

开源架构

15 篇文章 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

<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="/*/*addUpdate" exclue="true"></mapping>
    <mapping path="/*/*add" exclue="true"></mapping> 
    <mapping path="/*/*update" exclue="true"></mapping> -->
	<mapping path="/resources/*" exclue="true" />
	<mapping path="/*/nodecorator/*" exclue="true"/>
	<mapping path="/nodecorator/*" exclue="true"/>

 
	<!-- 自定义 tag 规则 -->
	<!-- Sitemesh 3 默认只提供了 body，title，head 等 tag 类型，我们可以通过实现 TagRuleBundle 扩展自定义的 tag 规则： -->
	<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>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- -->
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" media="screen">
    <!-- <link rel="shortcut icon" type="image/x-icon" href="${basePath}/resources/adminlte/base/img/ysd.ico" media="screen" />-->
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="${basePath}/resources/adminlte/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${basePath}/resources/adminlte/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${basePath}/resources/adminlte/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/skins/_all-skins.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 加入页面的样式 -->
    <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">
        <!-- Logo -->
        <a href="${basePath}/main" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini">
            <b>A</b>LT</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg">
            <b>Admin</b>LTE</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
          <!--此处为顶部导航功能 代码略-->
		 </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        
          <!--此处为左部菜单功能 代码略--></aside>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <sitemesh:write property='body' /></div>
      <!-- /.content-wrapper -->
      <footer class="main-footer">      
            <!--此处为底部版权声明功能 代码略-->
	  </footer>
      <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">        
          <!--此处为右侧浮动配置功能 代码略-->
	  </aside>
      <!-- /.control-sidebar -->
      <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>
    </div>
    <!-- ./wrapper -->
    <script type="text/javascript">var basePath = "${basePath}"; //给外部js文件传递路径参数
      </script>
    <!-- jQuery 2.2.0 -->
    <script src="${basePath}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="${basePath}/resources/adminlte/bootstrap/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="${basePath}/resources/adminlte/plugins/fastclick/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="${basePath}/resources/adminlte/dist/js/app.min.js"></script>
    <!-- Sparkline -->
    <!-- AdminLTE for demo purposes -->
    <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>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
<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">
	<!-- Content Header (Page header) -->
	<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> 

	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<!-- /.box-header -->
					<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>
					<!-- /.box-body -->
				</div>
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</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>
		<!-- form -->
		<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上，https://github.com/bill1012/AdminEAP

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