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

2024-03-02 12:28

本文主要是介绍【JSON2WEB】07 Amis可视化设计器CRUD增删改查,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

1 新增页面

Step 1 启动amis-editor

在这里插入图片描述

Setp 2 新增页面

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

Step 3 编辑页面

点页面编辑按钮,即可打开Amis可视化编辑器的编辑页面:
在这里插入图片描述
不勾选【边栏】和【工具栏】
在这里插入图片描述
页面变得比较纯粹了,可以先【预览】一下:
在这里插入图片描述
大概就是这个样子。切换到代码可以看看页面的代码。
在这里插入图片描述

2 CRUD增删改查配置

Setp 1 把数据容器的表格2拖放到内容区

自动调出表格2创建向导。
在这里插入图片描述

Step 2 设置数据来源API接口

api为rest接口,返回数据必须类似如下内容:

{"status": 0,"msg": "","data": {"items": [{// 每一行的数据"id": 1,"xxx": "xxxx"}]}
}

CRUD 组件对数据源接口的数据结构要求如下:
items或rows:用于返回数据源数据,格式是数组
status :0表示成功
msg:辅助信息
在这里插入图片描述

如果接口返回没有问题,可以点击【基于接口自动生成字段】,可自动生成字段信息。

Step 2 功能配置

在这里插入图片描述

列表展示功能根据需要增减字段

新增记录,主要配置新增接口

在这里插入图片描述
新增记录改为POST请求即可
在这里插入图片描述

简单查询,保持默认即可

查看详情,也不需要配置

编辑记录,需要配置编辑接口api和初始化接口API

在这里插入图片描述
$P_ID是引用当前行变量的P_ID的值。编辑用PUT请求。初始化为GET请求

删除记录,配置DELETE请求

http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID

在这里插入图片描述

Step 3 确认,应该能看到接口返回的数据了

在这里插入图片描述

设置前端分页

这样一次提出所有数据,在前端分页。
在这里插入图片描述

设置列可搜索、可排序

选中某列,属性勾选可搜索、可排序即可。
在这里插入图片描述
这里的搜索条件和上面条件搜索的是共享的。

3 CRUD操作演示

直接点击预览即可操作演示。

3.1 增

点击【新增】按钮,弹窗输入
在这里插入图片描述
因为设置的前端分页,需要刷新页面才能查到新增的记录。
在这里插入图片描述

3.2 改

点击行内的【编辑】按钮,修改一下
在这里插入图片描述
提交保存刷新再查询
在这里插入图片描述

3.3 删

点击行内【删除】按钮,【确认】即可删除
在这里插入图片描述
刷新再查询,删除成功。

3.4 查

组合条件查询

所有的查询都是模糊查询。
在这里插入图片描述

快速搜索

在这里插入图片描述
点【搜索】

在这里插入图片描述

查看详情

在这里插入图片描述

按列排序

在这里插入图片描述

查询条件本地缓存,修改及提交

本地缓存后,刷新页面后会自动填充回来查询条件。

在这里插入图片描述
修改及提交可以实现增量查询的效果。

在这里插入图片描述

新增 弹窗 改为抽屉

dialog 改为 drawer 即可
在这里插入图片描述

在这里插入图片描述
预览新增一下
在这里插入图片描述
行内查看和编辑同样也可以改为抽屉。

冻结表头

每页显示的行数较多时需要 冻结表头
在这里插入图片描述
冻结后的预览效果:
在这里插入图片描述
先咋样了,还有还多功能不会用,慢慢摸索吧。

这篇关于【JSON2WEB】07 Amis可视化设计器CRUD增删改查的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766124

相关文章

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

[MySQL表的增删改查-进阶]

🌈个人主页:努力学编程’ ⛅个人推荐: c语言从初阶到进阶 JavaEE详解 数据结构 ⚡学好数据结构,刷题刻不容缓:点击一起刷题 🌙心灵鸡汤:总有人要赢,为什么不能是我呢 💻💻💻数据库约束 🔭🔭🔭约束类型 not null: 指示某列不能存储 NULL 值unique: 保证某列的每行必须有唯一的值default: 规定没有给列赋值时的默认值.primary key:

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域,图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能,成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限,比如只有一台高性能电脑时,如何高效地让七人同时流畅地进行设计工作,便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器(CPU):选择多核、高线程的处理器,例如Intel的至强系列或AMD的Ry

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

SprinBoot+Vue网络商城海鲜市场的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者,全网30w+

单片机毕业设计基于单片机的智能门禁系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍程序代码部分参考 设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订

Python:豆瓣电影商业数据分析-爬取全数据【附带爬虫豆瓣,数据处理过程,数据分析,可视化,以及完整PPT报告】

**爬取豆瓣电影信息,分析近年电影行业的发展情况** 本文是完整的数据分析展现,代码有完整版,包含豆瓣电影爬取的具体方式【附带爬虫豆瓣,数据处理过程,数据分析,可视化,以及完整PPT报告】   最近MBA在学习《商业数据分析》,大实训作业给了数据要进行数据分析,所以先拿豆瓣电影练练手,网络上爬取豆瓣电影TOP250较多,但对于豆瓣电影全数据的爬取教程很少,所以我自己做一版。 目

Spring的设计⽬标——《Spring技术内幕》

读《Spring技术内幕》第二版,计文柯著。 如果我们要简要地描述Spring的设计⽬标,可以这么说,Spring为开发者提供的是⼀个⼀站式的轻量级应⽤开发框架(平台)。 作为平台,Spring抽象了我们在 许多应⽤开发中遇到的共性问题;同时,作为⼀个轻量级的应⽤开发框架,Spring和传统的J2EE开发相⽐,有其⾃⾝的特点。 通过这些⾃⾝的特点,Spring充分体现了它的设计理念:在

开题报告中的研究方法设计:AI能帮你做什么?

AIPaperGPT,论文写作神器~ https://www.aipapergpt.com/ 大家都准备开题报告了吗?研究方法部分是不是已经让你头疼到抓狂? 别急,这可是大多数人都会遇到的难题!尤其是研究方法设计这一块,选定性还是定量,怎么搞才能符合老师的要求? 每次到这儿,头脑一片空白。 好消息是,现在AI工具火得一塌糊涂,比如ChatGPT,居然能帮你在研究方法这块儿上出点主意。是不