软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> MVC基础学习—理论篇 -> 正文阅读

[Web前端]MVC基础学习—理论篇

  1.      简介

    ?  定义?什么是MVC


    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

    ?  VC模式和我们熟悉的WebForm模式


[img]http://img.blog.csdn.net/20150116204651991?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

      看上面的这两幅图,上面的那一幅图是web请求方式,下面的那个是mvc模式,我们可以看出,第一种web方式客户端向浏览器发送一个请求:比如:www.itcast.cn/index.aspx;浏览器向服务器发送报文请求,服务器端的framework创建一个页面的对象,将输入的数据进行处理后输出html或其他的内容,最后将处理后的数据渲染成为html或者js或者css的形式返回给客户端浏览器进行显示。传统web开发是输入一个网址,请求的是一个页面类
      而第二种方式是MVC方式,同样是向服务器发送请求比如www.itcast.cn/news/index,不同于传统的web形式,在服务器framework中,根据路由配置,将传过来的url进行解析,创建news对象,并且调用对象的index方法,在方法中进行数据的处理,并且将结果存储咋视图中,最后将结果渲染为html或者js或者css形式以视图的形式返回给客户端浏览器。mvc是请求页面类中的一个方法,之后将数据传输到视图中进行显示。
      看下面的这两种图更为清晰:
      传统web形式:
[img]http://img.blog.csdn.net/20150116204701296?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

      Mvc模式:
[img]http://img.blog.csdn.net/20150116204754563?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

    2.      内部详解

      ?  程序的访问路径


      从上面的图上我们可以看出,在MVC中,客户端的所请求的URL是被映射到相应的Controller去,然后由Controller来处理业务逻辑,或许要从Model中取数据,然后再由Controller选择合适的View返回给客户端。
    新建一个小的程序:新建解决方案,之后添加一个控制器,里面的代码如下:
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>using MVCBlog.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCBlog.Controllers
{
    //1.控制器类(继承了Controller)
    public class HomeController : Controller
    {
        //创建一个数据集合(伪数据)
        

        #region 0.1初始化数据集合+ void InitData()
        /// <summary>
        /// 初始化数据集合
        /// </summary>
        public List<Models.Dog> InitData()
        {
            List<Models.Dog> list = new List<Models.Dog>() { 
                new Dog(){ID=1,Name="小样~~"},
                new Dog(){ID=2,Name="小样2~~"},
                new Dog(){ID=3,Name="小样3~~"},
                new Dog(){ID=4,Name="小样4~~"}
            };
            return list;

        } 

         #endregion


        //2.Action方法(可以看成MVC设计模式的Model)
        public ActionResult Index()
        {

            //定义一个容器,并且设计容量
            System.Text.StringBuilder sbHtml = new System.Text.StringBuilder(4000);
            // 2.1读取当前的业务,比如读取数据库、判断等等)
            //2.1创建一个数据集合,获取当前数据
            List<Models.Dog> list = InitData();
            //2.1.1遍历集合,生成html代码,并且存入到sbHtml中
            list.ForEach(d =>
            {
                sbHtml.AppendLine("<div>" + d.ToString() + "</div>");
            });
            //使用viewBag传递数据给同名的Index.cshtml
            //viewBag是一个dynamic类型集合,可以动态添加任何类型的任意名称的属性和值

            ViewBag.Htmlstr = sbHtml.ToString();
            //2.3加载同名视图Index.cshtml
            return View();
        }

      
    }
}
</strong></span>


       之后在Models里面添加一个dog类,代码如下:
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCBlog.Models
{
    public class Dog
    {
        public int ID { get;set; }
        public string Name { get; set; }
        public override string ToString() {
            return "ID=" + this.ID + ",Name=" + this.Name;
        }


    }
}</strong></span>


      在index方法上鼠标右击添加视图,视图的代码如下:


<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>

<body>
  @ViewBag.HtmlStr
