.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跟大伙进行沟通。