首页
/ amis实战指南：5分钟搭建完整CRUD管理系统

amis实战指南：5分钟搭建完整CRUD管理系统

2026-02-04 04:06:24作者：伍希望
amis
前端低代码框架，通过 JSON 配置就能生成各种页面。
项目地址：https://gitcode.com/GitHub_Trending/am/amis

还在为繁琐的前端开发而烦恼？还在重复编写增删改查页面？amis（爱速搭）作为百度开源的前端低代码框架，通过JSON配置就能快速生成各种后台页面。本文将手把手教你如何在5分钟内搭建一个功能完整的CRUD（增删改查）管理系统！

🎯 读完本文你能获得

  • ✅ 了解amis核心概念和优势
  • ✅ 掌握CRUD组件完整配置方法
  • ✅ 学会实现数据列表、搜索、排序、分页
  • ✅ 掌握增删改查操作的完整实现
  • ✅ 了解前后端数据交互机制

📦 amis核心优势对比

特性 传统开发 amis低代码
开发效率 1-3天/页面 5分钟/页面
代码量 1000+行 100行JSON
维护成本 高，需专业前端 低，配置即代码
学习曲线 陡峭（React/Vue） 平缓（JSON Schema）
跨平台 需适配 天然响应式

🚀 5分钟极速入门

环境准备

首先确保已安装Node.js（12+版本），然后通过npm安装amis：

# 创建项目目录
mkdir amis-crud-demo && cd amis-crud-demo

# 初始化项目
npm init -y

# 安装amis
npm install amis

基础HTML结构

创建index.html文件，引入amis资源：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>amis CRUD管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@3.6.0/lib/themes/cxd.css">
</head>
<body>
    <div id="root"></div>
    
    <script src="https://cdn.jsdelivr.net/npm/amis@3.6.0/lib/index.js"></script>
    <script>
        // 在这里编写amis配置
    </script>
</body>
</html>

🏗️ 完整CRUD系统搭建

1. 数据表格展示

首先实现最基本的数据列表展示功能：

const amis = amisRequire('amis/embed');
const amisJSON = {
    type: 'page',
    title: '用户管理系统',
    body: {
        type: 'crud',
        api: {
            method: 'get',
            url: '/api/mock2/sample',
            adaptor: function(payload) {
                return {
                    ...payload,
                    data: {
                        ...payload.data,
                        items: payload.data.rows || []
                    }
                };
            }
        },
        syncLocation: false,
        columns: [
            {
                name: 'id',
                label: 'ID',
                type: 'text',
                sortable: true
            },
            {
                name: 'engine',
                label: '引擎',
                type: 'text',
                searchable: true
            },
            {
                name: 'browser',
                label: '浏览器',
                type: 'text'
            },
            {
                name: 'platform',
                label: '平台',
                type: 'text'
            },
            {
                name: 'version',
                label: '版本',
                type: 'text'
            },
            {
                name: 'grade',
                label: '等级',
                type: 'text'
            }
        ]
    }
};

amis.embed('#root', amisJSON);

2. 添加搜索过滤功能

增强用户体验，添加搜索和过滤功能：

filter: {
    title: '条件搜索',
    body: [
        {
            type: 'input-text',
            name: 'keywords',
            label: '关键字',
            placeholder: '输入搜索关键字',
            clearable: true
        },
        {
            type: 'select',
            name: 'grade',
            label: '等级筛选',
            options: [
                {label: 'A级', value: 'A'},
                {label: 'B级', value: 'B'},
                {label: 'C级', value: 'C'},
                {label: '全部', value: ''}
            ]
        }
    ],
    actions: [
        {
            type: 'reset',
            label: '重置'
        },
        {
            type: 'submit',
            label: '搜索',
            level: 'primary'
        }
    ]
},

3. 实现增删改查操作

添加完整的操作按钮：

