使用Vue.js和ASP.NET Core MVC实现CQRS模式

635 篇文章 16 订阅
82 篇文章 3 订阅

目录

介绍

先决条件

深入了解基本信息

应用解决方案结构

图像上传和显示应用

MVC与JS框架之间的通信设计

在SPA中,在表示层中添加UI和PLL

用于数据读取和写入操作的数据访问层

软件包安装

读取查询处理程序的实现

写入命令处理程序

将MediatR与API控制器/控制器集成

配置MediatR

将依赖项注入Web-API控制器/控制器

如何发送命令/查询请求


介绍

如果您是软件专业人员,那么您将熟悉软件增强和维护工作。这是软件开发生命周期的一部分;这样,您就可以纠正故障,删除/增强现有功能。软件维护成本可以最小化如果使用软件体系结构模式,选择合适的技术和了解行业趋势的未来,考虑资源可靠性/可用性为现在和未来,在代码中使用设计模式/原则,重用代码,保持打开你选择未来的扩展,等等。无论如何,如果您在应用程序中使用任何已知的软件架构模式,那么其他人将很容易理解您的应用程序的结构/组件设计。我将使用ASP.Net Core MVC中的MediatRVue.js根据CQRS模式解释示例项目实现。

先决条件

深入了解基本信息

  • CQRS模式:简而言之,命令-查询分离责任(CQRS)模式将在不更改数据库/系统的情况下返回数据的读查询操作与将数据更改到数据库/系统的写命令(插入/更新/删除)操作分离开来。永远不要将读写操作混合在一起。
  • Mediator模式:这是一种设计模式,当您需要集中控制和多个类/对象之间的通信时,将使用中介者,这种设计模式会对代码产生影响。例如,Facebook Messenger是向多个用户发送消息的中介者。
  • MVC模式:这是一个应用程序的架构模式,其中模型、视图和控制器由它们的职责分隔开。模型是对象的数据;视图向用户显示数据并处理用户交互;控制器充当视图和模型之间的中介。

应用解决方案结构

该项目的主要目标是解释CQRS架构模式。我正在努力实现一个小型的单页应用程序(SPA)项目。技术的选择很重要,您应该根据自己的要求进行选择。对于用户界面(UI)和表示逻辑层(PLL),我选择ASP.NET Core MVCVue.jsJavaScript框架)。对于数据访问,我选择实体框架(EF)核心代码优先方法,并将其实现到数据访问层(DAL)中。我特意避免使用单独的业务逻辑层(BLL)和其他层,以最大程度地减少本文的篇幅。

图像上传和显示应用

在本项目中,首先考虑CQRS模式,我将上传图像文件以将其保存到数据库中;它将说明写命令的操作。其次,我将从数据库中读取数据以显示图像;它将说明读取查询操作。

我在同一解决方案中添加了两个单独的项目。一个是名为HR.App.DAL.CQRS” ClassLibrary.NET Core)项目,另一个是名为HR.App.WebASP.NET Core Web应用程序项目。

MVCJS框架之间的通信设计

在此阶段,我要指出UI/PLL以及它们如何相互通信。看下面的图。我将JS框架放在ViewWeb API Controller之间。

根据上图,ASP.NET MVC控制器呈现视图。JS将来自视图的HTTP请求(GET/PUT/POST/DELETE)传递到Web API控制器,并将Web API控制器的响应数据(JSON/XML)更新到视图。

注意:我正在猜测,如何在ASP.NET Core MVC项目中配置Vue.js。如果您需要分步说明在带有示例项目的ASP.NET Core中配置Vue.js,则建议阅读:ASP.NET Core 3.1 MVC中集成/配置Vue.js

SPA中,在表示层中添加UIPLL

HR.App.Web项目中,添加Index.cshtml视图和Index.cshtml.js文件。我为图像上传和图像视图标签/控件添加了以下HTML脚本到Index.cshtml中。这些与读取和写入操作关联。

