ABP Framework-Blazor快速实践

前言

很多时候想要一个人快速搭建前端后端，但又不想基于MVC去自己写js开发页面，又或者使用SPA模板，写前端vue/angular/react代码，毕竟这块的学习成本还是有的，借助于Blazor，使用c#尽可能替代js，减少学习成本，并且blazor现在发展也稳定了，还有很多封装好的UI框架，省事许多。

ABP作为后端开发中强有力的框架，也集成好了Blazor作为前端框架，基础版使用了Blazorise作为UI框架，该UI框架可扩展多套CSS框架，诸如Bootstrap、AntDesign、

Material等。当然ABP也提供了更为丰富的LeptanX主题（https://www.leptontheme.com）但有点使用受限。基础版Blazorise的集成也足够满足开发需求了。

下载AbpCli

我需要使用DotNet8.0版本，对应ABP同级最新版本为8.3.4，因此下载Abp Cli 8.3.4版本。

dotnet tool install --global Volo.Abp.Cli --version 8.3.4

创建项目

创建基于Mysql，EfCore，Basic Theme(Blazorise),使用DotNet8.0的项目。此处使用不分层模板(AppNolayer)。

• Blazor Server，具体为Blazor WebApp(Server)模式

abp new AbpBlazorDemo -t app-nolayers -u blazor-server -dbms MySQL -m none --theme basic -csf -v 8.3.4

• Blazor WebAssembly，具体为Blazor WebApp(WebAssembly)模式

abp new AbpBlazorDemo -t app-nolayers -u blazor -dbms MySQL -m none --theme basic -csf -v 8.3.4

如想使用Auto模式（即运行时，先使用Server模式，等WebAssembly资产下载到浏览器后再使用WebAssembly模式）需要使用分层模板，也就是-t app。

abp new AbpBlazorDemo -t app -u blazor-webapp -dbms MySQL -m none --theme basic -csf -v 8.3.4

创建库表

更新appsettings.json中的连接字符串

{
  "ConnectionStrings": {
    "Default": "Server=xxx;Database=AbpBlazorDemo;User ID=root;Password=xxx;"
  }
}

当前项目下执行命令迁移。

dotnet run --project AbpBlazorDemo --migrate-database

文件夹中也有一个.ps1的迁移命令，可以直接用powershell运行。两者是一致的 如上命令之后，库、表、基础数据都创建好了。

效果呈现

运行项目即可见到页面，可使用管理员账号admin/1q2w3E*登录，管理租户、用户、设置等。

参考

https://abp.io/docs/8.3/cli

https://learn.microsoft.com/zh-cn/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0

2025-05-24，望技术有成后能回来看见自己的脚步。