MVC模式和MVVM模式

目录

一、MVC模式和MVVM模式

1. MVC模式

2. MVVM 模式

3.在Qt中的应用示例

4.总结

二、MVC与MVVM模式的共同点和区别

1.共同点

2.区别

3.交互流程

4.总结


MVC(Model-View-Controller)和MVVM(Model-View-ViewModel)是两种常见的软件设计模式,主要用于将用户界面(UI)与业务逻辑和数据分离,以提高代码的可维护性和可扩展性。

一、MVC模式和MVVM模式

1. MVC模式

核心思想:将应用程序分为三个核心组件,职责分离。

  • Model:管理数据和业务逻辑(如数据库操作、数据计算)。

  • View:负责界面显示,不处理业务逻辑。

  • Controller:接收用户输入(如按钮点击),协调 Model 和 View 的交互。

工作流程:

  1. 用户通过 View 触发事件(如点击按钮)。

  2. Controller 接收事件,调用 Model 修改数据。

  3. Model 更新数据后,通知 View 刷新界面(通过观察者模式或直接调用)。

  • 优点:职责清晰,适合复杂交互的应用。
  • 缺点:View 和 Controller 可能耦合较紧,难以独立测试。

2. MVVM 模式

核心思想:通过数据绑定实现 View 和 Model 的自动同步。

  • Model:同 MVC,管理数据。

  • View:负责界面显示,声明式定义 UI(如 QML)。

  • ViewModel:暴露数据属性和命令,作为 View 和 Model 的桥梁,处理业务逻辑。

工作流程:

  1. View 通过数据绑定(如 QML 的 property binding)直接关联 ViewModel 的属性。

  2. 用户操作 View(如输入文本)自动更新 ViewModel。

  3. ViewModel 修改 Model,Model 变化后通过通知机制(如信号)更新 ViewModel,再同步到 View。

  • 优点:View 和 ViewModel 解耦,适合数据驱动型 UI。
  • 缺点:数据绑定可能增加调试复杂度。

3.在Qt中的应用示例

示例1:Qt 中的MVC(使用QWidgets)

  • 场景:文件浏览器(显示文件夹结构)。

  • 代码结构:

    // Model: QFileSystemModel 提供文件系统数据
    QFileSystemModel *model = new QFileSystemModel;
    model->setRootPath(QDir::homePath());// View: QTreeView 和 QListView 显示数据
    QTreeView *treeView = new QTreeView;
    treeView->setModel(model);
    QListView *listView = new QListView;
    listView->setModel(model);// Controller: 自定义逻辑(例如双击文件打开)
    QObject::connect(treeView, &QTreeView::doubleClicked, [](const QModelIndex &index) {QString path = model->filePath(index);QDesktopServices::openUrl(QUrl::fromLocalFile(path));
    });
  • 说明:

    • Qt 的 Model/View 框架已内置 MVC 支持,但 Controller 通常由 View 的事件处理(如信号槽)实现。


