从Web开发者的视角来解读MVC架构菜鸟知识_架构基础入门

MVC代表了一种软件框架的设计模式。该框架的主要功能是:通过允许多名开发人员共同在一个项目上开展工作,以分离应用程序的功能、逻辑和接口,进而促进有组织的编程实现方法。下面,让我们从Web开发人员的角度来解读MVC的不同组件。首先,让我们来看看有哪些使用到了MVC的流行Web框架:Ruby on Rails (Ruby)Express (JS)Backbone

从Web开发者的视角来解读MVC架构菜鸟知识

MVC代表了一种软件框架的设计模式。该框架的主要功能是:通过允许多名开发人员共同在一个项目上开展工作,以分离应用程序的功能、逻辑和接口,进而促进有组织的编程实现方法。下面,让我们从Web开发人员的角度来解读MVC的不同组件。

从Web开发者的视角来解读MVC架构菜鸟知识_架构基础入门

首先,让我们来看看有哪些使用到了MVC的流行Web框架:

  • Ruby on Rails (Ruby)
  • Express (JS)
  • Backbone (JS)
  • Angular (JS)
  • Laravel (PHP)
  • Zend (PHP)
  • Codeigniter (PHP)
  • Django (Python)
  • Flask (Python)

接着,我们重点来讨论Ruby on Rails和Codeigniter(PHP)。这两个框架在它们的文件结构中有着不同的文件夹,也就是所谓的模型、视图和控制器。虽然类似并借用了Django for Python的某些概念,但是这两个框架实际上并没有严格的文件夹结构。

此类框架的另一个特点是:同一个框架可能会将其应用程序放置在控制器中,然后将另一部分放置在模型中。因此不少Web开发人员认为MVC架构略显混乱,甚至毫无固定章法可循。不过我个人认为:用户能够采用多种方式来创建MVC架构,正是其亮点与灵活性所在。

下面,我们正式从Web开发者的角度为大家解读MVC的三个组件:模型、视图和控制器。

模型

由于模型部件负责获取和操作数据,因此它一般属于应用程序的“大脑”。通常情况下,它与MySQL之类的关系型数据库,以及MongoDB之类的NoSQL数据库进行交互。不过这并不重要,在支持多种数据库的不同框架中,模型的代码能够一直保持相同。

在实际应用中,我们只需要修改数据库的驱动程序便可,而不必知晓与之协作的数据库类型。例如:您完全可以让自己的模型与JSON文件进行交互,并从中提取数据。而这个简单的JSON文件甚至都不算是一个数据库。

模型不但能够负责诸如SELECT、INSERT、UPDATE和DELETE之类的查询操作,还能够与控制器进行通信。在大多数情况下,控制器可以通过模型来请求数据,并且由控制器来更新视图。不过,通过某些框架,模型也可以直接去更新视图。当然,这显然增加了MVC的复杂性。可见,不同的框架有着截然不同的实现方式。

视图

就视图而言,顾名思义它与应用程序的实际视图有关,也就是我们常说的用户界面。它负责面向用户的显示,以及让用户如何与应用程序进行交互。

因此,视图通常包括:HTML、CSS、以及来自控制器的各种动态值。在应用运行时,控制器会与视图、以及模型保持通信。同样,根据您所选用的框架不同,具体的模板引擎也可能会有所差异。

此处的“模板引擎”是指:某个允许动态数据的工具。如果我们使用的是直接的HTML,那么就不可能有各种输出变量,也无法选用if语句之类的逻辑。但是如果使用了模板引擎,那么我们就可以在视图中、或者是在模板中正确地处理此类动态变量了。

