【进阶编程】MVC和MVVM实现前后端分离的实现

在 WPF 开发中,通常使用 MVVM(Model-View-ViewModel)架构来分离视图和业务逻辑,但在某些情况下,你可能希望将 MVC(Model-View-Controller)模式与 MVVM 结合使用。这种结合有时是为了兼顾不同的架构优势,尤其是在大型应用程序中,或者当你在 WPF 中同时使用 Web 或 ASP.NET Core 后端时。

MVC 和 MVVM 结合的场景

MVC 是一种广泛用于 Web 开发的架构模式,主要通过 Controller 来协调 ModelView,而 MVVM 是 WPF 中的推荐模式。在某些应用中,你可能需要以下两种模式的结合:

  • Web API/后端使用 MVC:如果你的应用涉及到 Web 服务或后端业务逻辑层,通常你会使用 MVC 模式来管理 API 请求、处理逻辑并返回视图。
  • 前端使用 MVVM:WPF 前端通常使用 MVVM 模式来分离界面和逻辑,控制视图与数据的交互。

如何结合 MVC 和 MVVM

结合 MVC 和 MVVM 主要通过以下方式进行:

  1. 使用 MVC 处理后端业务和数据

    • 在后端部分,你使用 MVC 模式来处理数据库交互、API 请求和数据管理。
    • 前端通过调用后端接口或 Web API 来获取数据,数据从 Model(或 Web API)传递到 ViewModel
  2. 在 WPF 中使用 MVVM 处理界面和交互

    • 在前端的 WPF 应用中,你使用 MVVM 模式管理视图和视图模型,确保业务逻辑和 UI 逻辑解耦。
    • Controller 的角色可以被 ViewModel 取代,ViewModel 负责与后端进行通信,接收数据并将其展示在视图中。

结合 MVC 和 MVVM 的具体示例

后端部分:MVC 模式

假设我们有一个后端 API,使用 ASP.NET Core MVC 处理客户数据。

1. 创建一个 Model 类:

public class Customer
{public int Id { get; set; }public string Name { get; set; }public string Email { get; set; }
}

2. 创建一个 Controller 类:

using Microsoft.AspNetCore.Mvc;[ApiController]
[Route("api/[controller]")]
public class CustomerController : ControllerBase
{// 模拟数据存储private static List<Customer> customers = new List<Customer>{new Customer { Id = 1, Name = "Alice", Email = "alice@example.com" },new Customer { Id = 2, Name = "Bob", Email = "bob@example.com" }};[HttpGet]public IEnumerable<Customer> GetCustomers(){return customers;}[HttpGet("{id}")]public ActionResult<Customer> GetCustomer(int id){var customer = customers.FirstOrDefault(c => c.Id == id);if (customer == null) return NotFound();return customer;}
}

在这个控制器中,GetCustomersGetCustomer 方法分别返回所有客户和单个客户的信息。

前端部分:MVVM 模式

在 WPF 前端中,我们使用 MVVM 模式来展示从后端 API 获取的数据。

1. 创建 Customer Model 类:

public class Customer
{public int Id { get; set; }public string Name { get; set; }public string Email { get; set; }
}

2. 创建 ViewModel 类:

using System.Collections.ObjectModel;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;public class MainViewModel : INotifyPropertyChanged
{private ObservableCollection<Customer> _customers;private bool _isLoading;public ObservableCollection<Customer> Customers{get { return _customers; }set{_customers = value;OnPropertyChanged(nameof(Customers));}}public bool IsLoading{get { return _isLoading; }set{_isLoading = value;OnPropertyChanged(nameof(IsLoading));}}public MainViewModel(){Customers = new ObservableCollection<Customer>();LoadCustomers();}private async void LoadCustomers(){IsLoading = true;using (var client = new HttpClient()){client.BaseAddress = new Uri("https://yourapiurl/api/");var response = await client.GetStringAsync("customer");var customers = JsonConvert.DeserializeObject<List<Customer>>(response);foreach (var customer in customers){Customers.Add(customer);}}IsLoading = false;}public event PropertyChangedEventHandler PropertyChanged;protected virtual void OnPropertyChanged(string propertyName){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}
}

MainViewModel 中,我们从后端 API 获取客户数据,并将其填充到 ObservableCollection<Customer> 中。我们使用 HttpClient 来发送 GET 请求,并使用 JsonConvert 反序列化返回的 JSON 数据。

