开始学习使用ace admin

最新推荐文章于 2025-05-23 14:50:05 发布

weixin_33852020

最新推荐文章于 2025-05-23 14:50:05 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 javascript python ViewUI

原文链接：https://my.oschina.net/u/2426199/blog/741806

本文介绍了AceAdmin，一款基于Bootstrap的轻量级后台管理系统模板。它具备多种主题、响应式设计及丰富的第三方插件等特点，适合快速搭建后台界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

因为项目要求，最近在做一个管理系统的时候，需要一个比较强大的前端框架。经朋友介绍，网上查询，找到了这个响应式Bootstrap网站后台管理系统模板ace admin，一款非常不错的轻量级易用的admin后台管理系统,它是基于Boostrap的后台管理系统模板，我们只要根据它提供的例子，参照着使用就可以实现很绚丽的前端展示了。界面很美观，而且对浏览器兼容性很强，可以让开发人员很大程度上不需要考虑分辨率等等问题。至于模板下载的地址，网上去搜就有了，这里记录下我在项目中使用的主要文件。

ACE框架主要特点如下：
   1.  有4中不同颜色的主题，可以供切换
   2.  响应式设计
   3.  参考文档，资料很多，有不懂得或者遇到问题了可以去查询到相应方案
   4.  第三方插件丰富

输入图片说明

    如上面所示，后台界面有伸缩，有左边树形菜单，右边内容区，点击 树形菜单，出现tab页面到右边区域，相当符合目前主流的后台管理系统，而且例子很丰富，可以参考着就应用到项目中，很方便。

    首先，根据各自项目需要，将ace相关主要文件放入同一个文件中，作为common文件，如common.jsp后面功能页面可以直接引入common后，根据具体需要，参照ace例子，去把相应的js、css文件放入各自功能模块,或者也可以懒一点，直接把所有文件都放到common里，以后的功能文件就不需要管ace相关的了。

下面是我在项目中的common文件

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<meta charset="utf-8" />
<title>XX管理系统</title>

<meta name="description"
	content="Dynamic tables and grids using jqGrid plugin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- basic styles -->

<link href="${ctx}/resources/ace_jqgrid/assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->

<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/jquery-ui-1.10.3.full.min.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/datepicker.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ui.jqgrid.css" />

<!-- fonts -->

<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace-fonts.css" />

<!-- ace styles -->

<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace.min.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace-skins.min.css" />

<script src="${ctx}/resources/ace_jqgrid/assets/js/ace-extra.min.js"></script>


<!-- basic scripts -->
<script type="text/javascript">
	var rootPath = "${ctx}";
	var $path_base = "${ctx}";//this will be used in gritter alerts containing images
</script>

<script type="text/javascript">
	window.jQuery
			|| document.write("<script src='${ctx}/resources/ace_jqgrid/assets/js/jquery-2.0.3.min.js'>"
					+ "<"+"/script>");
</script>

<script type="text/javascript">
	if ("ontouchend" in document)
		document.write("<script src='${ctx}/resources/ace_jqgrid/assets/js/jquery.mobile.custom.min.js'>"
				+ "<"+"/script>");
</script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/typeahead-bs2.min.js"></script>

<script src="${ctx}/resources/ace_jqgrid/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- page specific plugin scripts -->
<!-- 时间选择器相关脚本 -->
<script src="${ctx}/resources/ace_jqgrid/assets/js/chosen.jquery.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/bootstrap-timepicker.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/moment.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/daterangepicker.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

<!-- ace scripts -->

<script src="${ctx}/resources/ace_jqgrid/assets/js/ace-elements.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/ace.min.js"></script>



</body>
</html>

转载于:https://my.oschina.net/u/2426199/blog/741806