项目

本文档有多个版本。请选择最适合您的选项。

UI
Database

微服务教程 第 05 部分:构建订购服务

在上一部分中,我们创建了订购微服务。在本部分中,我们将手动实现订购微服务的功能。我们将不使用 ABP Suite 来生成代码,而是通过逐步创建必要的代码来更好地理解细节。

创建 Order 实体

我们将从创建 Order 实体开始,它将代表我们系统中的订单。我们将把这个实体添加到 CloudCrm.OrderingService 项目中。创建一个名为 Entities 的新文件夹,并在其中创建文件 Order.cs

using CloudCrm.OrderingService.Enums;
using Volo.Abp.Domain.Entities.Auditing;

namespace CloudCrm.OrderingService.Entities;

public class Order : CreationAuditedAggregateRoot<Guid>
{
    public Guid ProductId { get; set; }
    public string CustomerName { get; set; }
    public OrderState State { get; set; }
}

为了简化示例,我们允许用户在订单中只包含一个产品。Order 实体继承自 CreationAuditedAggregateRoot<> 类。这个由 ABP 框架提供的类包含常见的属性,如 IdCreationTimeCreatorId 等。

添加 OrderState 枚举

我们还需要定义 OrderState 枚举。在 CloudCrm.OrderingService.Contracts 项目中,创建一个名为 Enums 的文件夹,并在其中创建文件 OrderState.cs

namespace CloudCrm.OrderingService.Enums;

public enum OrderState : byte
{
    Placed = 0,
    Delivered = 1,
    Canceled = 2
}

最终的解决方案结构应如下图所示:

vs-ordering-entity

配置数据库映射

首先,我们需要将 Order 实体添加到 OrderingServiceDbContext 类中。打开 CloudCrm.OrderingService 项目 Data 文件夹中的 OrderingServiceDbContext 类,并在 DbSet 属性中添加以下代码:

using CloudCrm.OrderingService.Entities;
using Microsoft.EntityFrameworkCore;
using Volo.Abp.Data;
using Volo.Abp.EntityFrameworkCore;
using Volo.Abp.EntityFrameworkCore.DistributedEvents;
using Volo.Abp.EntityFrameworkCore.Modeling;

namespace CloudCrm.OrderingService.Data;

[ConnectionStringName(DatabaseName)]
public class OrderingServiceDbContext :
    AbpDbContext<OrderingServiceDbContext>,
    IHasEventInbox,
    IHasEventOutbox
{
    public const string DbTablePrefix = "";
    public const string DbSchema = null;
    
    public const string DatabaseName = "OrderingService";
    
    public DbSet<IncomingEventRecord> IncomingEvents { get; set; }
    public DbSet<OutgoingEventRecord> OutgoingEvents { get; set; }
    public DbSet<Order> Orders { get; set; } // 新增:添加 DbSet 属性

    // 为简洁起见,省略代码
}

接下来,我们需要为 Order 实体配置数据库映射。我们将使用 EF Core Fluent API 进行此配置。在 OrderingServiceDbContext 类的 OnModelCreating 方法中添加以下代码:

protected override void OnModelCreating(ModelBuilder builder)
{
    base.OnModelCreating(builder);

    builder.ConfigureEventInbox();
    builder.ConfigureEventOutbox();

    builder.Entity<Order>(b =>
    {
        // 配置表名
        b.ToTable("Orders");

        // 始终调用此方法以设置基实体属性
        b.ConfigureByConvention();

        // 实体的属性
        b.Property(q => q.CustomerName).IsRequired().HasMaxLength(120);
    });
}

在这段代码片段中,我们将 Order 实体配置为使用数据库中的 Orders 表。我们还指定 CustomerName 属性是必需的,并且最大长度为 120 个字符。

添加数据库迁移