</body>
</html>
</strong></span>


      直接运行即可:效果如下图:
[img]http://img.blog.csdn.net/20150116205101857?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

        我们看到无论是访问前者的地址还是后者的地址,内容是一样的,说明默认情况下访问的就是http://localhost:9711/Home/index
[img]http://img.blog.csdn.net/20150116205110390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

       我们注意到地址栏的URL是 Home/Index,如果按照我们前面说的WebForm的模式的话,我们应该可以在我们的项目的根目录下找到Home目录,然后Home目录下有个Index的文件,但是我们并不能在根目录下找到Home这个目录。不过还是让我们在Views目录下找到了Views/Home/Index.aspx文件,我们输入这个地址运行看看:
[img]http://img.blog.csdn.net/20150116205202931?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

      为什么会这样呢,路径是正确的,但是显示不出来,怎么回事呢?我们来解析一下吧。

      ?  MVC运行机制

     为什么输入路径看似正确却出错呢?


     前面我们看到即使输入的路径是正确的,但是还是出错了,怎么回事呢?
      我们打开Views文件夹的配置文件,其实这个文件夹下还有一个配置文件的,
[img]http://img.blog.csdn.net/20150116205415875?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

       这就解决了为什么前面我们直接访问Views/Home/Index.aspx这里文件的时候会出现404错误,说找不到文件呢?因为在MVC中,是不建议直接去访问View的,所以当我们访问时,也就是访问Views目录下的所有的文件都会由System.Web.HttpNotFoundHandler因此我们不要将资源文件(CSS、JS、图片等)放到Views目录中。

      为什么前两种的输入都能出来最后结果呢?


      在MVC中,客户端的所请求的URL是被映射到相应的Controller去,然后由Controller来处理业务逻辑,或许要从Model中取数据,然后再由Controller选择合适的View返回给客户端。
      当我们运行的ASP.NET MVC程序访问的这个URL,它其实访问的是HomeController中的Index这个Action。
[img]http://img.blog.csdn.net/20150116205518821?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

         那么为什么第一个地址也是可以访问啊,http://localhost:9711原因在于MVC的路由机制,我们看看路由的配置:
[img]http://img.blog.csdn.net/20150116205554373?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

      我们可以看到这里定义了一个名为"Default"的Route,还定义了默认的参数。默认参数的意义在于,当我们访问例如http://localhost:9711的URL的时候,他会将不存在的参数用默认的参数补上,也就是相当于访问http://localhost:9711/Home/Index一样。故而会出现上面的两种相同的结果。

    ?  MVC核心部件

[img]http://img.blog.csdn.net/20150116205618796?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk1NTg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

      在MVC设计模式中,Model是指要处理的业务逻辑和数据操作;View视图主要是指的跟用户打交道并且显示给用户看的;Controller看成是Model和View的桥梁。
      第一个Controller也即是控制器
      很多人在问Model在哪里,是不是就是建立出来的Models文件夹下的呢,其实/Home/action方法可以看成是MVC设计模式的Model,因为这个方法会根据建立在Models中的类或者一些数据进行操作。
      第二个是Models
      学过三层可能不会陌生,三层中的实体就是这个东东,那他们一样吗?有相同的,也有区别,我们不仅仅可以定义实体,同样我们可以建立数据模型,也即是EF(EntityFramework);也即是ORM(对象关系映射框架/数据持久化框架)根据实体对象操作数据表中数据的一种面向对象的操作框架,底层也是调用ADO.Net.
      第三个是Views
       客户端浏览器发送的请求经过Controller的中方法index处理后由Controller选择合适的View返回给客户端。主要是呈现给用户看的。

  3.      总结


      这里只是自己初步学习的理解,这里主要讲述的是理论,下篇会讲解一些应用还有其他的知识。请继续关注~


......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2015-01-17 11:02:13  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年12日历
2017-12-15 21:47:14
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --