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

news2024/12/21 23:59:35

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

MVC 和 MVVM 结合的场景

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

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

如何结合 MVC 和 MVVM

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

使用 MVC 处理后端业务和数据：
- 在后端部分，你使用 MVC 模式来处理数据库交互、API 请求和数据管理。
- 前端通过调用后端接口或 Web API 来获取数据，数据从 Model（或 Web API）传递到 ViewModel。
在 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;
    }
}

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

前端部分：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>