.NET Core實戰項目之CMS 第十三章 開發篇-在MVC項目結構介紹及應用第三方UI

做爲後端開發的我來講，前端表示真心玩不轉，你若是讓我微調一個位置的樣式的話還行，可是讓我寫一個很漂亮的後臺的話，真心作不到，因此我通常會選擇套用一些開源UI模板來進行系統UI的設計。那如何套用呢？今天就以咱們系列實戰教程中的CMS系統爲例來應用第三方的後臺模板LayuiCMS2.0爲例來進行實戰演練吧！

本文已收錄至《.NET Core實戰項目之CMS 第一章 入門篇-開篇及整體規劃》
做者：依樂祝
首發地址 「DotNetCore實戰」公衆號
原文地址：https://www.cnblogs.com/yilezhu/p/10210732.html

寫在前面

這裏先對從一開始就開始追這個ASP.NET Core實戰項目之CMS系列教程的讀者朋友說聲抱歉。說由於太忙好久沒更新了，這都是託詞！其實我是想趁着元旦假期把後臺功能所有寫完之後再來一點點的再分享出來的，奈何前端知識的軟肋完全爆發，再加上週末陪小孩所以只完成了百分五十左右的開發工做，再者羣裏不少小夥伴也已經在崔更了，因此摒棄以前的策略，改爲邊分享邊開發的策略。接下來仍是儘可能保持一星期三篇左右的進度來分享，寫文章真的比寫代碼要更費神，但願你們可以多多支持，多多推薦！你的推薦也是我繼續分享的動力！固然祝福你們「元旦後第一天正式上班開開心心，快快樂樂」。

實戰

ASP.NET Core MVC項目結構介紹

在開始以前先讓咱們大體瞭解下一個新建立的ASP.NET Core MVC的項目結構，只有瞭解了項目結構後，咱們才能駕輕就熟的進行相關的操做！同時因爲Czar.Cms.Admin項目中我已經應用過了模板，所以咱們以Czar.Cms.Site這個尚未動過手術的前端項目爲例來進行講解。

1. 新建立的一個空的ASP.NET Core MVC的項目結構以下所示，咱們只介紹圈起來的八個部分：

2. wwwroot部分放的內容都是前端的內容，如css，js，image等等。以下圖所示：

   ASP.NET Core MVC項目爲咱們生成了一套默認的樣式，如上圖紅圈圈起來的部分就是這套默認的樣式（下面再一步一步的替換它），咱們按以下圖所示的操做選擇這個項目，而後右鍵-》查看-》在瀏覽器中查看，

   看到以下的默認界面（別急，咱們接下來再替換它）

3. 依賴項：顧名思義就是項目所須要以來的第三方組件，好比咱們的Czar.Cms.Site項目須要依賴倉儲層的項目，好比咱們用到了第三方的Autofac組件等等，以下圖所示：

4. Controllers：MVC架構中的C層即控制器層，用到Asp.Net MVC的對這個控制器應該不陌生吧！這個 文件夾下包含負責處理用戶輸入和響應的控制器類。另外要求全部控制器的名稱必須以 "Controller" 結尾。以下圖所示：

5. Models：MVC架構中的M層即實體層，這個大夥應該都熟悉吧就是實體對象，這裏若是我再截圖的話感受就是在侮辱大夥的智商，因此~~~~

6. Views：MVC架構中的V層即視圖層，用來在瀏覽器中顯示的具體界面。以下圖所示，這裏跟Controller層進行對應，如上圖標註的HomeController中的Index就對應Views文件夾下Home文件夾下面的Index.cshtml文件：

   咱們嘗試把Index.cshtml中的內容改成Welcome 依樂祝！，而後再瀏覽器中打開查看一下，能夠看到頁面的內容已經發生了變化

7. appsettings.json：這個文件是系統配置文件，不知道你們還記得《.NET Core實戰項目之CMS 第三章 入門篇-源碼解析配置文件及依賴注入》這篇文章中的內容嗎？裏面詳細介紹了這個文件的加載過程。

8. Program.cs：及系統的啓動入口，熟悉C#的童鞋是否是感受似曾相識，沒錯，就是一個控制檯程序的入口嘛！你是否在想，裏面會不會有Main方法呢？哈哈，本身打開看下吧！

9. Startup.cs：啓動配置文件，第三篇也說過了，其實這個文件會被轉換成IStartUp而後再進行注入的！不清楚的能夠去看第三篇，有提到！