{
    type: 'operation',
    label: '操作',
    buttons: [
        {
            type: 'button',
            icon: 'fa fa-eye',
            tooltip: '查看详情',
            actionType: 'dialog',
            dialog: {
                title: '查看详情 - ${engine}',
                body: {
                    type: 'form',
                    body: [
                        {type: 'static', name: 'engine', label: '引擎'},
                        {type: 'static', name: 'browser', label: '浏览器'},
                        {type: 'static', name: 'platform', label: '平台'},
                        {type: 'static', name: 'version', label: '版本'},
                        {type: 'static', name: 'grade', label: '等级'}
                    ]
                }
            }
        },
        {
            type: 'button',
            icon: 'fa fa-pencil',
            tooltip: '编辑',
            actionType: 'drawer',
            drawer: {
                title: '编辑信息',
                body: {
                    type: 'form',
                    api: 'post:/api/mock2/sample/${id}',
                    body: [
                        {type: 'input-text', name: 'engine', label: '引擎', required: true},
                        {type: 'input-text', name: 'browser', label: '浏览器', required: true},
                        {type: 'input-text', name: 'platform', label: '平台', required: true},
                        {type: 'input-text', name: 'version', label: '版本'},
                        {type: 'select', name: 'grade', label: '等级', options: ['A','B','C','D','X']}
                    ]
                }
            }
        },
        {
            type: 'button',
            icon: 'fa fa-trash',
            tooltip: '删除',
            actionType: 'ajax',
            confirmText: '确认要删除这条记录吗？',
            api: 'delete:/api/mock2/sample/${id}'
        }
    ]
}

4. 添加新增功能

在工具栏添加新增按钮：

headerToolbar: [
    {
        type: 'button',
        actionType: 'dialog',
        label: '新增记录',
        icon: 'fa fa-plus',
        level: 'primary',
        dialog: {
            title: '新增记录',
            body: {
                type: 'form',
                api: 'post:/api/mock2/sample',
                body: [
                    {type: 'input-text', name: 'engine', label: '引擎', required: true},
                    {type: 'input-text', name: 'browser', label: '浏览器', required: true},
                    {type: 'input-text', name: 'platform', label: '平台', required: true},
                    {type: 'input-text', name: 'version', label: '版本'},
                    {type: 'select', name: 'grade', label: '等级', options: ['A','B','C','D','X']}
                ]
            }
        }
    },
    'bulkActions',
    'pagination'
],

5. 批量操作功能

添加批量选择和操作功能：

bulkActions: [
    {
        label: '批量删除',
        actionType: 'ajax',
        api: 'delete:/api/mock2/sample/${ids|raw}',
        confirmText: '确定要批量删除选中的 ${count} 条记录吗？'
    },
    {
        label: '批量更新等级',
        actionType: 'dialog',
        dialog: {
            title: '批量更新等级',
            body: {
                type: 'form',
                api: 'post:/api/mock2/sample/bulkUpdate2',
                body: [
                    {type: 'hidden', name: 'ids'},
                    {
                        type: 'select', 
                        name: 'grade', 
                        label: '设置等级',
                        options: ['A','B','C','D','X']
                    }
                ]
            }
        }
    }
],

🔧 后端API接口规范

amis要求后端API返回特定的数据结构：

列表接口响应格式

{
  "status": 0,
  "msg": "ok",
  "data": {
    "items": [
      {
        "id": 1,
        "engine": "Trident",
        "browser": "Internet Explorer 4.0",
        "platform": "Win 95+",
        "version": "4",
        "grade": "X"
      }
    ],
    "total": 100
  }
}

操作接口响应格式

{
  "status": 0,
  "msg": "操作成功"
}

📊 功能特性对比表

功能 实现方式 代码量 备注
数据列表 CRUD组件 10行 自动分页、排序
搜索过滤 filter配置 15行 多条件组合搜索
新增记录 弹窗表单 20行 表单验证、提交
编辑记录 抽屉表单 25行 数据回显、更新
删除记录 Ajax操作 5行 确认提示、刷新
批量操作 bulkActions 15行 多选、批量处理

🎨 高级功能扩展

自定义列渲染

{
    name: 'grade',
    label: '等级',
    type: 'mapping',
    map: {
        'A': '<span class="text-success">优秀</span>',
        'B': '<span class="text-warning">良好</span>',
        'C': '<span class="text-info">一般</span>',
        'X': '<span class="text-danger">不合格</span>'
    }
}

