Ace Admin 使用教程

（轉(zhuǎn)）

公司項(xiàng)目要換框架，然后丟了一套國外的給我，ace admin，本想著拿來改改，翻翻百度就能用的，可它是國外的啊，國內(nèi)普及率又不高，沒辦法，硬著頭皮一點(diǎn)點(diǎn)啃英文文檔吧。

最近留郵箱要文檔的太多拉，為了方便你我他，給個(gè)地址你們下面，需要5個(gè)CSDN的積分哦，如果頁面進(jìn)不去，表示還在審核中，請等待一段時(shí)間再試，謝謝！

點(diǎn)我看下載頁面

File（文件）

簡介：ACE是一個(gè)功能豐富易于使用的輕量級模板，當(dāng)前包含的功能有：

4套皮膚、基于bootstrap 3.3.5版本的相應(yīng)式布局、js和css的功能構(gòu)建、一套發(fā)送郵件的布局、自定義元素的插件以及jquery ui,bootstrap 的部分插件。

所有的html文件放在了html目錄下，如果開發(fā)人員需要更改這些，可以從一個(gè)簡單的頁面開始，頁面放在了：html/empty.html中。

（以上為頁面結(jié)構(gòu)）

胡子文件夾，說明中第一句中寫的：你不需要在你的應(yīng)運(yùn)中使用到它。它實(shí)際上是存的給Demo演示用到的json文件及文檔中需要的信息描述文件。

css樣式，在第8條里面，它提供了一個(gè)css builder （樣式生成器），可以根據(jù)項(xiàng)目需要的功能點(diǎn)的樣式，它可以單獨(dú)的導(dǎo)出。

?

對于bootstrap樣式，這里他們做了一些改動，如把bootstrap中的槽寬，由30px改成了24px等一些其它的改動。

引入樣式文件的順序

關(guān)于ace文件。這里的與ace有關(guān)的js文件都被封裝成各種js插件，ace.js包含主函數(shù)，如側(cè)邊欄，小部件等。

?

注意：bootstrap.css被輕量的修改過，不要使用CDN上的該文件或是官網(wǎng)及其它地方引入的該文件

最后，你需要所有插件引入完以后加上,ace-element.min.js和ace.min.js這二個(gè)js文件（引入JS的順序）,js 的文檔的第四部分講的是js文件引入的順序。

頁面布局部分，這里講了demo的頁的設(shè)計(jì)結(jié)構(gòu)以及每部分需要引入的樣式

導(dǎo)航部分介紹了布局，樣式的引用，品牌、標(biāo)題按鈕以響應(yīng)式布局的演示(這部分寫的很詳細(xì))。

側(cè)邊欄同樣的介紹了布局、菜單列表、快捷鍵、最小化按鈕、側(cè)邊欄功能，響應(yīng)式側(cè)邊框以及ajax和非ajax布局。

?

?

?

?

主內(nèi)容布分介紹了頁面布局、路徑導(dǎo)航（也叫面包屑導(dǎo)航屑）、查詢框、頁面標(biāo)題、主內(nèi)容區(qū)域以及頁面的設(shè)置區(qū)域

ajax部分（重點(diǎn)）

?

（上圖為踩過的坑）

?

在一些ajax頁面中，有些頁面沒有包含橫向菜單和jquery UI渲染的頁面。

這是因?yàn)闄M向菜單是基于改變well的(well是bootstrap中一個(gè)樣式)

在加載完jQuery UI庫以后，其中的提示控件(tooltip)和日歷控件(datepicker)會覆蓋bootstrap的樣式，在你使用jquery UI或是bootstrap 的日歷時(shí)這都不是問題，但是請不要在使用以上控制時(shí)同時(shí)使用jquery ui庫和bootstrap庫。

后面一塊黑色區(qū)域代碼很重要，文檔上意思是，你只有調(diào)用了如下ace_ajax方法，你才能使用ajax加載。

?

