【JSON2WEB】07 Amis可视化设计器CRUD增删改查

原创 已于 2025-01-08 17:18:42 修改 · 2.7k 阅读 · 11
标签
#amis #json2web
于 2024-03-01 14:21:32 首次发布
本文详细介绍了如何使用JSON2WEB进行管理信息系统的设计，包括使用Amis编辑器创建和配置CRUD功能，如新增、编辑、查询和删除操作，以及前端分页、搜索、排序和弹窗抽屉的设置。

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

总算到重点中的核心内容，CRUD也就是增删改查，一个设计科学合理的管理信息系统，95%的就是CRUD，达不到这个比例要重新考虑一下你的数据库设计了。

1 新增页面

Step 1 启动amis-editor

在这里插入图片描述

Setp 2 新增页面

在这里插入图片描述
名称和路径随便命名，然后【确认】，左侧导航就出现新建的页面【A股Top3】了。
在这里插入图片描述

Step 3 编辑页面

点页面编辑按钮，即可打开Amis可视化编辑器的编辑页面：
在这里插入图片描述
不勾选【边栏】和【工具栏】

最低0.47元/天 解锁文章
amis-tutorial:Amis 一些使用总结和样例
05-29
Amis 组件库使用技巧 总结了 Amis一些使用技巧，帮助初学者入门 当前版本 Amis 1.1.0 demo预览： 支持了snowpack,可10秒内启动 SnowPack 启动： yarn && yarn snowpack WebPack 启动，请耐心等待... react-app-rewired 更改为webpack-dev-server，方便扩展 yarn && yarn server 整理的内容包括： 1. HelloWorld (基于 Create React App) 文件路径： 2. Amis 基本使用 提供AmisRender 用来所有页面进行注册使用。 3. Amis 组件通信 3.1 target-Name 方式 3.2 桥接方式(非官方方式) JSSDK 使用方式会返回scope,并且可以scope.getComponentByName("form1") 方式获取
amis-editor-demo:amis 可视化编辑器示例 http
04-28
amis-editor-demo amis 可视化编辑器, 在线体验： 要使用编辑器必须熟悉 React，如果不了解建议使用。 本地运行这个项目 npm i 安装依赖 npm start 开服务 npm run dev 开始编译，等编译出现时间信息后就可以刷新页面看效果了。 在其他项目中使用 amis-editor npm i amis-editor 使用 方法 import {Editor} from 'amis-editor'; render() { return ( <Editor> ) } 属性说明： value: any 值，amis 的json 配置。 onChange: (value: any) => void。 当编辑器修改的时候会触发。 preview?: boolean 是否为预览状态。 autoFocus?
austin-admin 消息推送平台前端项目依赖低代码平台Amis 怎么使用
Start的小笔记
01-16 1830
austin-admin 消息推送平台前端项目🔥依赖低代码平台Amis 怎么使用，怎么使用pm2部署
【JSON2WEB】14 基于Amis的CRUD开发30分钟速成
REST2SQL ，JSON2WEB
04-11 1662
经过近两个月的摸索，基于Amis-editor的CRUD开发的套路基本搞清楚了。本帖记录一下开发的全过程。
amis:amis编辑器生成JSON使用方法。
Alan0728的博客
07-29 9133
上一篇文章我们讲到 amis如何让用户自由更改的方法，不通过起前端同学重新更改代码打包部署的操作。https://blog.csdn.net/Alan0728/article/details/119213559?spm=1001.2014.3001.5502 这篇文章我们看一下amis如何生成JSON 首先打开amis 可视化编辑器, 在线体验：http://aisuda.github.io/amis-editor-demo 点击进去后 左侧是组件 通过托拉拽到中间内容部分，完成一个布...
三、以user表为例，用Amis+Sails实现增删改查操作
JimmyTsai75的博客
01-15 4778
"footerToolbar" : [ "statistics" , //显示统计数据，比如1/3 总共：22 项 "switch-per-page" , //可以切换perPage值（设置pageSize） "pagination" //分页组件 ] ,保存后，界面就有可以设置分页大小的按钮了。"type" : "tpl" , "tpl" : "一共有 ${count} 行数据。
amis中组件crud的使用
dxjren的博客
11-24 1280
amis组件crud的使用
【JSON2WEB】11 基于 Amis 角色功能权限设置页面
REST2SQL ，JSON2WEB
03-27 1752
角色功能权限设置设计 页面分2栏，左边角色，右边为角色功能权限。角色授权保存在数据库表中。
【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器
REST2SQL ，JSON2WEB
04-10 1302
关于数据的问题没有一句SQL不能解决的，如果有就两句。我设计开发的所有信息系统 内嵌 SQL 查询分析器是标配，可执行CRUD的操作，也就是SQL的Insert、Select、Update、Delete操作。号称SQL的四大基本操作。SQL才是做完美的存在。BS前端就不吐槽了，知识点太多，比上下五千年的历史事件还多，比地球上的乡村还多。
【JSON2WEB】 12基于Amis-admin的动态导航菜单树
REST2SQL ，JSON2WEB
04-03 1928
管理信息系统一般注册用户较多，功能页面也很多，不同用户有不同的功能页面的操作权限，根据用户角色功能权限，生成动态的页面导航功能树是我采用的常规操作。
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
Java与大数据相关实践内容分享！
11-29 9917
amis前端低代码框架可视化编辑器amis-editor本地部署流程
amis（crud组件后台拼接展示+分页效果）
weixin_48133875的博客
05-11 1581
【代码】amis（crud组件后台拼接展示+分页效果）
amis组件crud使用踩坑
weixin_38472038的博客
02-08 1165
syncLocation开启后，数据域经过地址栏同步后，原始值被转化为字符串同步回数据域，但布尔值（boolean）同步后不符合预期数据结构，导致组件渲染出错。比如查询条件表单中包含Checkbox组件，此时可以设置{“trueValue”: “1”, “falseValue”: “0”}，将真值和假值设置为字符串格式规避。默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，比如搜索条件、当前页数，这也做的目的是刷新页面的时候还能进入之前的分页。如果不希望这个功能，可以设置。
amis-editor 低代码可视化编辑器开发 和 使用说明
qq_42152032的博客
05-24 8539
​ 1.amis-editor可视化编辑器 React版本（推荐）：GitHub - aisuda/amis-editor-demo: amis 可视化编辑器示例 https://aisuda.github.io/amis-editor-demo 建议使用react版本，好维护，升级版本更新package.json中对应版本号即可。 2. vue-amis-sdk(vue版本 vuera转换react为vue )来实现 amis - 低代码前端框架css属性直接用即可。比如 box-shadow。
【低代码】百度开源amis
allanGold
09-23 429
可视化编辑器demo。
amis可视化编辑器：拖拽生成页面的革命性工具
gitblog_00764的博客
09-01 1260
还在为繁琐的前端开发流程而烦恼？还在为重复的表单、列表、详情页编写大量模板代码？amis可视化编辑器通过拖拽式操作，让页面开发变得前所未有的简单高效。本文将深入解析amis可视化编辑器的核心功能、技术架构和使用技巧，帮助您快速掌握这一革命性工具。 ## 什么是amis可视化编辑器？ amis可视化编辑器是基于amis低代码框架的可视化开发工具，它允许开发者通过直观的拖拽操作来构建复杂的Web页...
amis CRUD组件深度剖析：增删改查一体化解决方案
gitblog_01176的博客
09-01 1244
还在为每个业务模块重复编写增删改查页面而烦恼吗？每次新增一个数据管理功能都要重新设计表格、表单、弹窗、分页和搜索功能？amis CRUD组件正是为解决这一痛点而生，通过JSON配置即可快速构建功能完整的数据管理界面。 ## 什么是CRUD组件？ CRUD（Create、Read、Update、Delete）即增删改查，是业务系统中最常见的操作模式。amis CRUD组件是一个高度集成的数据管理...
百度 amis入门
Made In SQL
05-14 2563
amis是一个开源的低代码前端框架，通过JSON配置快速生成复杂的后台管理页面，旨在减少前端开发工作量，提高效率。其核心特点包括基于JSON配置、丰富的UI组件库、可视化编辑器、响应式布局、数据绑定和动态渲染。学习amis首先需要搭建开发环境，安装Node.js并创建项目，然后引入amis的CSS和JS文件。通过官方文档学习JSON配置和组件使用，实践创建简单页面并集成后端数据。深入学习高级特性和性能优化，加入社区获取最新资讯。持续实践并反馈问题，amis提供了丰富的组件库，包括布局类、表单类、数据展示类、
为什么说百度AMIS框架是一个优秀的设计
canonical的博客
05-12 5218
百度AMIS是目前前端开源社区中设计最精良的低代码框架之一，代表了国内前端开源低代码领域的最高水平。AMIS的设计本身是一种通用设计，并不受限于目前它所支持的使用场景。在本文中，我将分析一下AMIS框架的一些设计要点，并介绍Nop平台中集成AMIS框架时所做的一些改进工作。
考虑电动汽车灵活性的微网多时间尺度协调调度研究（Matlab代码实现）
最新发布
06-21
考虑电动汽车灵活性的微网多时间尺度协调调度研究（Matlab代码实现）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值