作為後端開發的我來說，前端表示真心玩不轉，你如果讓我微調一個位置的樣式的話還行，但是讓我寫一個很漂亮的後臺的話，真心做不到，所以我一般會選擇套用一些開源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跟大夥進行溝通。