现在,我们可以添加一个新的数据库迁移。你可以使用 Entity Framework Core 的 Add-Migration(或 dotnet ef migrations add)终端命令,但在本教程中,我们将使用 ABP Studio 的快捷 UI。

如果应用程序正在运行,请先停止它们,并确保解决方案已构建。你可以在 ABP Studio 的解决方案资源管理器中右键单击 services 文件夹下的 CloudCrm.OrderingService,然后选择 Dotnet CLI -> Graph Build 命令。

右键单击 CloudCrm.OrderingService 包,然后选择 EF Core CLI -> Add Migration 命令:

abp-studio-add-entity-framework-core-migration

Add Migration 命令会打开一个新对话框,获取迁移名称 Added_Order_Entity

abp-studio-entity-framework-core-add-migration-order

点击确定按钮后,一个新的数据库迁移类将被添加到 CloudCrm.OrderingService 项目的 Migrations 文件夹中:

visual-studio-new-migration-class

这些更改将在下次应用程序启动时应用到数据库。更多详情,请参考服务启动时的数据库迁移部分。

创建应用服务

现在,我们将创建应用服务来管理 Order 实体。

定义应用服务契约

首先,我们需要在 CloudCrm.OrderingService.Contracts 项目下定义应用服务契约。返回你的 IDE,打开 CloudCrm.OrderingService 模块的 .NET 解决方案,并为 CloudCrm.OrderingService.Contracts 项目在 Services 文件夹下创建一个 IOrderAppService 接口:

using System.Collections.Generic;
using System.Threading.Tasks;
using Volo.Abp.Application.Services;

namespace CloudCrm.OrderingService.Services;

public interface IOrderAppService : IApplicationService
{
    Task<List<OrderDto>> GetListAsync();
    Task CreateAsync(OrderCreationDto input);
}

定义数据传输对象

接下来,我们需要为 Order 实体定义数据传输对象。GetListAsyncCreateAsync 方法将使用这些 DTO 与客户端应用程序通信。

CloudCrm.OrderingService.Contracts 项目的 Services 文件夹下创建 OrderCreationDto 类:

using System;
using System.ComponentModel.DataAnnotations;

namespace CloudCrm.OrderingService.Services;

public class OrderCreationDto
{
    [Required]
    [StringLength(150)]
    public string CustomerName { get; set; }

    [Required]
    public Guid ProductId { get; set; }
}

CloudCrm.OrderingService.Contracts 项目的 Services 文件夹下创建 OrderDto 类:

using System;
using CloudCrm.OrderingService.Enums;

namespace CloudCrm.OrderingService.Services;

public class OrderDto
{
    public Guid Id { get; set; }
    public string CustomerName { get; set; }
    public Guid ProductId { get; set; }
    public OrderState State { get; set; }
}

最终的解决方案结构应如下图所示:

vs-ordering-contracts

实现应用服务

现在,我们将在 OrderAppService 类中实现 IOrderAppService 接口。在 CloudCrm.OrderingService 项目的 Services 文件夹下创建一个 OrderAppService 类:

using System;
using System.Collections.Generic;
using CloudCrm.OrderingService.Entities;
using CloudCrm.OrderingService.Enums;
using CloudCrm.OrderingService.Localization;
using Volo.Abp.Application.Services;
using Volo.Abp.Domain.Repositories;

namespace CloudCrm.OrderingService.Services;

public class OrderAppService : ApplicationService, IOrderAppService
{
    private readonly IRepository<Order, Guid>  _orderRepository;

    public OrderAppService(IRepository<Order, Guid> orderRepository)
    {
        LocalizationResource = typeof(OrderingServiceResource);
        _orderRepository = orderRepository;
    }

    public async Task<List<OrderDto>> GetListAsync()
    {
        var orders = await _orderRepository.GetListAsync();
        return ObjectMapper.Map<List<Order>, List<OrderDto>>(orders);
    }