3. 创建 XAML 界面:

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MVVM with MVC Example" Height="350" Width="525"><Window.DataContext><local:MainViewModel /></Window.DataContext><Grid><ProgressBar Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="25" /><ListBox ItemsSource="{Binding Customers}" HorizontalAlignment="Left" Height="200" VerticalAlignment="Top" Width="200"><ListBox.ItemTemplate><DataTemplate><StackPanel><TextBlock Text="{Binding Name}" /><TextBlock Text="{Binding Email}" /></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></Grid>
</Window>

在 XAML 中,我们使用数据绑定将 ListBoxItemsSource 绑定到 MainViewModel 中的 Customers 属性,并通过 BooleanToVisibilityConverter 显示/隐藏进度条。

4. 总结:MVC 和 MVVM 结合的优势

MVCMVVM 结合的优势体现在:

  • MVC 适用于后端控制,管理数据库和业务逻辑,处理请求和返回数据。
  • MVVM 适用于前端 UI 逻辑,确保视图和业务逻辑解耦,并提供更加灵活的 UI 更新机制。
  • 使用 Web APIHttpClient,可以轻松地将前端 MVVM 与后端 MVC 进行结合,使得两者之间的通信更加清晰和结构化。

这种结合特别适合于以下场景:

  1. 前后端分离的应用程序,其中后端使用 MVC 处理 API,前端使用 MVVM 来处理 WPF 用户界面。
  2. 需要将前端 WPF 应用与 Web API 连接的场景,保持了前端和后端的分离。
  3. 增强了应用的可维护性和可测试性,MVVM 使得前端更易于单元测试,MVC 使得后端更易于管理。

如果你有更多问题,随时可以提问!

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

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

相关文章

CEF127 编译指南 MacOS 篇 - 编译 CEF(六)

1. 引言 经过前面的准备工作&#xff0c;我们已经完成了所有必要的环境配置。本文将详细介绍如何在 macOS 系统上编译 CEF127。通过正确的编译命令和参数配置&#xff0c;我们将完成 CEF 的构建工作&#xff0c;最终生成可用的二进制文件。 2. 编译前准备 2.1 确认环境变量 …

关于小程序内嵌h5打开新的小程序

关于小程序内嵌h5打开新的小程序 三种方式 https://juejin.cn/post/7055551463489011749 只依赖于h5本身的就是 https://huaweicloud.csdn.net/64f97ebb6b896f66024ca16c.html https://juejin.cn/post/7055551463489011749 navigateToMiniProgram 故小程序webview里的h5无法…

网络安全技术深度解析与实践案例

网络安全技术深度解析与实践案例 随着信息技术的飞速发展&#xff0c;计算机网络已经成为现代社会不可或缺的一部分。无论是个人生活、企业运营还是国家安全&#xff0c;网络都扮演着至关重要的角色。然而&#xff0c;网络空间的开放性和匿名性也带来了诸多安全隐患。因此&…

[一招过] Python的正则表达式篇

Python 正则表达式&#xff08;re模块&#xff09; 正则表达式&#xff08;regular expression&#xff09;是用于匹配字符串的一种强大工具。Python 提供了 re 模块来处理正则表达式。通过正则表达式&#xff0c;可以快速匹配、查找、替换、分割字符串等。 1. re 模块基础 …

Zerotier + VSCode远程连接实验室的服务器、Xshell连接远程服务器

目录 1. 本地安装 Zerotier2. 使用本地CMD或者Xshell连接服务器&#xff1a;3. VSCode连接服务器 1. 本地安装 Zerotier Zerotier用来创建一个虚拟网络&#xff0c;可以将服务器和本机都加入该虚拟网络中。本地将会拥有一个内网ip地址&#xff0c;和服务器在一个网络下&#x…

gcd 生成4d

目录 推理示例: 开源地址 https://github.com/basilevh/gcd 推理示例: This section is for casually running our model on custom videos. For thorough quantitative evaluation on Kubric-4D or ParallelDomain-4D, or any command line inference outside of those t…

网安入门|前端基础之Html_css基础

Web1.0、Web2.0 和 Web3.0 是互联网发展的三个主要阶段&#xff0c;每个阶段有其独特的特征和技术进步。以下是对它们的介绍&#xff1a; Web 1.0&#xff08;静态互联网&#xff09; 时间&#xff1a;1990年代初到2000年代初 特点&#xff1a; 静态内容&#xff1a;网页主要…

开发平台接口规范:北斗终端->北斗三号卫星->指挥机(北斗终端)->北斗短报文融合平台->客户平台(上行)| 时空信息产品

文章目录 引言I 技术架构和业务流程技术架构北斗终端信息流II 渠道接口验证签名白名单IP渠道配置表设计III 其他辅助功能TCP 发送消息到消息中心nginx转发网关服务异常捕获日志采集IV 知识扩展对请求参数进行校验引言 开发平台的应用场景:平台需要开发能力给下游平台需要接收上…

