asp.net core自学第六天:学习mvc

今天我们可以正式的进入mvc了啊！首先说明一下什么是mvc，mvc是一种前后端分离的框架。他分为3层Controllers Models Views

Controllers

控制器或则叫控制层，举一个例子 http://localhost/news/ 里面的路由news展现什么内容就是在控制层里进行控制的。

Models

Models是数据模型层，比如我们一篇文章有标题，发布时间，发布人，发布内容。那么我们就制作一个模型储存在models里示例如下

["article":{"title":"我是标题","username":"我是发布人","content":"我是文章内容"}]

模型就是定义好数据类型，然后保存在分配给Controllers进行操作，在c#里的数据模型示例如下

定义了一个Article的类，类下面的成员 id title content都一一对应数据库表 Article里的字段。这个就是一个数据模型。

Views

视图层，就是展现给用户的界面，在C#里使用的是Razor视图。示例Index.cshtml 其实跟普通的html也没啥区别，只是可以嵌入用控制器传递过来的数据，或则直接使用c#添加一些其他功能而已。

整个执行流程大概是这样子的，Controllers将获取到的数据，例如来自views或则Models模型的数据或则其他自定义的数据返回给前端。

上面3个介绍完成后，我们可以正式的引入mvc来制作一个基本的项目了，首先在昨天介绍的案例项目里建立3个文件夹Controllers Models Views。最后在添加一个wwwroot文件夹，这个文件夹是用来储存静态文件的。比如图片 js文件 css样式表,html文件等。它的位置位于网站的根目录。最终项目组成文件如下

Controllers文件夹设置

Controllers里，我们添加一个名为HomeController.cs的类,代码如下

using Microsoft.AspNetCore.Mvc;//引入mvc
namespace WebApplication4.Controllers
{
    public class HomeController : Controller //把HomeController的信息注入到 mvc.Controller,
    {
        public HomeController() //构造函数
        {
        }
        [Route("")] //设置路由 这里设置为网站的根目录
        public IActionResult Index() //返回IActionResult数据
        {
            return View(); //返回视图，因为为空所以默认是views里的index.cshtml
        }
    }
}

Controllers有自己的取名规则。比如上诉我们为什么要取名为HomeController这里说明一下 Home代表的是控制器名称，Controller代表的是控制器。Controllers里的类都是名称 + 控制器这样取名的。所以我们就必须取名为HomeController，HomeController下面的函数比如index 基本上就算做路由名了。

示例如下 HomeController里的函数 Test(int id)

用网址表示上面的规则就是http://localhost/Home/Test/3/ 最后面的3代表的是参数 int id。当然我们也可以自定义路由规则。需要这样

[Route("/Test/{id?}")] //这里重写了路由规则
public IActionResult Test(int id) //返回IActionResult数据
{
    return View("index"); //返回视图 index.cshtml
}

最后可以通过网址http://localhost/Test/3/ 来访问了

Views文件夹设置

上面的示例代码return View()是用来把视图输送到前端的。如果是默认的视图就可以使用View()，如果不默认的话可以这样View("test.cshtml")。默认视图的名字为函数名称 Index()就是index.cshtml，如果是Test()那么就是Test.cshtml。所以我们需要在Views文件夹里添加视图，创建一个index.cshtml就可以了啊。

Startup.cs设置

设置好Controllers 和views文件夹后，我们还需要设置Startup.cs文件，需要设置ConfigureServices(IServiceCollection services)和Configure(IApplicationBuilder app, IWebHostEnvironment env)两处

ConfigureServices函数添加如下代码

services.AddMvc();注册Mvc。必须添加。否则无法使用mvc

Configure函数添加如下代码

app.UseStaticFiles();//静态文件的支持
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(//设置路由规则
        name: "default",
        pattern: "{controller=Home}/{action=Index}");
});

因为此处设置了默认路由规则，所以views要新建一个Home文件夹，并且把index.cshtml移动到此处.最终效果如下

通过点击箭头的“在浏览器中查看”我们就可以成功的在前端显示index.cshtml了。

最后总结

至此我们整个asp.net core mvc 项目算是完成了，大道至简，在复杂的mvc项目，大致也跟上面的是一样的。我们只需要理解好Controllers Models Views 这3个层面的原理相信掌握MVC是一件很容易的事情。比如上诉的功能我们可以脑补一下，就是通过Controllers 里的HomeController 函数 Index 来抓取视图/views/home/index.cshtml里的数据。然后返回给前端。就是这样一个流程。