码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-03-27 23:47:57      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:添加   otn   ==   前端   js库   就会   分页   form   协助   

  熟悉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,今天的博客就先写到这儿了,明天有时间再继续。晚安了。

 

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

标签:添加   otn   ==   前端   js库   就会   分页   form   协助   

原文地址:http://www.cnblogs.com/Allen0910/p/6629507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!