因此,模板引擎的典型示例包括:Handlebars.js(https://handlebarsjs.com/)与Dust.js(https://www.dustjs.com/)。对于Ruby on Rails而言,我们可以使用嵌入式的ERB(https://ruby-doc.org/stdlib/libdoc/erb/rdoc/ERB.html)。而对于Ruby语言,我们也可以使用Haml(http://haml.info/)和针对Python的Flask(http://flask.pocoo.org/)。当然,我们还有其他的选项,比如说JavaScript。

控制器

最后是控制器,它与用户的输入有关。例如:用户在访问页面时点击某个链接,触发了一个GET请求;或者是以提交表单的形式,发送一个POST请求;当然我们也可以发出删除、或提出更新等类型的请求。由于这些动作无法直接从浏览器中生成,因此您只能自行产生一个GET或POST,或者是通过内置在某个框架中的HTTP客户端,来达到该目的。

在此,控制器充当的是模型与视图之间的中间人角色。控制器需要通过模型从数据库中获取某些数据,而控制器在获取到相关数据之后,通过加载视图的方式,将该数据传递给它。接着,模板引擎接管后续的“任务”,实现输出变量之类的逻辑事务。

当然,控制器也可以在不传递数据的情况下加载某个视图。而此处需要有一个带有HTML和CSS的纯Web页面,就不是真实的模板逻辑。

下面是一个非常简单的例子(或称流程图)。

从Web开发者的视角来解读MVC架构菜鸟知识_架构基础入门

如上图所示,用户可以通过浏览器看到应用程序的视图。

首先,应用程序可以将他们的输入作为某种请求提交给所谓的“路由器”。而且这些请求正是用户通过点击某个链接,所产生并触发的某条路径需求。

接着,“路由器”开始调用基于该路由的特定控制器方法。因此,如果需要使用或获取一些数据的话,控制器需要与模型进行交互,而该模型也会与后台的数据库进行交互。

然后,一旦控制器获得了返回数据,它就需要加载一个视图。而具体的操作过程是:它将数据发送到视图,并由模板引擎来进行处理。

最后,一旦后台操作完成,控制器将把视图发送回浏览器,以供用户查看。

结论

综上所述,我们可以这样来理解MVC架构:模型是某种数据结构,控制器是流量控制器的一种形式,而视图则是用户看到并与之交互的部分。大家各司其职,让程序分工明确、条理清楚。

海计划公众号
(0)
上一篇 2020/03/29 01:43
下一篇 2020/03/29 01:43

您可能感兴趣的内容

  • 移动端视频h5表现问题汇总小白知识_视频使用帮助

    1. 同屏播放视频

    2020/03/31
  • Js优化条件判断语句小白攻略_语句入门攻略

    一、简单逻辑常用判断1.if(a为真){a=a
    }else{a=b
    }可写成:a = a || b2.if(a==b){a=c
    }else{a=d
    }可写成:a = (a==b) ? c : d3.fruit: 0 //0=苹果,1=梨子,2=桔子,3=柠檬,4=芒果…var _f = [‘苹果’,’梨子’,’桔子’,’柠檬’,’芒果’];
    shuigu

    2020/03/24
  • lerna小白攻略_一款多项目多模块的管理工具

    lerna小白攻略 官方网址:https://lernajs.io GitHub:https://github.com/lerna/lerna 简介描述:一款多项目多模块的管理工具…

    2020/03/06
  • Web前端开发需要掌握了解的工具、技术小白知识_工具使用帮助

    Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要。为了使得Web开发人员能够更加专注于业务层面的开发,市场上涌现了各种各样的Web开发工具,灵活运用这些工具就能使得你的开发效率大幅提升,实现事半功倍。1.Web应用框架这些软件是专门设计来帮助网站开发,并使创建

    2020/03/23
  • 前端工程师也要掌握的几种文件路径知识菜鸟指南_文件小白入门

    前言之前在做webpack配置时候多次用到路径相关内容,最近在写项目的时候,有一个文件需要上传到阿里云oss的功能,同时本地服务器也需要保留一个文件备份。多次用到了文件路径相关内容以及Node核心API的path模块,所以系统的学习了一下,整理了这篇文章。node中的路径分类node中的路径大致分5类,dirname,filename,process.cwd

    2020/03/26
  • 浅谈webpack优化入门指南_webpack入门基础教程

    由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少,脚手架基本上已经为我们做好了相关的开发准备,但是当我们想要做一些定制化的优化操作时,对webpack的优化也需要有一定的了解,否则无从下手,接

    2020/04/03
  • javascript有加密算法吗?使用教程_加密零基础入门

    作为前端,数据提交到后台之前,重要的数据要进行加密一下,虽然已经有 https 等技术,但是增加一道前端的加密还是相对更安全的。JavaScript中是有加密算法的,下面介绍几种JavaScript中的加密算法。1、base64加密是一种用64个字符来表示而已二进制数据的方法。在页面中引入base64.js文件,调用方法为:
    <

    2020/03/22
  • 前端乱炖小白入门前端乱炖是最专业的前端知识平台,汇集国内大部分前端开发人员的前端花名册,最精彩的原创文章专栏,最专业的问答平台,最火热的话题频道,最丰富的线下线上活动。

    前端乱炖基础入门 官方网址:http://www.html-js.com/ 简介描述:前端乱炖是最专业的前端知识平台,汇集国内大部分前端开发人员的前端花名册,最精彩的原创文章专栏,…

    2020/03/05
  • 缓存一致性的设计入门知识_缓存使用教程

    对数据库的热数据进行缓存是一种常见方案,但是如何保证缓存的数据和数据库的数据一致性呢?本文将进行详细的探讨。常见的设计有如下三种:一、先更新数据库再更新缓存数据库有对应操作的时候,则操作对应的缓存,即数据库插入,则缓存插入;数据库更新缓存更新;数据库删除,缓存删除。此种方案常见于缓存的数据比较简单,不需要复杂计算的过程中。1.1 优点缓存不会miss, 命中

    2020/03/29
  • Standard基础指南用于管理JavaScript 代码规范

    Standard基础入门 官方网址:https://standardjs.com/ GitHub:https://github.com/standard/standard 简介描述…

    2020/03/05
  • Js中函数的5个高级技巧菜鸟攻略_函数指南教程

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此。本文将深入介绍函数的5个高级技巧。作用域安全的构造函数构造函数其实就是一个使用new操作符调用的函数function Person(name,age,job){this.name=name; this.age=age;

    2020/03/20
  • 快速了解 mpvue 开发小程序使用指南_mpvue小白攻略

    一、概念mpvue是 美团修改了 Vue.js的 runtime和 compiler使其可以运行在小程序环境中,从而引入了整套 Vue.js开发体验的小程序框架。二、优化细节1、实例生命周期不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子

    2020/03/20
  • 程序员与性生活小白指南_程序员小白帮助

    作者丨四川熊猫仔https://blog.csdn.net/B9Q8e64lO6mm/article/details/78849012?utm_source=copy在朋友圈看到了有人分享了一个知乎,就去搜来了原文「优秀的女生是没有性生活的」看,觉得好有意思,链接我就不贴了,大家可以自己搜来看。结合着这个套路仿写了一个「优秀的程序员是没有性生活的」致敬原文。

    2020/04/03
  • mpvue开发微信小程序基础知识指南教程_小程序入门基础知识

    一、mpvue简介mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。 二、mpvue快速入门① 通过脚手架引入m

    2020/03/26
  • 操作系统和Web服务器那点事儿入门基础教程_服务器基础指南

    操作系统老大又一个进程启动了,操作系统老大叹了一口气,毕竟自己的肩头又多了一份责任。让人烦恼的是,新来的家伙们很无知,几乎就是一张白纸。有些老实本分的会按照自己的规矩来做事,有些刺头儿喜欢问这问那,时不时还想搞点非法的访问,想访问别的进程的地址空间,甚至想访问内核的代码和数据! 这时候,我只有把他kill掉祭天,留下一个core dump的尸体让码农们去分析

    2020/04/05
  • git 高级用法小抄入门基础知识_git小白教程

    如果你觉得 git 很迷惑人,那么这份小抄正是为你准备的!请注意我有意跳过了 git commit、git pull/push 之类的基本命令,这份小抄的主题是 git 的一些「高级」用法。导航 —— 跳到之前的分支git checkout -查看历史# 每个提交在一行内显示
    git log –oneline# 在所有提交日志中搜索包含「homepage」

    2020/03/20