ASP.Net Core與Angular的開源實例項目分析

ASP.Net Core與Angular的開源實例項目分析

引言

在現代Web開發中，ASP.Net Core和Angular是兩個非常流行的技術棧。ASP.Net Core是一個高性能、跨平臺的Web框架，而Angular則是一個強大的前端框架，用于構建單頁應用（SPA）。本文將分析一個結合了ASP.Net Core和Angular的開源實例項目，探討其架構設計、技術實現以及開發中的最佳實踐。

項目概述

項目名稱與目標

項目名稱為“eShopOnContainers”，這是一個由微軟提供的開源項目，旨在展示如何在微服務架構中使用ASP.Net Core和Angular構建一個電子商務平臺。該項目不僅展示了前后端分離的開發模式，還涵蓋了容器化、持續集成/持續部署（CI/CD）等現代開發實踐。

技術棧

• 后端: ASP.Net Core
• 前端: Angular
• 數據庫: SQL Server, MongoDB
• 消息隊列: RabbitMQ
• 容器化: Docker
• CI/CD: Azure DevOps

架構設計

微服務架構

eShopOnContainers采用了微服務架構，將系統拆分為多個獨立的服務，每個服務負責特定的業務功能。例如：

• Catalog Service: 負責商品目錄的管理。
• Basket Service: 處理購物車功能。
• Ordering Service: 管理訂單流程。

每個服務都有自己的數據庫，通過API網關進行通信。這種設計使得系統更加靈活，易于擴展和維護。

前后端分離

前端使用Angular構建，后端使用ASP.Net Core提供RESTful API。前后端通過HTTP請求進行通信，前端負責展示數據和用戶交互，后端負責業務邏輯和數據存儲。

技術實現

后端實現

ASP.Net Core Web API

每個微服務都是一個獨立的ASP.Net Core Web API項目。使用[ApiController]特性來定義控制器，通過HttpClient進行服務間通信。

[ApiController]
[Route("api/[controller]")]
public class CatalogController : ControllerBase
{
    private readonly ICatalogService _catalogService;

    public CatalogController(ICatalogService catalogService)
    {
        _catalogService = catalogService;
    }

    [HttpGet]
    public async Task<IActionResult> Get()
    {
        var items = await _catalogService.GetCatalogItemsAsync();
        return Ok(items);
    }
}

數據庫訪問

使用Entity Framework Core進行數據庫訪問，支持SQL Server和MongoDB。通過依賴注入（DI）將數據庫上下文注入到服務中。

public class CatalogContext : DbContext
{
    public CatalogContext(DbContextOptions<CatalogContext> options) : base(options) { }

    public DbSet<CatalogItem> CatalogItems { get; set; }
}

前端實現

Angular組件

前端使用Angular組件化開發，每個功能模塊對應一個組件。例如，商品列表組件ProductListComponent負責展示商品信息。

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  products: Product[];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.productService.getProducts().subscribe(products => {
      this.products = products;
    });
  }
}

服務與HTTP請求

通過Angular的HttpClient模塊與后端API進行通信。

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = 'https://localhost:5001/api/catalog';

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

開發中的最佳實踐

容器化與Docker

項目使用Docker進行容器化，每個微服務都打包為一個Docker鏡像。通過docker-compose文件定義服務之間的依賴關系，實現一鍵部署。

version: '3.4'

services:
  catalog.api:
    image: eshop/catalog.api:latest
    container_name: catalog.api
    environment:
      - ConnectionString=Server=sql.data;Database=CatalogDB;User Id=sa;Password=Pass@word
    depends_on:
      - sql.data

CI/CD流水線

使用Azure DevOps配置CI/CD流水線，實現代碼提交后自動構建、測試和部署。通過YAML文件定義流水線步驟，確保每次代碼變更都能快速、安全地部署到生產環境。

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '5.x'
    installationPath: $(Agent.ToolsDirectory)/dotnet

- script: dotnet build --configuration Release
  displayName: 'Build Project'

- script: dotnet test --configuration Release
  displayName: 'Run Tests'

- task: Docker@2
  inputs:
    containerRegistry: '$(dockerRegistryServiceConnection)'
    repository: 'eshop/catalog.api'
    command: 'buildAndPush'
    Dockerfile: '**/Dockerfile'
    tags: '$(Build.BuildId)'

結論

eShopOnContainers項目展示了如何結合ASP.Net Core和Angular構建一個現代化的電子商務平臺。通過微服務架構、前后端分離、容器化和CI/CD流水線，該項目不僅具備高可擴展性和靈活性，還符合現代開發的最佳實踐。對于希望深入學習ASP.Net Core和Angular的開發者來說，該項目是一個極好的參考案例。