畫紅框的地方非常重要，雖然順著文檔看時(shí)，可能看不明白什么問題，但是把問題解決以后再來看這里，這里其實(shí)是一個(gè)大坑，文檔上說，在ace demo中，有一個(gè)樣式為.page-content-area及以有一個(gè)屬性為data-ajax-content="true"的元素，這個(gè)元素中間的部分是可用ajax更新的，因?yàn)樵谀J(rèn)的ace中下面的代碼是可用的。

?

在html/ajax/ajax.html下，有一個(gè)空白的ajax頁面，它可以方便開發(fā)人員以他的頁面格式開發(fā)自己的的content頁面。(文檔中這樣描述)。

?

而實(shí)際上，它的文檔中并沒有這個(gè)文件，不過html/ajax下有一個(gè)blank.html文件，該文件是個(gè)空文件，你可以以這個(gè)文件為模板進(jìn)行開發(fā)，（這里應(yīng)該是描述地址的一個(gè)錯誤）。

setting up 設(shè)置部分說了，你能找到一個(gè)樣式為.page-content-area及以有一個(gè)屬性為data-ajax-content="true"的元素，如上圖。

順便說一下，你需要改變上面設(shè)置參數(shù)中的content_url部分，或者你重新初始化一個(gè)屬于你自己的ace_ajax方法。

?

第三部分講的是ace_ajax方法的參數(shù)，其中最重要的就是一個(gè)就是content_url,它是一個(gè)帶返回url值的函數(shù)，文檔這里藍(lán)色部分說的是，請注意，如果你的ajax 加載的內(nèi)容部分是遞歸的，你需要一個(gè)合適的函數(shù)基于函數(shù)值返回一個(gè)有效的url值。

（這里就是ajax開頭部分踩到的坑，直接在空白頁面無論怎么配置文檔里提供的ace_ajax方法，結(jié)果都一樣，永遠(yuǎn)是一個(gè)首頁無限遞歸。）

?

當(dāng)時(shí)想到這個(gè)問題的原因是，一定會有一個(gè)地方設(shè)置它的跳轉(zhuǎn)，90%可能是在它的相關(guān)插件的源碼里

?

在它的源碼中，ace_ajax首先是做了參數(shù)的處理，然后初始化了一個(gè)AceAjax對象，并把參數(shù)傳了進(jìn)去。

?

在AceAjax方法中，僅是對content_url進(jìn)行了傳值，包括以后的部分也都是在對傳入的這個(gè)url值做處理， 中也沒有page/index 這個(gè)參數(shù)值，因?yàn)槭醉摕o限加載首頁，那么一定是遞歸了page/index頁面（至少會有index關(guān)鍵字），因?yàn)樵诩尤肓薬jax content以后，再次訪問頁面時(shí)，地址欄會自動帶了#page/index。

最后全局搜索關(guān)鍵在，在ace.js中找到了page/index，被定義在了demo_ajax_option變量里。

接著用$('[data-ajax-content=true]').ace_ajax(demo_ajax_options)調(diào)用了ace_ajax方法，上面還有一段注釋，說的是初始化那個(gè)在demo頁面中有著page-content-area[data-ajax-content=true]屬性的元素。

也就是說這個(gè)代碼針對于他的demo演示頁面做的跳轉(zhuǎn)，而你在使用它的demo，僅是在頁面級做修改，他的ajax跳轉(zhuǎn)主頁永遠(yuǎn)會是index頁面。

?

?

在上面，它的文檔里提到了，說在ace里有如下代碼做ajax內(nèi)容區(qū)的跳轉(zhuǎn)，但是沒有沒有指明是具體的哪個(gè)文件（這里應(yīng)該是ace.js文件），并且關(guān)鍵參數(shù)區(qū)域被省略掉了（紅框部分），而實(shí)際上它是在ace.js的行這么寫的：

?

這一塊屬于文檔描述關(guān)鍵點(diǎn)的缺失，解決這個(gè)問題有2個(gè)簡單的方法，

1、將ace.js中的ace_ajax方法的參數(shù)按自己實(shí)際項(xiàng)目需求重新修改。

2、將執(zhí)行ace_ajax方法的這段代碼注釋掉，然后在自己的框架中控制這個(gè)代碼的執(zhí)行。

總結(jié)

以上是生活随笔為你收集整理的ace admin的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。