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.mzph.cn/pingmian/70149.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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;最后放入栈中的元素最先被取出。栈在很多应用…