整合X Admin前端框架改造ABP

2021-09-11 06:47:30 字數 2124 閱讀 7691

「站在巨人的肩膀上」,這樣一來,不要萬事親恭,在值得的方向上節約時間,畢竟人生就這麼一次。在接觸abp以來,一直想花點時間整合layui前端框架到abp中,進而能夠逐漸打磨出一套適合自己的框架,開發習慣、專案架構、介面風格等等。在年前花了點時間了解了layui現有的後台模板,雖然layui自家的layuiadmin很不錯,但奈何於貧窮,因此繞道看看是否有前端同胞已經弄出來乙份免費版的,比較了幾份後台模板後,找到了合適的x-admin。

3、去除在本次整合後部分在abp中的不再需要的功能,如boostrap及其相關的外掛程式,並不是boostrap不優秀而是layui是我的目的,功能相似下,沒必要在冗餘存在。

並在bower包管理中刪除對boostrap的依賴,盡可能的使用大部分layui及layui社群提供的外掛程式和功能,以減少後端開發人員的學習和使用成本。

5、以現有的layout母版頁複製乙個(此處我命名為_layoutbase),從x-admin資料夾中檢視index.html並複製body標籤內的**到_layout母版頁的body中(我對底部的footer刪除了,位置不太合適),整理引用的js、css檔案,具體可見我的git倉庫中,使用控制器home,方法index的檢視作為使用_layoutbase母版頁的檢視,其餘頁面都將在index介面中以iframe的形式出現,到現在,直接啟動專案後,初步的介面可以展現出來了。

1、x-admin中,對於側邊欄收縮採用的是直接全部隱藏,在該功能的基礎上改造一些功能,使得收縮後可以留下一列圖示,實現方式可以有很多種,此處採取使用js指令碼去控制左側選單寬度實現,在xadmin.js指令碼中,找到$('.container .left_open').click()方法,然後在此基礎上進行改造,如以下改造,注意,部分css也需要改造,具體見倉庫源**中。

$('.container .left_open').click(function (event) , 100);

$('.sub-menu li').each(function () );

//右側內容

$('.page-content').animate(, 100);

$('.page-content-bg').hide();

} else , 100, function () );

});//右側內容

$('.page-content').animate(, 100);

if ($(window).width() < 768)

}});

2、加入語言為簡體中文,在領域層中的本地資源配置中加入中文及中文語言包,此處我將中文設定為預設語言,更改原有預設的英文包的pithydesign為pithydesign-en,並增加乙個pithydesign.json內容與英文包一樣,將英文譯成中文即可。

增加中文並設定為預設選項,如有更多語言,可以在此基礎上進行擴充套件。

至此,整合工作算是完成了,後期考慮提高一些操作上的體驗感,同時逐步完善如使用者登入、註冊、組織機構、角色等基礎功能。

django整合xadmin的方法

xadmin是django的乙個第三方的管理後台實現,它的功能比自帶的admin功能更加強大。xadmin專案在github上的位址為 xadmin相關文件可以在這裡檢視 文件上有些地方寫的還是比較簡要,按照上面的步驟做,有時候報錯了可能還不知道什麼原因。這裡簡要總結下自己整合xadmin的方法,我...

前端框架開發整合開篇 一

想了好久,準備搭建一套完整的前端開發框架 首談前端框架用到的技術 bootstrap jquery angularjs easyui 字型主要用 開發中可能用到的技術 jquery外掛程式 jquery物件導向寫法 angularjs指令與服務 html5的一些特性 下一步定向是,把這個框架整合到 ...

python 3 6整合安裝xadmin

pip install xadmin安裝完成後,發現會自動把關聯的對應包給一起安裝上 但是在我們執行如下命令的時候會報錯 python manage.py makemigrations錯誤資訊如下 追查發現,通過pip安裝的xadmin,目前是只支援2.x版本,不支援3.x,如果需要在python ...