当前位置：首页 > news >正文

几十行代码搞定CRUD：建好实体和菜单，页面自动生成

news 2026/5/28 12:16:03

前面两篇我们讲了怎么3分钟搭一个Blazor后台，以及项目的目录结构。今天讲点更爽的——怎么在写少量代码或不写代码的情况下，把一个新模块的后台页面搞出来。

一、传统方式：写一个模块要多久？

假设你要加一个「产品管理」模块，传统开发流程：

建数据库表（写SQL）
写实体类（映射字段）
写Repository（数据访问）
写Service（业务逻辑）
写Controller（API接口）
写DTO（数据传输对象）
写前端页面（表格、表单、弹窗）
写前端API调用（axios、fetch）
联调、改bug

一套下来，半天过去了。

如果用EasyAdminBlazor呢？

二、EasyAdminBlazor方式：四步搞定

第1步：创建实体类这一步也可以交给AI生成

在Entities/文件夹下新建一个类，继承EntityFull：

using EasyAdminBlazor.Attributes;
using FreeSql.DataAnnotations;namespace EasyAdminBlazorDemo.Entities
{/// <summary>/// 产品实体/// </summary>[AutoGenerateClass(Filterable = true)]  // 详细注解可参考：https://www.blazor.zone/table/attribute[Table(Name = "product")]public class Product : EntityFull{/// <summary>/// 产品名称/// </summary>[Column(StringLength = 100)]public string Name { get; set; } = string.Empty;/// <summary>/// 产品价格/// </summary>[Column(Precision = 10, Scale = 2)]public decimal Price { get; set; }/// <summary>/// 产品描述/// </summary>[Column(StringLength = 500)]public string Description { get; set; } = string.Empty;/// <summary>/// 是否上架/// </summary>public bool IsActive { get; set; } = true;/// <summary>/// 排序/// </summary>public int SortCode { get; set; } = 99;}
}

这就完了？对，数据库表都不用你建，FreeSql会自动同步。

第2步：添加菜单

运行项目，进入后台

找到「系统管理」→「菜单管理」

点击「添加菜单」

填写：

菜单名称：产品管理
菜单类型：选择「增删改查」

点击保存

第3步：一键生成页面

在菜单列表里找到刚加的「产品管理」

点击该行右侧的「配置」按钮

在弹出的窗口里，选择刚才创建的Product实体类

点击「生成 Blazor 代码」

系统会自动在 Components/Admin/ 目录下生成 Product.razor 文件，页面代码已经有了。

第4步：刷新页面

刷新后台，左侧菜单会出现「产品管理」，点进去，一个完整的 CRUD 页面就在眼前了。

三、生成的页面长什么样？

生成的 Product.razor 文件内容大概是这样的：

@page "/Admin/Product"
@attribute [TabItemOption(Text = "产品管理")]<AdminTable TItem="Product" TKey="long"ShowAdvancedSearch="true"ShowImportButton="false" ShowExportButton="true" ShowExtendButtons="true"IsPagination="true" ShowSearch="true" IsMultipleSelect="true"><TableColumns><TableColumn @bind-Field="context.Name" Text="产品名称" Filterable="true" Searchable="true" /><TableColumn @bind-Field="context.Price" Text="价格" /><TableColumn @bind-Field="context.Description" Text="描述" /><TableColumn @bind-Field="context.IsActive" Text="是否上架" /><TableColumn @bind-Field="context.SortCode" Text="排序" /><TableColumn @bind-Field="context.CreatedTime" Text="创建时间" /></TableColumns></AdminTable>

你一行代码都没写，增删改查、分页、排序、筛选、导入、导出，全有了。

四、如果要自定义列怎么办？

两种方式：

方式一：用 `[AutoGenerateClass]` 注解自动生成

直接在实体类上加 [AutoGenerateClass(Filterable = true)]，页面里可以什么都不写：

<AdminTable TItem="Product" TKey="long"ShowImportButton="true"ShowExportButton="true"><!-- 不需要写TableColumn，会自动根据实体属性生成 -->
</AdminTable>

方式二：手动控制列

如果你只想显示部分列，或者自定义列的显示方式，就在 <TableColumns> 里写：

<TableColumns><TableColumn @bind-Field="context.Name" Text="产品名称" /><TableColumn @bind-Field="context.Price" Text="价格"><Template>¥@context.Price.ToString("0.00")</Template></TableColumn><!-- 不想显示的列就不写 -->
</TableColumns>

两种方式混着用也行，灵活性很高。

五、功能清单

一个 AdminTable 组件，自带以下功能：

功能	说明	启用方式
增删改查	自动	默认启用
分页	自动	默认启用
排序	点击表头	默认启用
搜索	全局搜索	`ShowSearch="true"`
筛选	列筛选	`Filterable="true"`
导入Excel	批量导入	`ShowImportButton="true"`
导出Excel	导出当前数据	`ShowExportButton="true"`
多选	批量操作	`IsMultipleSelect="true"`