    public async Task CreateAsync(OrderCreationDto input)
    {
        var order = new Order
        {
            CustomerName = input.CustomerName,
            ProductId = input.ProductId,
            State = OrderState.Placed
        };

        await _orderRepository.InsertAsync(order);
    }
}

在这段代码片段中,我们将 IRepository<Order, Guid> 注入到 OrderAppService 类中。我们使用这个仓储与 Order 实体交互。GetListAsync 方法从数据库检索订单列表,并将它们映射到 OrderDto 类。CreateAsync 方法创建一个新的订单实体并将其插入数据库。

之后,我们需要配置 Mapperly 对象以将 Order 实体映射到 OrderDto 类。打开 CloudCrm.OrderingService 项目 ObjectMapping 文件夹中的 OrderingServiceApplicationMappers 类,并添加以下代码:

using Riok.Mapperly.Abstractions;
using Volo.Abp.Mapperly;

namespace CloudCrm.OrderingService.ObjectMapping;

[Mapper]
public partial class OrderingServiceApplicationMappers : MapperBase<Order, OrderDto>
{
    public override partial OrderDto Map(Order source);

    public override partial void Map(Order source, OrderDto destination);
}

测试应用服务

现在,我们可以使用 Swagger UI 测试 OrderAppService 类。打开解决方案运行器,右键单击 CloudCrm.OrderingService 项目,然后选择启动命令。应用程序启动后,你可以通过点击浏览命令来打开 Swagger UI:

ordering-service-swagger-ui

展开 api/ordering/order API,然后单击 Try it out 按钮。然后,通过填写请求正文并单击 Execute 按钮来创建几个订单:

ordering-service-order-swagger-ui

如果你检查数据库,你应该能看到 Orders 表中创建的实体:

sql-server-orders-database-table-records

由于我们使用的是自动 API 控制器,我们不需要为 OrderAppService 创建控制器。ABP 框架会自动为 OrderAppService 类创建一个 API 控制器。你可以在 CloudCrm.OrderingService 项目的 CloudCrmOrderingServiceModule 类的 ConfigureAutoControllers 方法中找到配置。

创建用户界面

生成代理

Angular 项目文件夹下运行以下命令行,为 OrderingService 生成 UI 代理:

abp generate-proxy -t ng -m ordering -u http://localhost:44311 --target ordering-service

确保 URL 端口(例如 44311)必须与你的 OrderService 端口相同。

更多信息,请参考服务代理文档。

添加 Order 路由

  • projects/ordering-service/config/src/providers 文件夹下创建 order-base.routes.ts 文件,并添加以下代码:

order-base.routes.ts

import { ABP, eLayoutType } from '@abp/ng.core';

import { eOrderingServiceRouteNames } from '../enums/route-names';

export const ORDER_BASE_ROUTES: ABP.Route[] = [
  {
    path: '/ordering-service/orders',
    parentName: eOrderingServiceRouteNames.OrderingService,
    name: 'OrderingService::Menu:Orders',
    layout: eLayoutType.application,
    breadcrumbText: 'OrderingService::Orders',
  },
];
  • projects/ordering-service/config/src/providers 文件夹下创建 order-route.provider.ts 文件,并添加以下代码:

order-route.provider.ts

import { inject, provideAppInitializer } from '@angular/core';
import { ABP, RoutesService } from '@abp/ng.core';
import { ORDER_BASE_ROUTES } from './order-base.routes';

export const ORDERS_ORDER_ROUTE_PROVIDER = [
  provideAppInitializer(() => {
    configureRoutes();
  }),
];

function configureRoutes() {
  const routesService = inject(RoutesService);
  const routes: ABP.Route[] = [...ORDER_BASE_ROUTES];
  routesService.add(routes);
}
  • 打开 projects/ordering-service/config/src/providers/route.provider.ts 文件,并将 ORDERS_ORDER_ROUTE_PROVIDER 添加到 ORDER_SERVICE_PROVIDERS 数组中,如下所示:

route.provider.ts

import { eLayoutType, RoutesService } from '@abp/ng.core';
import {
  EnvironmentProviders,
  inject,
  makeEnvironmentProviders,
  provideAppInitializer,
} from '@angular/core';
import { eOrderingServiceRouteNames } from '../enums/route-names';
import { ORDERS_ORDER_ROUTE_PROVIDER } from './order-route.provider';


export const ORDER_SERVICE_ROUTE_PROVIDERS = [
  provideAppInitializer(() => {
    configureRoutes();
  }),
];

export function configureRoutes() {
  const routesService = inject(RoutesService);
  routesService.add([
    {
      path: '/order-service',
      name: eOrderingServiceRouteNames.OrderService,
      iconClass: 'fas fa-book',
      layout: eLayoutType.application,
      order: 3,
    },
  ]);
}

const ORDER_SERVICE_PROVIDERS: EnvironmentProviders[] = [
  ...ORDER_SERVICE_ROUTE_PROVIDERS,
  ...ORDERS_ORDER_ROUTE_PROVIDER
];

export function provideOrderService() {
  return makeEnvironmentProviders(ORDER_SERVICE_PROVIDERS);
}
  • 别忘了将 provideOrderService() 添加到 app.config.ts 中的 providers 中,如下所示:
import { provideOrderService } from '@order-service/config';

export const appConfig: ApplicationConfig = {
  providers: [ 
    // ...
    provideOrderService()
  ],
};
  • 最后,你需要更新 app.routes.ts 文件中的 APP_ROUTES 数组,如下所示:
// app.routes.ts
export const APP_ROUTES: Routes = [
  // ...
  {
    path: 'order-service',
    children: ORDER_SERVICE_ROUTES,
  },
];
// order-service.routes.ts
export const ORDER_SERVICE_ROUTES: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: RouterOutletComponent,
  },
  { path: 'orders', children: ORDER_ROUTES },
];

创建订单页面

  • projects/ordering-service/src/lib/order 文件夹下创建 order.component.ts 文件,代码如下:
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderDto, OrderService } from './proxy/ordering-service/services';

@Component({
  selector: 'lib-order',
  templateUrl: './order.component.html',
  styleUrl: './order.component.css'
  imports: [CommonModule]
})
export class OrderComponent {

  items: OrderDto[] = [];

  private readonly proxy = inject(OrderService);

  constructor() {
    this.proxy.getList().subscribe((res) => {
      this.items = res;
    });
  }
}
  • projects/ordering-service/src/lib/order 文件夹下创建 order.component.html 文件,代码如下:
<div class="card">
    <div class="card-body">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Product Id</th>
                    <th>Customer Name</th>
                </tr>
                <tr *ngFor="let item of items">
                    <td>{{item.id}}</td>
                    <td>{{item.productId}}</td>
                    <td>{{item.customerName}}</td>
                </tr>
            </thead>
        </table>
    </div>
</div>

构建并运行应用程序

现在,我们可以运行应用程序来查看更改。如果应用程序正在运行,请先停止。然后打开解决方案运行器面板,右键单击 CloudCrm 根项目,然后选择启动命令:

abp-studio-run-build-start

应用程序启动后,你可以浏览并导航到 Orders 页面以查看订单列表:

web-orders-page

很好!我们已经成功实现了订购模块。但是,有一个问题:

  • 我们看到的是产品的 GUID ID,而不是其名称。这是因为订购微服务与目录微服务没有集成,无法访问产品微服务的数据库来执行 JOIN 查询。

我们将在下一部分通过实现订购目录微服务之间的集成服务来解决这个问题。

总结

在本部分中,我们手动实现了订购模块。我们创建了 Order 实体、OrderState 枚举、OrderAppService 应用服务以及 Orders 页面的用户界面。我们还向侧边栏添加了一个菜单项以导航到 Orders 页面。


在本文档中