MVC-架构

简介: MVC-架构

一、简介

1.1 由谁创建

MVC架构模式最早由Trygve Reenskaug在20世纪70年代中期提出。当时,他是斯堪的纳维亚计算机公司(Scandinavian Computer Systems)的一名研究员和开发人员。他在1979年的论文《模型-视图-控制器:用户界面的分割和重组》("Models-Views-Controllers: User Interface Architectures for Object-Oriented Applications")中详细描述了MVC的概念和思想。MVC模式随后在Smalltalk编程语言中得到了广泛应用,并逐渐成为各种软件开发领域的主流设计模式。

1.2 发展

MVC架构自其创造以来已经经历了一些演变和发展。以下是MVC架构的一些主要发展方向:

1. 变体架构:基于MVC架构的成功,产生了许多变体架构,如MVVM(Model-View-ViewModel)、MVP(Model-View-Presenter)和MVW(Model-View-Whatever)等。这些变体根据特定的需求和技术环境进行了一些调整和改进,以满足不同应用程序的要求。

2. 前端框架和库:随着Web应用程序的兴起,各种前端框架和库如Angular、React和Vue.js等的出现,为MVC架构的实现提供了更好的支持和工具。它们通过引入组件化开发、虚拟DOM、单向数据流等概念,使得前端开发更加高效和灵活。

3. RESTful架构:MVC架构与RESTful架构相互配合,形成了一种常见的Web应用程序设计方式。模型部分可以与RESTful API进行交互,通过HTTP协议进行数据传输,实现前后端分离和可扩展的架构。

4. 响应式架构:随着移动设备的普及和用户体验的要求提高,出现了响应式架构的概念。响应式架构将MVC模式与自适应布局、弹性设计和移动优化等技术相结合,以实现在不同设备和屏幕尺寸上提供一致而灵活的用户体验。

5. 后端架构:除了前端应用程序,MVC架构在后端应用程序中也得到了广泛应用。许多后端框架和技术,如Spring MVC、Ruby on Rails和Django等,都采用了MVC的设计思想,并提供了更高级的抽象和工具以简化后端开发。

总的来说,MVC架构经历了不断演变和适应不同技术环境的过程。它仍然是一种广泛应用于各种应用程序类型的强大架构模式,并继续为软件开发者提供一种组织代码的灵活和可维护的方式。

1.3 是什么

MVC架构是一种软件设计模式,用于将应用程序分割成三个关键组件:模型(Model)、视图(View)和控制器(Controller),每个组件都有不同的职责和功能。MVC的目标是实现应用程序的模块化、灵活性和可维护性。

以下是MVC架构中各个组件的职责:

1. 模型(Model):模型表示应用程序的数据和业务逻辑。它负责管理数据的状态、结构和操作。模型通常包括数据存储、数据访问、数据验证和应用程序的核心业务规则。模型可以独立于视图和控制器进行测试、修改和重用。

2. 视图(View):视图是用户界面的可视化部分,负责向用户展示数据和接收用户的输入。视图从模型中获取数据来显示,并从控制器接收用户的输入。视图通常包括用户界面的布局、样式和交互元素。视图应该尽量保持简单和无状态,仅关注于数据的展示。

3. 控制器(Controller):控制器是模型和视图之间的中介。它接收来自视图的用户输入,并根据输入更新模型或调整视图。控制器负责协调视图和模型之间的交互,确保视图和模型保持同步。它可以处理业务逻辑、数据转换、事件处理等任务。

MVC架构的优点包括代码的分层清晰、模块化程度高、易于测试和维护、不同组件间的解耦等。它已广泛应用于各种软件开发领域,包括Web应用程序、桌面应用程序和移动应用程序等。

1.4 作用

MVC架构在软件开发中具有多种重要作用:

1. 分离关注点(Separation of Concerns):MVC将应用程序分解为三个独立的组件,每个组件负责不同的职责和任务。这种分离使得开发人员能够更好地管理和组织代码,减少了不同组件之间的耦合性。这样,开发人员可以更容易地专注于特定的任务,从而提高代码的可读性、可维护性和可重用性。