@{
    ViewData["Title"] = "Home Page";
}

    <div id="view" v-cloak>
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-10">
                        <h5>Upload File</h5>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <dropzone id="uploadDropZone" url="/HomeApi/SubmitFile"

                          :use-custom-dropzone-options="useUploadOptions"

                          :dropzone-options="uploadOptions" v-on:vdropzone-success="onUploaded"

                          v-on:vdropzone-error="onUploadError">
                    <!-- Optional parameters if any! -->
                    <input type="hidden" name="token" value="xxx">
                </dropzone>
            </div>
        </div>
        <br/>
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-10">
                        <h5>Image viewer</h5>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <img v-bind:src="imageData" v-bind:alt="imageAlt" style="width:25%;
                 height:25%; display: block;margin-left: auto; margin-right: auto;" />
                <hr />
                <div class="col-6">
                    <button id="viewFile" ref="viewFileRef" type="button" 

                     class="btn btn-info" v-on:click="viewImageById">View Image</button>
                    <button type="button" class="btn btn-info" v-on:click="onClear">
                     Clear</button>
                </div>

            </div>
        </div>
    </div>
<script type="text/javascript">
</script>
<script type="text/javascript" src="~/dest/js/home.bundle.js" 

        asp-append-version="true"></script>

HTTP GET添加以下Vue.js脚本,并将其POST请求到Index.cshtml.js文件中:

import Vue from 'vue';
import Dropzone from 'vue2-dropzone';

document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),
        components: {
            "dropzone": Dropzone
        },
        data: {
            message: 'This is the index page',
            useUploadOptions: true,
            imageData: '',
            imageAlt: 'Image',
            imageId: 0,
            uploadOptions: {
                acceptedFiles: "image/*",
                //acceptedFiles: '.png,.jpg',
                dictDefaultMessage: 'To upload the image click here. Or, drop an image here.',
                maxFiles: 1,
                maxFileSizeInMB: 20,
                addRemoveLinks: true
            }
        },
        methods: {
            onClear() {
                this.imageData = '';
            },
            viewImageById() {
                try {
                    this.dialogErrorMsg = "";
                    //this.imageId = 1;
                    var url = '/HomeApi/GetImageById/' + this.imageId;

                    console.log("===URL===>" + url);
                    var self = this;

                    axios.get(url)
                        .then(response => {
                            let responseData = response.data;

                            if (responseData.status === "Error") {
                                console.log(responseData.message);
                            }
                            else {
                                self.imageData = responseData.imgData;
                                console.log("Image is successfully loaded.");
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } catch (ex) {

                    console.log(ex);
                }
            },
            onUploaded: function (file, response) {
                if (response.status === "OK" || response.status === "200") {
                    let finalResult = response.imageId;
                    this.imageId = finalResult;
                    console.log('Successfully uploaded!');
                }
                else {
                    this.isVisible = false;
                    console.log(response.message);
                }
            },
            onUploadError: function (file, message, xhr) {
                console.log("Message ====> " + JSON.stringify(message));
            }
        }
    });
});

在此JS文件中,viewImageById方法用于读取请求,而onUploaded方法用于写入请求。界面看起来像:

用于数据读取和写入操作的数据访问层

我猜,您知道EF核心代码优先方法,并且您具有域模型和上下文类。您可以使用其他方法。在这里,我将实现读取和写入操作以进行数据访问。查看下图以了解应用程序的整个过程。

软件包安装

HR.App.DAL.CQRS项目中,我已经使用NuGet包管理器安装了MediatR.Extensions.Microsoft.DependencyInjectionMicrosoft.EntityFrameworkCoreMicrosoft.EntityFrameworkCore.SqlServer

我需要MediatR来实现命令和查询处理程序。我将为ASP.NET Core使用MediatR.Extensions来解决依赖关系。

读取查询处理程序的实现

为了从数据库中获取图像,我添加了具有以下代码的GetImageQuery.cs类:

using HR.App.DAL.CQRS.Models;
using HR.App.DAL.CQRS.ViewModel;
using MediatR;
using Microsoft.EntityFrameworkCore;
using System;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

namespace HR.App.DAL.CQRS.Query
{
    public class GetImageQuery : IRequest<ImageResponse>
    {
        public int ImageId { get; set; }
    }

