Model、View和Controller，你都了解吗？_mvc模式中负责管理应用程序业务数据的模块是-CSDN博客

本文链接：https://blog.csdn.net/weixin_42554191/article/details/142798882

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

MVC（Model-View-Controller）是一种软件设计模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式被广泛应用于前端和后端开发，尤其在网页应用程序开发中。

MVC 的组成部分

模型（Model）
- 定义：模型是应用程序的核心部分，负责管理应用的数据、逻辑和规则。它直接与数据库等数据源交互。
- 职责：
  - 处理数据的获取、存储和持久化。
  - 定义数据的结构和关联。
  - 包含业务逻辑和数据验证。
视图（View）
- 定义：视图是用户界面的表现层，负责呈现数据给用户。它用于显示模型的数据，并在用户请求时提供更新的视图。
- 职责：
  - 显示模型中的数据（通常是通过模板或 UI 组件）。
  - 监听用户的输入并将这些输入传递给控制器。
  - 更新视图以反映模型的数据变更。
控制器（Controller）
- 定义：控制器是模型和视图之间的桥梁。它接收用户的输入并调用模型和视图来完成用户的需求。
- 职责：
  - 处理用户请求（例如，通过按钮点击、表单提交等）。
  - 使用模型来获取或更新数据。
  - 将数据传递给视图以更新界面。

MVC 的工作原理

MVC 的工作流程如下：

用户交互：用户通过视图（UI）进行某种操作（例如点击按钮或填写表单）。
控制器处理请求：视图将用户的输入传递给控制器。控制器会根据请求的类型调用相应的模型方法。
模型操作：模型接收来自控制器的请求，执行相应的业务逻辑和数据处理，比如从数据库中获取数据或修改数据。
更新视图：模型处理完数据后，控制器会选择相应的视图，并将处理结果（通常是数据）传递给它。
展示数据：视图使用传递的数据来更新页面，并呈现给用户。

例子

假设我们有一个简单的图书管理系统，用户可以查看和添加书籍。

模型（Model）：

class BookModel {
    constructor() {
        this.books = [];
    }
    
    addBook(book) {
        this.books.push(book);
    }
    
    getBooks() {
        return this.books;
    }
}

视图（View）：

class BookView {
    displayBooks(books) {
        // 显示书籍信息的代码
        books.forEach(book => console.log(book));
    }
    
    getNewBookInput() {
        // 获取用户输入的新书籍信息
        return prompt("Enter book title:");
    }
}

控制器（Controller）：

class BookController {
    constructor(model, view) {
        this.model = model;
        this.view = view;
    }
    
    addBook() {
        const title = this.view.getNewBookInput();
        this.model.addBook(title);
        this.view.displayBooks(this.model.getBooks());
    }
}

使用 MVC：

const model = new BookModel();
const view = new BookView();
const controller = new BookController(model, view);

controller.addBook(); // 用户输入书籍信息并查看书籍列表