首页
/ 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 百度amis项目中表格行列合并功能解析7 开源项目最佳实践教程：amis-react-starter8 【亲测免费】 FastAPI-Amis-Admin：构建高性能管理后台的利器9 AMIS 项目中 Flex 布局与 CRUD 表格高度自适应问题解析10 百度amis项目中CRUD组件filter与column联动问题解析
热门项目推荐
相关项目推荐

热门内容推荐

1 【亲测免费】 开源项目 `build-your-own-x` 使用指南2 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解

最新内容推荐

终极Emoji表情配置指南：从config.yaml到一键部署全流程如何用Aider AI助手快速开发游戏：从Pong到2048的完整指南从崩溃到重生：Anki参数重置功能深度优化方案 RuoYi-Cloud-Plus 微服务通用权限管理系统技术文档 GoldenLayout 布局配置完全指南 Tencent Cloud IM Server SDK Java 技术文档 解决JumpServer v4.10.1版本Windows发布机部署失败问题 最完整2025版！SeedVR2模型家族（3B/7B）选型与性能优化指南2025微信机器人新范式：从消息自动回复到智能助理的进化之路3分钟搞定！团子翻译器接入Gemini模型超详细指南

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
525
3.72 K
pytorchpytorch
Ascend Extension for PyTorch
Python
329
391
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
877
578
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
335
162
flutter_flutterflutter_flutter
暂无简介
Dart
764
189
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.33 K
746
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解
Java
67
20
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
302
350