Views結構介紹

關於Views的接哦古，感受仍是有必要提一下，不知道大夥有沒有注意到咱們上面打開的Index.cshtml文件，這個裏面好像沒有html，head,title,body等等標籤啊，可是若是咱們再瀏覽器中右鍵查看源文件，能夠看到以下所示引入了不少的js以及css樣式文件啊，這到底是怎麼作到的呢？別急，咱們這個小節就來闡述。

1. Views文件夾下面有一個特殊的文件夾即Shared文件夾以及特殊的文件，以_開頭的文件。以下圖所示紅色圈圈圈起來的，

2. Shared文件夾下面就是定義一些公共部分的模板，就以MVC默認模板爲例，如定義公共的頭部菜單部分，或者公共的底部部分，咱們以Shared\_Layout.cshtml爲例進行講解,以下圖所示：

   這個文件定義了一個標準的html5的模板，包含頭部，導航部分，正文有差別的不放呢，底部，甚至能夠根據環境變量加載不一樣的內容。這裏留個問題，那咱們前面看的Home/Index.cshtml用的是哪一個樣式呢？

3. 再看看跟Shared文件夾平級的文件_ViewStart.cshtml 能夠看到以下內容：

   這個文件就是用來定義全局的模板引用規則的，如上圖，這裏給全部的視圖默認應用了_Layout的模板，也就是2中流的思考題的答案，即應用了Shared/_Layout.cshtml這個模板的樣式。

應用第三方UI模板

瞭解了上面的結構後，咱們知道，若是想應用第三方的UI，那麼咱們得把默認生成的wwwroot中的內容替換成咱們使用的第三方模板，而後按照第三方UI模板的格式，在Shared\_Layout.cshtml中拷貝公共的模板，而後再把變化的部分放到對應的頁面便可。明白了原理，在開始動手覆蓋是否是感受駕輕就熟了呢？還不趕忙開始吧！畢竟是實戰，若是不實戰一番感受對不起這個名字，So,我就以LayuiCms2.0爲例來給大夥實戰一番。恰好咱們的CMS後臺就是用的這個模板。

1. 想引用第三方模板以前是否是得先把模板下下來呢？若是你也想用LayuiCms2.0，能夠點這裏下載

2. 解壓後把裏面的css,images,js等文件拷貝到wwwroot目錄裏面，當前拷貝以前仍是建議你先把這個目錄下面的全部文件都清理掉。因爲這個Layuicms依賴Layui,因此還須要把layui文件夾拷貝過去。這個每一個UI模板不同須要拷貝的內容不盡相同。

   拷貝後的目錄結構以下所示：這裏我把json文件也拷貝過去了，後期再把對應的json文件替換掉！先用靜態數據演示。

3. 替換Shared對應的模板，把整個文件簡單粗暴的拷貝過去，而後作相應的替換便可，對於變化的部分應用@RenderBody() ,替換後的內容以下所示：

4. 把變化的內容放到具體的頁面中吧，這裏我只展現一個main裏面的內容：

5. 到此結束，其餘的模板替換方案相似。

效果展現

這裏話很少說，給你們展現下效果吧：

主頁

角色管理：

角色編輯：

用戶管理：

用戶管理編輯：

用戶管理列表頁，鎖定用戶：

鎖定界面：

目前只實現了這些功能其餘後續再展現。

開源地址

這個系列教程的源碼我會開放在GitHub以及碼雲上，有興趣的朋友能夠下載查看！以爲不錯的歡迎Star

GitHub：https://github.com/yilezhu/Czar.Cms

碼雲：https://gitee.com/yilezhu/Czar.Cms

若是你以爲這個系列對您有所幫助的話，歡迎以各類方式進行贊助，固然給個Star支持下也是能夠滴！另一種最簡單粗暴的方式就是下面這種直接關注咱們的公衆號了：  

總結

今天我給你們講解了ASP.NET Core MVC項目的結構，並詳細闡述了View層的模板嵌套原理。接着帶着你們一步一步的操做了一遍如何應用第三方UI模板。固然源碼也已經同步更新到GitHub上了，有興趣的小夥伴能夠下載參考！下一篇我會帶着你們結合這個模板，來說解如何實現角色的增刪改查！以及項目各個結構之間的協調工做！敬請期待吧！放心，下篇周內就會趕出來！另外若是你有任何問題能夠下方留言或者加羣637326624跟大夥進行溝通。