    public class GetImageQueryHandler : IRequestHandler<GetImageQuery, ImageResponse>
    {
        private readonly HrAppContext context;

        public GetImageQueryHandler(HrAppContext context)
        {
            this.context = context;
        }

        public async Task<ImageResponse> Handle(GetImageQuery request, CancellationToken cancellationToken)
        {
            ImageResponse imageResponse = new ImageResponse();

            try
            {
                UploadedImage uploadedImage = await context.UploadedImage.AsNoTracking()
                    .Where(x => x.ImageId == request.ImageId).SingleAsync();
                
                if (uploadedImage == null)
                {
                    imageResponse.Errors.Add("No Image found!");
                    return imageResponse;
                }

                imageResponse.UploadedImage = uploadedImage;
                imageResponse.IsSuccess = true;
            }
            catch (Exception exception)
            {
                imageResponse.Errors.Add(exception.Message);
            }

            return imageResponse;
        }
    }
}

GetImageQuery类继承IRequest<ImageResponse> ImageResponse类型指示的响应。另一方面,GetImageQueryHandler类继承了IRequestHandler<GetImageQuery, ImageResponse>,其中GetImageQuery类型表示请求/消息,ImageResponse类型表示响应/输出。此GetImageQueryHandler类实现返回ImageResponse对象的Handle方法。

写入命令处理程序

为了将图像保存到数据库中,我添加了SaveImageCommand.cs类,其中包含以下代码:

using HR.App.DAL.CQRS.Models;
using HR.App.DAL.CQRS.ViewModel;
using MediatR;
using System;
using System.Threading;
using System.Threading.Tasks;

namespace HR.App.DAL.CQRS.Command
{
    public class SaveImageCommand : IRequest<ResponseResult>
    {
        public UploadedImage UploadedImage { get; set; }
    }

    public class SaveImageCommandHandler : IRequestHandler<SaveImageCommand, ResponseResult>
    {
        private readonly HrAppContext context;

        public SaveImageCommandHandler(HrAppContext context)
        {
            this.context = context;
        }

        public async Task<ResponseResult> Handle
               (SaveImageCommand request, CancellationToken cancellationToken)
        {
            using (var trans = context.Database.BeginTransaction())
            {
                ResponseResult response = new ResponseResult();

                try
                {
                    context.Add(request.UploadedImage);
                    await context.SaveChangesAsync();
                    trans.Commit();
                    response.IsSuccess = true;
                    response.ImageId = request.UploadedImage.ImageId;
                }
                catch (Exception exception)
                {
                    trans.Rollback();
                    response.Errors.Add(exception.Message);
                }

                return response;
            }
        }
    }
}

MediatRAPI控制器/控制器集成

HR.App.Web项目中,我已经使用NuGet软件包管理器安装了MediatR.Extensions.Microsoft.DependencyInjection。它可能会请求安装相关软件包的许可(Microsoft.Extensions.DependencyInjection.Abstractions)。

配置MediatR

ConfigureServices方法中将以下代码添加到Startup.cs类中进行注册MediatR

services.AddMediatR(typeof(Startup));

如果您将所有处理程序类都放入ASP.NET Core MVC项目的同一程序集中(例如,HR.App.Web),则此配置效果很好。如果您在同一项目解决方案中使用不同的程序集(例如HR.App.DAL.CQRS),则必须转义以上代码,并需要添加以下代码:

services.AddMediatR(typeof(GetImageQuery));

如果在同一项目解决方案中使用多个程序集(例如AssemblyAAnotherAssemblyB),则需要添加所有类型的程序集:

services.AddMediatR(typeof(AssemblyAClassName), typeof(AnotherAssemblyBClassName));

将依赖项注入Web-API控制器/控制器

HomeApiController.cs类中,我添加了SubmitFileGetImageId操作,这些操作将使用MediatR发送命令和查询对象。下面的代码表明我已经在HomeApiController构造函数中注入了一个依赖Mediator对象。顺便说一下,Web API控制器返回Json/XML数据。

控制器返回视图。在HomeController.cs,我仅使用默认的Index操作返回视图。

如何发送命令/查询请求

我们可以使用中介对象发送命令/查询对象:mediator.Send(command/query Object);查看下面的代码:

