开始学习使用ace admin
生活随笔
收集整理的這篇文章主要介紹了
开始学习使用ace admin
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
因為項目要求，最近在做一個管理系統(tǒng)的時候，需要一個比較強大的前端框架。經(jīng)朋友介紹，網(wǎng)上查詢，找到了這個響應式Bootstrap網(wǎng)站后臺管理系統(tǒng)模板ace admin，一款非常不錯的輕量級易用的admin后臺管理系統(tǒng),它是基于Boostrap的后臺管理系統(tǒng)模板，我們只要根據(jù)它提供的例子，參照著使用就可以實現(xiàn)很絢麗的前端展示了。界面很美觀，而且對瀏覽器兼容性很強，可以讓開發(fā)人員很大程度上不需要考慮分辨率等等問題。至于模板下載的地址，網(wǎng)上去搜就有了，這里記錄下我在項目中使用的主要文件。
ACE框架主要特點如下：1. 有4中不同顏色的主題，可以供切換2. 響應式設計3. 參考文檔，資料很多，有不懂得或者遇到問題了可以去查詢到相應方案4. 第三方插件豐富 如上面所示，后臺界面有伸縮，有左邊樹形菜單，右邊內容區(qū)，點擊 樹形菜單，出現(xiàn)tab頁面到右邊區(qū)域，相當符合目前主流的后臺管理系統(tǒng)，而且例子很豐富，可以參考著就應用到項目中，很方便。首先，根據(jù)各自項目需要，將ace相關主要文件放入同一個文件中，作為common文件，如common.jsp后面功能頁面可以直接引入common后，根據(jù)具體需要，參照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管理系統(tǒng)</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
總結
以上是生活随笔為你收集整理的开始学习使用ace admin的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常用的Java微服务开源框架有哪些呢
- 下一篇： Angular2升级到Angular4