2. 可替换性和可扩展性:由于MVC组件之间的松散耦合,可以更容易地替换任何一个组件,而不会影响其他组件的功能。这种可替换性使得代码更加灵活、可扩展和可测试。例如,在需要更改数据存储或更改用户界面时,可以更容易地替换模型或视图而无需重新编写整个应用程序。

3. 提高代码的可重用性:通过将核心业务逻辑和数据处理从视图中分离出来,可以使模型和控制器成为可重用的组件。这样,可以在不同的应用程序中共享模型和控制器,从而减少代码的重复编写,提高开发效率。

4. 支持并行开发:MVC架构允许开发团队并行工作在不同的组件上,因为模型、视图和控制器之间的接口和职责已经明确定义。这样,不同团队成员可以独立地开发和测试不同的组件,从而加快整个开发过程。

5. 支持前后端分离:MVC架构允许前端和后端开发分离,通过定义清晰的接口和协议进行通信。这种前后端分离的方式可以提高开发效率和灵活性,并且使得前端和后端团队能够独立开发和维护各自的部分。

总之,MVC架构通过分离关注点、提高代码的可重用性和可扩展性,以及支持并行开发等方式,提供了一种优秀的软件设计模式,使得应用程序开发更加灵活、可维护和可扩展。

二、使用

2.1 思维图

2.2 流程

在Eclipse中使用MVC架构来优化JSP页面的增删改查操作的流程如下:

1. 创建模型(Model)

  - 在Eclipse中创建一个Java类,例如UserModel,用于管理用户数据。

  - UserModel类可以包含与用户数据相关的方法,例如添加用户、删除用户、更新用户等。

2. 创建控制器(Controller)

  - 在Eclipse中创建一个Java类,例如UserController,作为控制器。

  - UserController类负责接收用户请求,并调用模型中的方法来处理这些请求。

  - 使用@WebServlet注解配置UserController类以便访问该控制器。

3. 创建JSP视图(View)

  - 在Eclipse中创建一个JSP页面,例如user.jsp,用于显示用户界面和接收用户输入。

  - 在user.jsp页面中,使用HTML和JSTL标签来展示用户信息并提供表单用于接收用户输入。

4. 绑定模型和视图

  - 在UserController类中创建一个UserModel对象,与模型进行绑定。

  - 通过调用UserModel对象的方法,从模型中获取用户数据或执行增删改查操作,并将结果传递到JSP视图中进行展示。

5. 实现增删改查功能

  - 在UserController类中实现相应的方法,例如addUser、deleteUser、updateUser等,用于处理增删改查操作。

  - 这些方法中,调用UserModel对象的方法来执行相应的操作,并将结果存储到HttpServletRequest对象中供JSP页面使用。

6. 在JSP页面中展示结果

  - 在user.jsp页面中,通过调用JSTL标签或使用EL表达式,从HttpServletRequest对象中获取控制器传递过来的数据,并将其展示给用户。

通过上述步骤,你可以在Eclipse中使用MVC架构来优化JSP页面的增删改查操作。控制器负责接收用户请求并调用模型处理数据,模型负责处理数据操作,视图负责展示用户界面。这种分离架构使得代码结构更清晰、模块化,提高了代码的复用性和可维护性。

三、实例

3.1 创建模型(Model)

假设已有Book实体,而该类有Book(书籍)实体对象的增删改查方法

package com.CloudJun.entity;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.CloudJun.framework.Action;
public class BookAction extends Action{
  public void See(HttpServletRequest request, HttpServletResponse response) {
    System.out.println("book(书籍)Action的查看(See)方法");
  }
  public void Upda(HttpServletRequest request, HttpServletResponse response) {
    System.out.println("book(书籍)Action的修改(Upda)方法");
  }
  public void Del(HttpServletRequest request, HttpServletResponse response) {
    System.out.println("book(书籍)Action的删除(Del)方法");
  }
  public void Add(HttpServletRequest request, HttpServletResponse response) {
    System.out.println("book(书籍)Action的增加(Add)方法");
  }
}

3.2 创建控制器(Controller)

Action 处理请求

