首页
/ 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 FastAPI管理后台开发新选择：FastAPI-Amis-Admin框架解析2 后台开发效率瓶颈如何破解？FastAPI-Amis-Admin的低代码架构方案3 Python后台开发框架效率革命：FastAPI-Amis-Admin的低代码解决方案4 颠覆性Python后台框架：零基础如何30分钟搭建企业级管理系统？5 3个维度提升Python后台开发效率：企业级零代码管理系统解决方案6 如何30分钟搭建企业级后台？揭秘FastAPI-Amis-Admin的开发魔力7 FastAPI-Amis-Admin：企业级后台自动化构建的技术解密8 10分钟上手！amis列表组件：3种布局+5大交互技巧让数据展示更高效9 4大突破点：FastAPI-Amis-Admin如何让开发者效率提升10倍10 零基础玩转amis：可视化低代码开发快速上手指南
热门项目推荐
相关项目推荐

热门内容推荐

1 解锁编程技能的实践之旅：从零构建你的技术世界2 技术实践探索：从零开始构建核心系统的实践指南3 build-your-own-x：编程探险家的技术发现之旅4 亲手锻造技术引擎：从0到1构建核心系统的实践指南5 技术解构与实践指南：从实现原理到创新应用的build-your-own-x探索之旅6 从零构建技术实践指南：探索build-your-own-x项目的学习价值

最新内容推荐

跨系统应用融合：APK Installer实现Windows环境下安卓应用运行的技术路径探索如何用OpCore Simplify构建稳定黑苹果系统？掌握这3大核心策略ComfyUI-LTXVideo实战攻略：3大核心场景的视频生成解决方案告别3小时抠像噩梦：AI如何让人人都能制作电影级视频Anki Connect：知识管理与学习自动化的API集成方案Laigter法线贴图生成工具零基础实战指南：提升2D游戏视觉效率全攻略如何用智能助手实现高效微信自动回复？全方位指南3步打造高效游戏自动化工具：从入门到精通的智能辅助方案掌握语音分割：从入门到实战的完整路径开源翻译平台完全指南：从搭建到精通自托管翻译服务

项目优选

收起
kernelkernel
deepin linux kernel
C
28
16
atomcodeatomcode
Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started
Rust
568
98
docsdocs
暂无描述
Dockerfile
709
4.51 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
958
955
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.61 K
942
pytorchpytorch
Ascend Extension for PyTorch
Python
572
694
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
413
339
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
1.42 K
116
flutter_flutterflutter_flutter
暂无简介
Dart
951
235
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
2