整合X-Admin前端框架改造ABP

　　「站在巨人的肩膀上」，這樣一來，不要萬事親恭，在值得的方向上節約時間，畢竟人生就這麼一次。在接觸ABP以來，一直想花點時間整合LayUI前端框架到ABP中，進而可以逐漸打磨出一套適合本身的框架，開發習慣、項目架構、界面風格等等。在年前花了點時間瞭解了LayUI現有的後臺模板，雖然LayUI自家的LayUIAdmin很不錯，但奈何於貧窮，所以繞道看看是否有前端同胞已經弄出來一份免費版的，比較了幾份後臺模板後，找到了合適的X-Admin。

 　　演示地址：http://123.207.15.233:9527/

 　　碼雲地址：https://gitee.com/530521314/PithyDesign.git

 

1、X-Admin前端框架和ABP框架

　　X-Admin是基於LayUI打造的一套前端框架，比起Bootstrap那種粗獷的風格，LayUI更加符合國人的審美觀，同時LayUI也對後端開發人員友好，在不徹底掌握前端知識的前提下也可以進行項目開發，官網地址：http://x.xuebingsi.com/。

　　ABP框架是一個用最佳實踐和流行技術開發現代Web應用程序的新起點，旨在快速搭建一個通用的Web應用框架和項目模板，集成着一些優秀的工具和思想，官網地址：https://aspnetboilerplate.com/。

　　若是以爲本身組合一套框架以爲繁瑣，能夠試試使用52ABP框架，該套優秀的先後端框架由梁桐銘在ABP框架的基礎上進行整合，對於先後端相關功能進行改造，使知足國人的開發習慣，官網地址：https://www.52abp.com/。

　　

2、開始整合兩個框架

　　一、先從ABP官網下載項目模板。通過文件結構調整後，項目文件路徑以下，之因此項目文件路徑和官網下載下來的不徹底一致，是通過了一些調整，適用本身的開發習慣，畢竟適合的纔是最好的，在以前的生成流水線搭建中也提到過項目結構，目的是使之標準化，而不須要每次都要從新設置一下項目文件結構。(注意，此處我下載的是.Net Core+MPA版+去掉登陸、註冊、用戶、角色和多租戶功能)

　　

 

　　二、下載X-Admin源碼包，解壓後，開始着手Ctrl+C、V操做，將須要的一些js、css等文件移入到ABP中。

　　

 　　三、去除在本次整合後部分在ABP中的再也不須要的功能，如Boostrap及其相關的插件，並非Boostrap不優秀而是LayUI是個人目的，功能類似下，不必在冗餘存在。

 　　

　　並在bower包管理中刪除對Boostrap的依賴，儘量的使用大部分LayUI及LayUI社區提供的插件和功能，以減小後端開發人員的學習和使用成本。

　　

 　　四、將X-Admin文件夾中的js文件及css文件移入到ABP中，部分ABP分裝了一層的js、css保持不變，仍然先存放着，若是後期肯定再也不使用，再進行移除ABP下載後自帶了一個main.css文件，可使用這個文件或直接使用X-Admin中的css文件。　　

　　

　　五、以現有的Layout母版頁複製一個(此處我命名爲_LayoutBase)，從X-Admin文件夾中查看index.html並複製Body標籤內的代碼到_Layout母版頁的Body中(我對底部的footer刪除了，位置不太合適)，整理引用的js、css文件，具體可見個人Git倉庫中，使用控制器Home,方法Index的視圖做爲使用_LayoutBase母版頁的視圖，其他頁面都將在Index界面中以iframe的形式出現，到如今，直接啓動項目後，初步的界面能夠展示出來了。

 　　

 

3、優化展現效果

 　　一、X-Admin中，對於側邊欄收縮採用的是直接所有隱藏，在該功能的基礎上改造一些功能，使得收縮後能夠留下一列圖標，實現方式能夠有不少種，此處採起使用js腳本去控制左側菜單寬度實現，在xadmin.js腳本中，找到$('.container .left_open').click()方法，而後在此基礎上進行改造，如如下改造，注意，部分css也須要改造，具體見倉庫源代碼中。

$('.container .left_open').click(function (event) {
    if (!$('.left-nav #nav .layui-nav-item').hasClass('nav-mini')) {
        //左側菜單
        $('.left-nav #nav .layui-nav-item').addClass('nav-mini');
        $('.left-nav').animate({ left: '0px', width: '60px' }, 100);
        $('.sub-menu li').each(function () {
            $(this).hide();
        });

        //右側內容
        $('.page-content').animate({ left: '60px' }, 100);
        $('.page-content-bg').hide();
    } else {
        //左側菜單
        $('.left-nav .layui-nav-item').removeClass('nav-mini');
        $('.left-nav').animate({ left: '0px', width: '220px' }, 100, function () {
            $('.sub-menu li').each(function () {
                $(this).show();
            });
        });

        //右側內容
        $('.page-content').animate({ left: '220px' }, 100);
        if ($(window).width() < 768) {
            $('.page-content-bg').show();
        }
    }
});

 　　二、加入語言爲簡體中文，在領域層中的本地資源配置中加入中文及中文語言包，此處我將中文設置爲默認語言，更改原有默認的英文包的PithyDesign爲PithyDesign-en，並增長一個PithyDesign.json內容與英文包同樣，將英文譯成中文便可。

　　

　　增長中文並設置爲默認選項，若有更多語言，能夠在此基礎上進行擴展。

　　

　　三、對X-Admin代碼包中存在的一些其它界面加入到ABP中如用戶、管理員的增刪改查界面、地址三級聯動、百度的ECharts圖表展現界面等，在增長前須要注意母版頁的設置，在按Url：Home/Index進入後臺界面後，Index視圖直接套用_LayoutBase母版頁，而後其它功能頁以iframe的形式嵌入，其他功能頁使用_Layout母版頁。

　　

 

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

 

2019-02-21,望技術有成後能回來看見本身的腳步