03-dotnet core创建区域[Areas]及后台搭建

　　熟悉MVC的人都知道从MVC4开始引入了区域的机制，区域的创建可以协助你在架构较大的项目中，让独立性较高的部分功能作为一个单独的子MVC系统，降低网站与网站之间的耦合度，也可以通过area切割，让多个开发人员开发同一个项目时，减少冲突。

　　在.net Core 中创建项目时，我们发现很多快捷的方式都无法使用了，通过控制器右键添加视图，转到视图页等特性都没有了，包括添加区域，自动进行区域配置也都无法使用，导致我们必须自己手动创建区域以及配置，这样的好处就是可以帮助我们加深对MVC开发模式的理解。

　　下面我们结合这个项目学习怎么添加区域，在这个博客系统中，分为前台和后台，后台主要是自己进行博客的添加编辑删除等功能，前台主要作为博客内容的展示，所以这两个端口我们可以看作是独立既相互存在的，所以可以使用区域的方式进行创建了。

　　首先添加区域文件夹Areas,并在里面创建Admin(后台)文件夹，再在里面创建Controllers(控制器)和Views(视图)文件夹，如图：

继续再添加一个HomeController控制器以及对应的视图，作为后台首页，如图所示：

注意在添加控制器的时候，要添加AreaAttribute属性，[Area("Admin")]AreaName名称要和文件夹名称相同，如图：

添加完成后需要在StartUp.cs中添加路由配置，

routes.MapRoute("areaRoute", "{area:exists}/{controller}/{action=Index}/{id?}"); 如图：

配置完成后，测试是否成功：

OK，配置是成功的，这样区域也就创建成功了，就可以顺利的进行后面的开发了。

后台页面展示，(注：后台是从牛腩老师那儿搜刮的，包括博客的开发也是借鉴牛腩老师的教程学习的，写博客的目的是为以后的开发和学习提供帮助，仅此而已。)后台登陆页以及主页分别如下：

登陆页：

后台首页：

简单划分页面，首先登陆页Login.html单独一个页面，后台主页分为三部分：Top，Left，WelCome，根据这个划分在控制器和视图中分别创建如下页面：

html页面以及相应的样式和js库目录结构如下：

将css和js以及Images和页面拷贝到我们的项目中，在wwwroot下创建adminstyle文件夹来放置后台的样式。将页面中引用的js以及样式等修改相对的路径，如图：

运行效果如下：

完美的迁到了项目中了。下面继续重复的步骤，后台首页迁入到系统中，步骤是一样的。在添加完成后，需要修改的几个地方，在博客列表的内容中我们使用一个模块化的前端框架layui。大家可以去官网下载layui官网，我也放到了项目源文件内，

下载完的目录，我们将它的上层目录layui直接拷贝到wwwroot下，我们先看下刚刚拷贝好的后台的首页内容：

大概是我们想要的样子了，现在该如何引用我们的layui，我们将layui的样式引用到后台欢迎页，当然很简单，直接将css样式拖到页面上就可以了，另外这个后台欢迎页的这些内容我们使用layui中的区块样式，如图：

在welcome页面中，

当我们查看welcome页面源代码时，我们发现可以发现只有以下的内容：

而当我们查看在创建项目时默认的项目，源代码不是这样的，每一个子页面，都含有自己的头文件，是一个完整的网页，如下图：

熟悉MVC的小伙伴们都清楚，那是因为使用模板页，我们可以给项目指定一个模板页，并且程序一加载时，引用模板页的页面会加载模板的内容，如何创建这个模板页，

结构如图所示，在视图文件夹下创建Shared文件夹，里面的_Layout.cshtml就是这个模板页，即作为整个项目的标准布局文件，外层的_ViewStart.cshtml就是指定程序一运行时就会加载这个标准的布局，里面的代码如图所示：

在这里面引用了layui.css和layui.js库，我们知道@RenderBody() 这个是必不可少的，它实际上是一个占位符，以表示这里要显示其他子页面的内容，与webform中的占位符应该是一个用处，再看下_ViewStart.cshtml中的内容，很简单：

就一句代码，即指定加载的标准布局文件的路径。好到这里我们在运行我们的项目，

但是此时，其他页面却加载不出来了

看到生成的源代码就知道怎么回事了，它引用了模板页又带有自己的文件头，这样肯定是不对的，那么我们要指定这几个页面不需要引用_Layout.cshtml，一样很简单，只需要将模板也指定为空就可以了@ { Layout = null; }完美的运行了：

下面我们将我们的博客页面稍作修改，将没用的内容去掉，如下：

相应功能菜单的路径已经指定好了，我们先布局博客内容页，简单的放置一个表格：

下面再来添加一个添加按钮以及编辑删除，同样我们使用layui里面的样式，如图

ok，今天的博客就先写到这儿了，明天有时间再继续。晚安了。

扫描二维码关注我的公众号，共同学习，共同进步！

巴特西