完整的代码如下:

using HR.App.DAL.CQRS.Command;
using HR.App.DAL.CQRS.Models;
using HR.App.DAL.CQRS.Query;
using HR.App.DAL.CQRS.ViewModel;
using MediatR;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using System.Threading.Tasks;

namespace HR.App.Web.Controllers
{
    [Route("api")]
    [ApiController]
    public class HomeApiController : Controller
    {
        private readonly IMediator mediator;

        public HomeApiController(IMediator mediator)
        {
            this.mediator = mediator;
        }

        [HttpPost("/HomeApi/SubmitFile")]
        public async Task<ActionResult> SubmitFile(IFormFile file)
        {
            try
            {
                #region Validation & BL
                if (file.Length == 0)
                {
                    return Json(new { status = "Error", message = "Image is not found!" });
                }

                if (!file.ContentType.Contains("image"))
                {
                    return Json
                     (new { status = "Error", message = "This is not an image file!" });
                }

                string fileName = file.FileName;

                if (file.FileName.Length > 50)
                {
                    fileName = string.Format($"{file.FileName.Substring(0, 45)}
                               {Path.GetExtension(file.FileName)}");
                }
                #endregion

                byte[] bytes = null;

                using (BinaryReader br = new BinaryReader(file.OpenReadStream()))
                {
                    bytes = br.ReadBytes((int)file.OpenReadStream().Length);
                }

                UploadedImage uploadedImage = new UploadedImage()
                {
                    ImageFileName= fileName,
                    FileContentType = file.ContentType,
                    ImageContent = bytes
                };

                SaveImageCommand saveImageCommand = new SaveImageCommand()
                {
                    UploadedImage = uploadedImage
                };

                ResponseResult responseResult = await mediator.Send(saveImageCommand);

                if (!responseResult.IsSuccess)
                {
                    return Json(new { status = "Error", 
                           message = string.Join("; ", responseResult.Errors) });
                }

                return Json(new { status = "OK", imageId= responseResult.ImageId });
            }
            catch (Exception ex)
            {
                return Json(new { status = "Error", message = ex.Message });
            }
        }

        [HttpGet("/HomeApi/GetImageById/{imageId:int}")]
        public async Task<ActionResult> GetImageById(int imageId)
        {
            try
            {
                ImageResponse imageResponse = await mediator.Send(new GetImageQuery()
                {
                    ImageId = imageId
                });

                UploadedImage uploadedImage = imageResponse.UploadedImage;

                if (!imageResponse.IsSuccess)
                {
                    return Json(new { status = "Error", 
                           message = string.Join("; ", imageResponse.Errors) });
                }
                if (uploadedImage.FileContentType == null || 
                            !uploadedImage.FileContentType.Contains("image"))
                {
                    return Json(new { status = "Error", 
                           message = string.Join("; ", imageResponse.Errors) });
                }

                string imgBase64Data = Convert.ToBase64String(uploadedImage.ImageContent);
                string imgDataURL = string.Format("data:{0};base64,{1}", 
                    uploadedImage.FileContentType, imgBase64Data);
                
                return Json(new { status = "OK", imgData = imgDataURL });
            }
            catch (Exception ex)
            {
                return Json(new { status = "Error", message = ex.Message });
            }
        }
    }
}

在上面的代码中,“SubmitFile”动作将接收带有IFormFile对象和图像的HttpPost ,并将图像转换为字节数组。最后,它使用中介器发送SaveImageCommand对象。

另一方面,GetImageById动作使用imageId接收HttpGet请求,并使用调解器发送查询请求。最后,它处理从字节数组到base64字符串的图像内容,以将其发送到视图。

无论如何,现在如果您运行项目,那么您将看到以下屏幕来上传和查看图像:

在很多情况下,我们需要读写操作才能完成一项任务。例如,我需要更新一个对象的几个属性。首先,我可以调用查询操作来读取对象,然后在放入所需的值之后,可以调用更新操作来存储它。在这种情况下,切勿将读取查询和写入命令混合到同一操作/处理程序中。然后将它们分开,以后将很容易修改。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值