知识分享第三十天-力扣343.(整数拆分)

343 整数拆分 给定一个正整数 n&#xff0c;将其拆分为至少两个正整数的和&#xff0c;并使这些整数的乘积最大化。 返回你可以获得的最大乘积。 示例 1: 输入: 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: 10 输出: 36 解释: 10 3 3 4, 3 3 4 36。 说明: 你可…

C语言中回调函数的注册及使用

1&#xff0c;回调函数类型定义 #include <stdio.h>// 定义回调函数类型 typedef void (*CallbackFunction)(int); 2&#xff0c;定义注册和调用回调函数的函数 // 存储回调函数的数组 CallbackFunction callbacks[10]; int callback_count 0;// 注册回调函数 void r…

SQL Server 解决游标性能问题的替代方案

在 SQL Server 中&#xff0c;游标&#xff08;Cursor&#xff09;是一种用于逐行处理数据集的强大工具&#xff0c;但在某些情况下&#xff0c;它们可能会导致性能问题&#xff0c;尤其是在处理大量数据时。为了提高性能和可维护性&#xff0c;可以考虑使用其他替代方案。以下…

Vue3路由跳转动画引发页面抖动问题的解决方案

在现代Web应用中&#xff0c;动画不仅提升了视觉效果&#xff0c;还显著改善了用户体验。Vue3作为前端框架的佼佼者&#xff0c;以其强大的生态和灵活的API为开发者提供了丰富的动画实现方式。然而&#xff0c;在Vue3中为路由跳转增加动画效果时&#xff0c;开发者可能会遇到页…

【redis的使用、账号流程、游戏服Handler的反射调用】1.自增id 2.全局用户名这样子名字唯一 3.

一、web服 1)账号注册 // 用于唯一命名服务 com.xinyue.game.center.business.account.logic.AccountRegisterService#accountRegister public void accountRegister(AccountEntity account) {accountManager.checkUsername(account.getUsername());accountManager.checkPass…

搭建Tomcat(六)---Response的实现

目录 引入 一、前端项目容器的搭建 重建项目: 1.创建一个新的项目&#xff1a; 2.创建HTML文件 3.将先前编写的所有tomcatJava文件挪过来 二、配置java文件 1.重启一下MyTomcat 2.配置两个工具包 ①FileUtil ②ResponseUtil&#xff08;响应头&#xff09; 三、处理…

机械鹦鹉与真正的智能:大语言模型推理能力的迷思

编者按&#xff1a; 大语言模型真的具备推理能力吗&#xff1f;我们是否误解了"智能"的本质&#xff0c;将模式匹配误认为是真正的推理&#xff1f; 本文深入探讨了大语言模型&#xff08;LLMs&#xff09;是否真正具备推理能力这一前沿科学问题&#xff0c;作者的核…

.net winform 实现CSS3.0 泼墨画效果

效果图 代码 private unsafe void BlendImages1(Bitmap img1, Bitmap img2) {// 确定两个图像的重叠区域Rectangle rect new Rectangle(0, 0,Math.Min(img1.Width, img2.Width),Math.Min(img1.Height, img2.Height));// 创建输出图像&#xff0c;尺寸为重叠区域大小Bitmap b…

VUE+Node.js+mysq实现响应式个人博客|项目初始化+路由配置+基础组件搭建

Day 1 开发文档&#xff1a;项目初始化与基础架构搭建 一、项目初始化 1. 创建项目 首先&#xff0c;我们使用 Vite 创建一个基于 Vue 3 的项目&#xff1a; # 创建项目 npm create vitelatest my-blog -- --template vue # 这条命令会创建一个名为 my-blog 的新项目&#…

短视频矩阵:构建多平台曝光的高效运营网络

在当今这个瞬息万变的数字化时代&#xff0c;短视频以其独特的魅力迅速占领了人们的视野&#xff0c;成为信息传播与娱乐消遣的重要一环。随着短视频平台的不断增多和用户群体的日益庞大&#xff0c;如何精准高效地利用短视频进行品牌推广和产品营销&#xff0c;成为了众多企业…

ubuntu+ros新手笔记(三):21讲没讲到的MoveIt2

系统ubuntu22.04 ros2 humble 1 安装MoveIt2 安装参照在ROS2中&#xff0c;通过MoveIt2控制Gazebo中的自定义机械手 安装 MoveIt2可以选择自己编译源码安装&#xff0c;或者直接从二进制安装。 个人建议直接二进制安装&#xff0c;可以省很多事。 sudo apt install ros-humbl…

Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例&#xff1a; List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…