站点工具

用户工具


「每日一题」MVC 是什么?

面试时被问到的话,会不会一脸懵逼呢?

后端的 MVC

最开始,前端是没有 MVC 的,MVC 是后端的一个设计模式,所以我们先从后端开始讲。

绝大部分后端服务器,都做一件事情:接收用户发来的请求,返回一段响应内容(内容可以是 HTML、CSS、JS 或者图片等,我们下面主要讨论 HTML)

如下图:

好,既然所有的服务器都要做「接收请求,响应HTML」这件事,是不是就该把这件事总结总结?有些有经验的程序员就开始总结了。

假设我们做的是一个博客网站。

一般来说,有经验的后端会首先「设计 URL」

用户请求 /users/1 可以查看id 为 1 的用户的信息

用户请求 /articles/1 可以查看 id 为 1 的博客文章

简单起见,URL 就先定这两个。定好 URL,再做 MVC 之前,有一个非常重要的东西——路由(Router)。对就是路由器的路由,跟路由器的作用也很相似。

Router 的作用就是让每个 URL 都有一段代码来负责响应。

伪代码如下:

if url == /users/userId
  then showUser(userId)
if url is /articles/articleId
  then showArticle(articleId)

意思就是,当 url 是 /users/userId 的时候调用 showUser,当 url 是 /articles/articleId 的时候,调用 showArticle。

路由的使命就结束了,接下来的工作交给 showUser 和 showArticle。

Controller

上面说的 showUser 和 showArticle 函数就是 Controller(注1)。Controller 负责做什么呢?

先看伪代码:

function showUser (userId)
  user = UserModel.find(userId) // 从数据库获取 user 数据
  content = readFile('user.html') // 获取 user.html 内容
  response = render(content, user) // 将 user 数据填入 HTML 中
  return response // 返回给用户
function showActicle (articleId)
  article = ArticleModel.find(articleId) // 从数据库获取 article 数据
  content = readFile('content.html') // 获取 article.html 内容
  response = render(content, article) // 将 article 数据填入 HTML 中
  return response // 返回给用户

Controller 的作用包括:

  1. 获取数据
  2. 获取 HTML 内容
  3. 将数据填入 HTML
  4. 返回给用户

可能你现在还没理解 Controller,不要紧,我们先看看 Model,也就是上面代码中的 UserModel 和 ArticleModel。

Model

/users/1 页面要「获取用户数据」,然后放到页面里。

/articles/1 页面要「获取文章数据」,然后放到页面里。

也就是说,所有页面都会从数据库读数据(或者往数据库里面写数据)

那么老司机就想:是不是可以把这个行为固定下来,省的每次都要想怎么写。

每个数据都对应一个 Model 对象,Model.find(id) 可以帮你从 MySQL 里取数据,model.save() 可以帮你存数据到 MySQL。

Model 的作用就是:将所有纯数据的操作放到一个类上。

UserModel.find = function (id)
  sql = 'select * from users where id = {id}'
  result = run(sql)
  return result

这样一来,Controller 里就可以直接使用 UserModel.find(id) 来查找 user 了。

View

上面的代码为什么没有 View 呢?

有的,user.html 和 article.html 就是 View。显然,几乎所有 URL 都对应一个 View(HTML)

View 负责的就是视图,或者说,View 负责展示、负责外貌、负责颜值。

<h1>{{ user.name }}</h1>
 
<img src={{ user.picture }}>

这就是一个 View(视图)。

再回头看 Controller

Controller 其实是联系 Model 和 View 的桥梁,Controller 拿到 Model,然后将 Model 放到 View 里。

最终,就有上面的图了。

以上,就是后端的 MVC 了,一定要记住 MVC 里面还有个 Router 哦。

下次讲前端 MVC。

注1:本文没有区分 Controller 和 Action。

饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com

本文作者:饥人谷方应杭老师

若愚 · 2023/02/09 13:31 · 每日一题_mvc_是什么.txt