示例2:Qt中的MVVM(使用QML + C++)

  • 场景:用户信息表单(输入姓名,实时显示欢迎语)。

  • 代码结构:

    // View: main.qml
    TextField {text: viewModel.userName  // 绑定 ViewModel 属性onTextChanged: viewModel.setUserName(text)
    }
    Text {text: "Hello, " + viewModel.userName  // 自动更新
    }
    // ViewModel: UserViewModel 类(继承 QObject)
    class UserViewModel : public QObject {Q_OBJECTQ_PROPERTY(QString userName READ userName WRITE setUserName NOTIFY userNameChanged)
    public:QString userName() const { return m_name; }void setUserName(const QString &name) {if (m_name != name) {m_name = name;emit userNameChanged();// 可选:更新 Model(如保存到数据库)}}
    signals:void userNameChanged();
    private:QString m_name;
    };// 在 C++ 中暴露 ViewModel 到 QML
    UserViewModel viewModel;
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("viewModel", &viewModel);
  • 说明:

    • QML 的 property binding 实现自动同步,ViewModel 通过 Q_PROPERTY 暴露数据。


4.总结

  • MVC:适合传统 QWidgets 应用,需手动连接信号槽(Controller 逻辑分散)。

  • MVVM:适合 QML 应用,利用数据绑定简化代码,ViewModel 集中管理状态。

  • Qt 特点:

    • Qt 的 Model/View 框架(如 QTableView + QSqlTableModel)是 MVC 的简化版。

    • MVVM 在 QML 中更自然,因为数据绑定是 QML 的核心特性。


  

二、MVC与MVVM模式的共同点和区别

1.共同点

  1. 关注点分离
  • 均将应用程序分为数据层(Model)、界面层(View)和逻辑层(Controller 或 ViewModel),实现职责解耦。
  1. 数据与界面分离
  • Model 独立管理数据逻辑,不依赖具体界面实现。
  1. 用户输入处理
  • 均需处理用户交互(如点击、输入),并更新数据和界面。
  1. 同步机制
  • 需要确保数据变化后界面及时更新(MVC 通过观察者模式,MVVM 通过数据绑定)。

2.区别

特性MVCMVVM
核心组件Model、View、ControllerModel、View、ViewModel
数据流方向单向:用户操作 → Controller → Model → View双向:View ↔ ViewModel ↔ Model(自动同步)
界面更新方式手动更新(需显式调用 View 刷新逻辑)自动更新(通过数据绑定)
适用场景复杂交互控制(如桌面应用)数据驱动型 UI(如动态表单、实时仪表盘)
耦合度View 和 Controller 可能耦合较紧View 和 ViewModel 完全解耦
典型框架Qt Widgets、Spring MVCQt QML、WPF、Vue.js

3.交互流程

1. MVC模式交互流程:

  1. 用户操作触发 View 的事件(如点击按钮)。

  2. Controller 接收事件,调用 Model 修改数据。

  3. Model 更新后通知 View 刷新界面(通过观察者模式或直接调用)。


2. MVVM交互流程:

  1. View 通过数据绑定直接关联 ViewModel 的属性(如 QML 的 text: viewModel.name)。

  2. 用户修改 View(如输入文本),自动更新 ViewModel。

  3. ViewModel 修改 Model,Model 变化后通过信号通知 ViewModel,触发 View 自动更新。


4.总结

  • 选择 MVC:
    适合需要精细控制交互逻辑的桌面应用(如复杂表单验证、多窗口管理)。

  • 选择 MVVM:
    适合数据驱动且界面频繁更新的场景(如实时监控、动态仪表盘)。

  • Qt 的灵活性:

    • 在 QWidgets 中,MVC 更常见,但需手动管理数据流。

    • 在 QML 中,MVVM 是自然选择,利用其声明式语法和数据绑定特性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.tpcf.cn/pingmian/70149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Numpy简易入门

1.1 认识Numpy数组对象 1.1.1 导入NumPy工具包 #导包并起别名为np import numpy as np1.1.2 创建一个三行五列的数组 data np.arange(15).reshap(3, 5)打印结果&#xff1a; 1.1.3 查询data类型 print(type(data))打印结果&#xff1a; <class numpy.ndarray> nda…

Java中的Spliterator与并行计算

在Java编程中&#xff0c;Spliterator是一个强大的接口&#xff0c;它为集合和数组等数据结构提供了并行处理的能力。Spliterator的设计目标是支持高效并行遍历&#xff0c;同时兼容传统的迭代器模式。本文将详细介绍Spliterator的使用方法&#xff0c;并通过实例展示其在并行计…

Jenkins 新建配置 Freestyle project 任务 六

Jenkins 新建配置 Freestyle project 任务 六 一、新建任务 在 Jenkins 界面 点击 New Item 点击 Apply 点击 Save 回到任务主界面 二、General 点击左侧 Configure Description&#xff1a;任务描述 勾选 Discard old builds Discard old builds&#xff1a;控制何时…

Linux CentOS 7部署Vulhub靶场

漏洞复现环境&#xff1a; 1、Linux操作系统中通过Docker部署的Vulhub靶场&#xff1a; docker docker-compose 2、Nmap扫描工具 一、部署靶场 1、安装Docker 1、下载docker yum install docker 安装完成&#xff0c;如下图&#xff1a; 2、开启docker服务 [rootlocalhost…

DeepSeek笔记(二):DeepSeek局域网访问

如果有多台电脑&#xff0c;可以通过远程访问&#xff0c;实现在局域网环境下多台电脑共享使用DeepSeek模型。在本笔记中&#xff0c;首先介绍设置局域网多台电脑访问DeepSeek-R1模型。 一、启动Ollama局域网访问 1.配置环境变量 此处本人的操作系统是Windows11&#xff0c;…

软件测试技术之跨平台的移动端UI自动化测试(上)

摘要&#xff1a;本文提出一种跨平台的UI自动化测试方案&#xff0c;一方面使用像素级的截图对比技术&#xff0c;解决传统UI自动化测试难以验证页面样式的问题&#xff1b;另一方面用统一部署在服务器端的JavaScript测试代码代替Android和iOS测试代码&#xff0c;大大提高编写…

MySQL深度剖析-InnoDB索引与B+树

1. 什么是B树&#xff1f; B 树是一种自平衡的多叉树&#xff0c;它是 B 树的一种变体。与 B 树不同&#xff0c;B 树的所有数据都存储在叶子节点&#xff0c;非叶子节点仅存储索引&#xff0c;且叶子节点之间通过双向链表相连。这种结构使得 B 树在范围查询和排序操作上具…

win11系统 Docker Desktop提示Docker Engine stopped解决全过程记录

DockerDesktop安装指南以及Windows下WSL2和 Hyper-V相关问题追查 【已解决】win10系统 Docker 提示Docker Engine stopped解决全过程记录 本篇文章主要记录Docker Desktop安装和使用时出现的问题及解决方法&#xff0c;以及后续使用夜神模拟器&#xff0c;关闭了Hyper-V时&am…

如何使用UniApp实现页面跳转和数据传递?

在 UniApp 中&#xff0c;页面跳转和数据传递是基本的功能&#xff0c;允许用户在应用中浏览不同的页面并传递必要的信息。以下是如何实现页面跳转和数据传递的详细步骤和示例。 一、页面跳转 UniApp 提供了几种方式来进行页面跳转&#xff0c;主要包括&#xff1a; uni.nav…

VSCode配合cline实现自动编程

VS Code是微软开发的代码编辑器&#xff0c;可以配合安装不同的插件&#xff0c;支持对不同语言、项目类型的开发。 &#xff08;1&#xff09;安装cline插件&#xff1a;在vscode扩展商店搜索cline&#xff0c;并安装&#xff1b; &#xff08;2&#xff09;选择不同的大模型…

Docker 镜像标签使用

写在前面 当使用命令 docker pull mysql 拉取镜像时&#xff0c;其实等价于如下命令 docker pull mysql:latest latest 是默认的标签&#xff0c;字面上理解为最新版本的镜像&#xff0c;实质上 latest 只是镜像的标签名称&#xff0c;跟具体某个版本号地位一样&#xff0c;…

CHARMM-GUI EnzyDocker: 一个基于网络的用于酶中多个反应状态的蛋白质 - 配体对接的计算平台

❝ "CHARMM-GUI EnzyDocker for Protein−Ligand Docking of Multiple Reactive States along a Reaction Coordinate in Enzymes"介绍了 CHARMM-GUI EnzyDocker&#xff0c;这是一个基于网络的计算平台&#xff0c;旨在简化和加速 EnzyDock 对接模拟的设置过程&…

mysql 使用 CONCAT、GROUP_CONCAT 嵌套查询出 json 格式数据

tb_factory表由 factory_code 和 factory_name 字段&#xff0c;查询出如下所示效果&#xff1a; {"factory_0001": "工厂1","factory_0002": "工厂2",... } select sql&#xff1a; SELECT CONCAT( "{",GROUP_CONCAT( C…

Docker__持续更新......

Docker 1. 基本知识1.1 为什么有Docker?1.2 Docker架构与容器化 画图解释 画图解释2. 项目实战 1. 基本知识 1.1 为什么有Docker? 用一行命令跨平台安装项目&#xff0c;在不同平台上运行项目。把项目打包分享运行应用。 1.2 Docker架构与容器化 准备机器&#xff0c;在机…

解决 `pip is configured with locations that require TLS/SSL` 错误

问题描述 在使用 pip 安装 Python 包时&#xff0c;可能会遇到以下错误&#xff1a; WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.这意味着 Python 的 ssl 模块未正确安装或配置&#xff0c;导致 p…

网络安全不分家 网络安全不涉及什么

何为网络安全 信息安全是指系统的硬件、软件及其信息受到保护&#xff0c;并持续正常运行和服务。信息安全的实质是保护信息系统和信息资源免受各种威胁、干扰和破坏&#xff0c;即保证信息的安全性。 网络安全是指利用网络技术、管理和控制等措施&#xff0c;保证网络系统和…

动手学Agent——Day2

文章目录 一、用 Llama-index 创建 Agent1. 测试模型2. 自定义一个接口类3. 使用 ReActAgent & FunctionTool 构建 Agent 二、数据库对话 Agent1. SQLite 数据库1.1 创建数据库 & 连接1.2 创建、插入、查询、更新、删除数据1.3 关闭连接建立数据库 2. ollama3. 配置对话…

android 的抓包工具

charles 抓包工具 官网地址 nullCharles Web Debugging Proxy - Official Sitehttps://www.charlesproxy.com/使用手册一定记得看官网 SSL Certificates • Charles Web Debugging Proxy http请求&#xff1a; 1.启动代理&#xff1a; 2.设置设备端口 3.手机连接当前代理 …

DeepSeek从入门到精通(清华大学)

​ DeepSeek是一款融合自然语言处理与深度学习技术的全能型AI助手&#xff0c;具备知识问答、数据分析、编程辅助、创意生成等多项核心能力。作为多模态智能系统&#xff0c;它不仅支持文本交互&#xff0c;还可处理文件、图像、代码等多种格式输入&#xff0c;其知识库更新至2…

数据结构:栈(Stack)及其实现

栈&#xff08;Stack&#xff09;是计算机科学中常用的一种数据结构&#xff0c;它遵循先进后出&#xff08;Last In, First Out&#xff0c;LIFO&#xff09;的原则。也就是说&#xff0c;栈中的元素只能从栈顶进行访问&#xff0c;最后放入栈中的元素最先被取出。栈在很多应用…