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

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

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

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

  1. 建数据库表（写SQL）
  2. 写实体类（映射字段）
  3. 写Repository（数据访问）
  4. 写Service（业务逻辑）
  5. 写Controller（API接口）
  6. 写DTO（数据传输对象）
  7. 写前端页面（表格、表单、弹窗）
  8. 写前端API调用（axios、fetch）
  9. 联调、改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"

六、效果对比

开发方式 代码量 耗时 需要写API？
传统前后端分离 几百行 半天 ✅ 需要
EasyAdminBlazor 0行 3分钟 ❌ 不需要

你没看错，0行代码，3分钟，一个完整的产品管理模块就上线了。

七、注意事项

  • 实体类须继承 EntityFull：它已经包含了 Id、CreatedTime、UpdatedTime 等通用字段
  • [AutoGenerateClass] 注解是可选的：加了这个注解，页面里可以不用写 TableColumn
  • 导入文件大小限制5MB：默认限制，可以在配置里调整
  • 权限自动控制：按钮的显示/隐藏会根据用户的权限自动处理

下一篇预告

《博客后台实战：用AdminBlazor管理文章和专栏》

实体关联怎么做？列表显示关联表的名称怎么配置？筛选器怎么变成下拉框？下一篇统统告诉你。

🔗 文档：https://easyadmim.wang-zhan.com.cn/doc
🔗 源码：https://gitee.com/gudufy/EasyAdminBlazor

EasyAdminBlazor —— 我自己接单的屠龙刀，现在也给你用。

posted @ 2026-05-28 12:02  gudufy  阅读(0)  评论(0)    收藏  举报