package com.CloudJun.framework;
import java.lang.reflect.Method;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * @author Cloud.Jun
 * @com.CloudJun.framework
 * @Action(说明):处理浏览器发过来的请求类
 */
public class Action {
  public void execut(HttpServletRequest request, HttpServletResponse response) throws Exception {
    //根据JSP页面传递的值
    String method = request.getParameter("method");
    //通过反射类类方法的方法进行增删改查
    try {
      Method m = this.getClass().getDeclaredMethod(method, HttpServletRequest.class,HttpServletResponse.class);
      m.setAccessible(true);
      m.invoke(this,request,response);
    } catch (Exception e) {
      e.printStackTrace();
    } 
  }
}

ControllerServlet 控制器

package com.CloudJun.framework;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.CloudJun.entity.BookAction;
@WebServlet("*.do")
public class ControllerServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  Map<String, Action> actionMap = new  HashMap<String, Action>();
  @Override
  public void init() throws ServletException {
    actionMap.put("/Book", new BookAction());
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    doPost(request, response);
  }
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String uri = request.getRequestURI();
    uri = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
    Action action = actionMap.get(uri);
    try {
      action.execut(request, response);
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

3.3 创建JSP视图(View)

JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>书籍的方法功能--MVC优化</h3><hr>
<a href="Book.do?method=Add">增加</a>
<a href="Book.do?method=Del">删除</a>
<a href="Book.do?method=Upda">修改</a>
<a href="Book.do?method=See">查询</a>
</body>
</html>

3.4测试结果

四、MVC

4.1 模型(Model)

模型(Model)在MVC架构中扮演了关键的角色,它代表应用程序的数据和业务逻辑。模型负责管理数据、执行操作和提供接口供其他组件使用。

模型的作用和理解如下:

1. 数据管理:模型负责管理应用程序的数据,包括数据的获取、存储、处理和操作。它封装了业务逻辑和数据操作的细节,提供了统一的接口供其他组件进行访问。

2. 业务逻辑:模型定义和实现应用程序的业务逻辑。它包含了与数据相关的操作,例如数据的增加、删除、修改和查询,以及其他与业务流程有关的操作。通过模型,可以将复杂的业务逻辑进行封装和管理,使得代码更加清晰、模块化和可维护。

3. 数据操作接口:模型提供了一组接口供其他组件(例如控制器和视图)进行数据操作。这些接口定义了可以对数据进行的操作和访问方法,例如获取数据、保存数据、更新数据等。其他组件可以通过模型的接口来与数据进行交互,实现数据的读取、修改和展示

4. 数据传递和通知:模型充当了数据传递和通知的角色。当模型中的数据发生变化时,它可以通知相关的组件进行相应的更新和响应。这样能够在数据改变时及时更新展示数据的视图,并将变化通知到其他组件,实现数据的同步和一致性。

理解模型的重要性是设计和实现一个可维护、可扩展的应用程序的关键。模型将数据和业务逻辑进行封装,使得其他组件可以直接利用数据和进行业务操作,同时提供了对数据的抽象和封装,保护了数据的完整性和安全性。通过模型,可以将应用程序的复杂性分解为各个模块,提高代码的可读性和可维护性,同时也方便进行单元测试和模块化开发

4.2 控制器(Controller)

在MVC架构中,控制器(Controller)是负责处理用户交互和协调模型(Model)与视图(View)之间交互的组件。它起到了连接模型和视图的桥梁作用

控制器的作用和理解如下:

1. 用户交互处理:控制器负责处理用户的输入和交互请求。它接收来自用户的请求,并根据请求的类型和参数来调用相应的模型操作,执行特定的业务逻辑。

2. 协调模型和视图:控制器将用户请求的处理结果从模型中获取,并将其传递给相应的视图用于展示。控制器通过模型来获取数据,并将数据传递给视图进行渲染,以实现数据的展示和更新。

3. 路由和分发:控制器负责将用户请求路由到相应的处理逻辑。根据用户的请求类型和参数,控制器决定调用哪个模型方法来处理请求,并将处理结果传递给适当的视图用于展示。

4. 业务逻辑协调:控制器负责协调模型和视图之间的业务逻辑。它可以根据需要调用不同的模型方法来满足特定的业务需求,并将处理结果通过视图展示给用户。

5. 请求参数处理:控制器从用户的请求中提取参数,并将参数传递给模型进行处理。它可以对请求参数进行验证、转换和处理,以确保数据的完整性和正确性。

6. 用户输入验证:控制器可以对用户输入的数据进行验证和验证错误处理。它可以根据业务逻辑对用户输入的数据进行验证,并反馈错误信息给用户,以帮助用户正确输入数据。

通过控制器,模型和视图之间的交互得以协调和控制,实现了数据的流动和业务逻辑的处理。控制器作为MVC架构中的核心组件之一,起到了中介和调度的作用,使得模型和视图可以独立于彼此进行开发、测试和维护,并保持了代码的可读性和可维护性。

4.3 视图(View)

在MVC架构中,视图(View)是展示数据并与用户交互的组件。它是用户界面的呈现层,负责将模型的数据以可视化的方式展示给用户,并接收用户的输入。

视图的作用和理解如下:

1. 数据展示:视图负责将模型的数据以可视化的形式展示给用户。它可以通过界面元素(如文本、图像、表格)来呈现数据,以供用户观看、理解和使用

2. 用户交互:视图提供用户与应用程序进行交互的界面。通过视图,用户可以输入和修改数据,并触发相应的操作。视图接收用户的输入,并将其传递给控制器进行处理

3. 用户反馈:视图可以向用户提供反馈信息,以指示操作的结果或状态。例如,成功保存数据的消息、错误提示、加载中的动画等,使用户清楚了解操作的执行情况。

4. 事件处理:视图可以监测用户的操作和事件,并触发相应的事件处理。例如,按钮的点击事件、表单的提交事件等。视图将这些事件传递给控制器,由控制器进行业务处理。

5. 模板渲染:视图可以使用模板引擎来渲染模型的数据。它可以通过模板语法将数据动态地插入到预定义的模板中,生成最终的界面展示给用户。

6. UI布局和样式:视图负责决定用户界面的布局和样式。它确定了界面元素的位置、大小、颜色、字体等外观样式,以及整个用户界面的组织结构

通过视图,用户可以直接与应用程序进行交互,并看到数据的实时更新。视图将用户的输入传递给控制器进行处理,然后接收控制器返回的数据并展示给用户。视图的设计应该注重用户体验,保证界面简洁直观、易于操作,以提供良好的用户交互和界面反馈。

总而言之,视图在MVC架构中负责数据的展示和用户交互,它是用户界面的呈现层,为用户提供直观、友好的界面,并与控制器和模型进行交互,实现数据的展示、输入和反馈。视图角色的清晰定义和分离,使得界面和业务逻辑的开发、测试和维护可以独立进行,增加了代码的可读性和可维护性

给我们带来什么

学习MVC架构可以给你带来以下收获:

1. 清晰的架构思想:MVC架构提供了一种清晰的架构思想和设计模式,使你能更好地组织和管理代码。你将学会将应用程序分解为模型、视图和控制器,并定义它们之间的关系,这种分层结构可以使你的代码更加模块化、可扩展和易于维护。

2. 高内聚、低耦合的代码:在MVC架构中,模型、视图和控制器是相互独立的组件,它们之间通过定义的接口进行交互。这样可以实现代码的高内聚,每个组件都负责自己的领域,不与其他组件直接耦合。这种低耦合的设计可以提高代码的可重用性和可测试性,并简化修改和扩展的过程。

3. 分工合作与团队协作:MVC架构明确划分了不同组件的责任和角色,使得多人开发团队能够更加高效地合作。每个成员可以专注于自己负责的组件,而不会相互干扰。同时,MVC架构也提供了清晰的接口和约定,使得不同组件的集成更容易和无缝。

4. 架构的可扩展性和维护性:MVC架构的分层结构和完善的接口定义使得应用程序具备良好的可扩展性和维护性。当需求变化时,可以针对性地修改模型、视图或控制器中的部分,而无需对整个应用程序进行重构。这样可以降低修改的成本和风险,并使应用程序更具可持续性和可维护性。

5. 提升自身的技术能力:学习并应用MVC架构可以使你深入理解软件设计原则和设计模式,提升你的设计能力和代码质量。你将学会如何组织和管理代码、处理复杂的业务逻辑,并在实践中逐渐形成自己的设计思想和风格。

总体来说,学习MVC架构将带给你更好的代码组织结构、高效的团队协作方式、良好的可扩展性和维护性,以及进一步提升自身的技术能力。这些收获将使你能够更好地应对复杂的软件开发项目,并提供高质量的应用程序给用户。

目录
相关文章
|
6月前
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
141 12
|
1月前
|
存储 前端开发 调度
Flux 与传统的 MVC 架构模式区别
Flux是一种用于构建用户界面的架构模式,与传统的MVC架构不同,它采用单向数据流,通过Dispatcher统一管理数据的分发,Store负责存储数据和业务逻辑,View只负责展示数据,使得应用状态更加可预测和易于维护。
|
4月前
|
设计模式 前端开发 数据库
哇塞!Rails 的 MVC 架构也太牛了吧!快来看看这令人惊叹的编程魔法,开启新世界大门!
【8月更文挑战第31天】《Rails中的MVC架构解析》介绍了Ruby on Rails框架核心的MVC设计模式,通过模型(Model)、视图(View)和控制器(Controller)三部分分离应用逻辑,利用Active Record进行数据库操作,ERB模板渲染视图,以及控制器处理用户请求与业务逻辑,使代码更易维护和扩展,提升团队开发效率。
83 0
|
1月前
|
存储 前端开发 数据可视化
在实际项目中,如何选择使用 Flux 架构或传统的 MVC 架构
在实际项目中选择使用Flux架构或传统MVC架构时,需考虑项目复杂度、团队熟悉度和性能需求。Flux适合大型、高并发应用,MVC则适用于中小型、逻辑简单的项目。
|
3月前
|
设计模式 前端开发 数据库
理解mvc架构
mvc架构
34 4
|
4月前
|
设计模式 存储 前端开发
MVC革命:如何用一个设计模式重塑你的应用架构,让代码重构变得戏剧性地简单!
【8月更文挑战第22天】自定义MVC(Model-View-Controller)设计模式将应用分为模型、视图和控制器三个核心组件,实现关注点分离,提升代码可维护性和扩展性。模型管理数据和业务逻辑,视图负责数据显示与用户交互,控制器处理用户输入并协调模型与视图。通过示例代码展示了基本的MVC框架实现,可根据需求扩展定制。MVC模式灵活性强,支持单元测试与多人协作,但需注意避免控制器过度复杂化。
48 1
|
4月前
|
开发者 前端开发 Java
架构模式的诗与远方:如何在MVC的田野上,用Struts 2编织Web开发的新篇章
【8月更文挑战第31天】架构模式是软件开发的核心概念,MVC(Model-View-Controller)通过清晰的分层和职责分离,成为广泛采用的模式。随着业务需求的复杂化,Struts 2框架应运而生,继承MVC优点并引入更多功能。本文探讨从MVC到Struts 2的演进,强调架构模式的重要性。MVC将应用程序分为模型、视图和控制器三部分,提高模块化和可维护性。
50 0
|
4月前
|
存储 前端开发 数据库
神秘编程世界惊现强大架构!Web2py 的 MVC 究竟隐藏着怎样的神奇魔力?带你探索实际应用之谜!
【8月更文挑战第31天】在现代 Web 开发中,MVC(Model-View-Controller)架构被广泛应用,将应用程序分为模型、视图和控制器三个部分,有助于提高代码的可维护性、可扩展性和可测试性。Web2py 是一个采用 MVC 架构的 Python Web 框架,其中模型处理数据和业务逻辑,视图负责呈现数据给用户,控制器则协调模型和视图之间的交互。
43 0
|
5月前
|
存储 前端开发 算法
MVC(Model-View-Controller)架构
MVC架构帮助开发者构建清晰、可维护和可扩展的Web应用程序。
46 2
|
6月前
|
设计模式 前端开发 Java
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
98 1