.NET Core实战项目之CMS 第十三章 开辟篇-在MVC项目


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

作为后端开辟的我来讲,前端透露表现至心玩不转,你若是让我微调一个地位的款式的话还行,然则让我写一个很漂亮的背景的话,至心做不到,以是我一样平常会挑选套用一些开源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跟大伙举行相同。

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。