数据统计功能

footerToolbar: [
    {
        type: 'tpl',
        tpl: '总计: ${total} 条记录',
        className: 'text-bold'
    },
    'statistics',
    'switch-per-page', 
    'pagination'
]

数据导出功能

{
    label: '导出Excel',
    actionType: 'download',
    api: '/api/export?keywords=${keywords}'
}

🚨 常见问题排查

Q1: 数据不显示怎么办？

  • 检查API响应格式是否正确
  • 确认items字段存在且为数组
  • 验证status值为0表示成功

Q2: 操作后页面不刷新？

  • 确保操作API返回status: 0
  • 检查是否有错误信息在控制台

Q3: 搜索功能无效？

  • 确认后端支持对应的查询参数
  • 检查filter配置的name字段与API参数匹配

📈 性能优化建议

  1. 分页设置: 合理设置perPage值，避免一次性加载过多数据
  2. 懒加载: 大数据量时使用deferApi实现树形数据懒加载
  3. 缓存策略: 配置cache减少重复请求
  4. 组件复用: 相同结构的CRUD可抽象为模板

🎯 总结

通过amis，我们仅用100行左右的JSON配置就实现了一个功能完整的CRUD管理系统，包含：

  • ✅ 数据列表展示与分页
  • ✅ 多条件搜索过滤
  • ✅ 排序与列配置
  • ✅ 增删改查完整操作
  • ✅ 批量处理功能
  • ✅ 响应式设计

相比传统前端开发需要几天的工作量，amis让5分钟搭建管理系统成为现实。无论是快速原型开发还是生产环境应用，amis都能显著提升开发效率。

📚 下一步学习建议

  1. 深入学习表单组件 - 掌握更复杂的表单场景
  2. 了解数据映射 - 实现灵活的数据转换
  3. 探索事件机制 - 实现组件间联动
  4. 学习自定义组件 - 扩展amis能力边界

开始你的amis低代码之旅吧！只需JSON配置，即可构建专业的管理系统。

amis
前端低代码框架，通过 JSON 配置就能生成各种页面。
项目地址：https://gitcode.com/GitHub_Trending/am/amis
登录后查看全文

相关内容推荐

1 10分钟上手！amis列表组件：3种布局+5大交互技巧让数据展示更高效2 解锁amis全生态：从低代码框架到企业级工具链3 百度amis项目中React16版本下CRUD组件数据异常问题解析4 FastAPI-Amis-Admin入门指南5 3分钟搞定amis本地存储：零代码实现数据持久化方案6 【亲测免费】 FastAPI-Amis-Admin：构建高性能管理后台的利器7 开源项目最佳实践教程：amis-react-starter8 AMIS 项目中 Flex 布局与 CRUD 表格高度自适应问题解析9 优化amis项目中的大数据量表格渲染性能10 百度amis项目中表格行列合并功能解析
热门项目推荐
相关项目推荐

热门内容推荐

1 【亲测免费】 开源项目 `build-your-own-x` 使用指南2 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

Degrees of Lewdity中文汉化终极指南：零基础玩家必看的完整教程Unity游戏翻译神器：XUnity Auto Translator 完整使用指南PythonWin7终极指南：在Windows 7上轻松安装Python 3.9+终极macOS键盘定制指南：用Karabiner-Elements提升10倍效率Pandas数据分析实战指南：从零基础到数据处理高手 Qwen3-235B-FP8震撼升级：256K上下文+22B激活参数7步搞定机械键盘PCB设计：从零开始打造你的专属键盘终极WeMod专业版解锁指南：3步免费获取完整高级功能DeepSeek-R1-Distill-Qwen-32B技术揭秘：小模型如何实现大模型性能突破音频修复终极指南：让每一段受损声音重获新生

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
564
3.83 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
892
659
pytorchpytorch
Ascend Extension for PyTorch
Python
375
443
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
348
198
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
116
145
flutter_flutterflutter_flutter
暂无简介
Dart
794
197
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.36 K
775
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
1.12 K
268
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
308
359