【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 即可
在这里插入图片描述

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

冻结表头

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/504943.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024最新算法:电鳗觅食优化算法(Electric eel foraging optimization,EEFO)求解23个基准函数(提供MATLAB代码)

一、电鳗觅食优化算法 电鳗觅食优化算法(Electric eel foraging optimization,EEFO)由Weiguo Zhao等人提出的一种元启发算法,EEFO从自然界中电鳗表现出的智能群体觅食行为中汲取灵感。该算法对四种关键的觅食行为进行数学建模:相…

【贪心算法】Leetcode 455.分发饼干 376. 摆动序列 53. 最大子数组和

【贪心算法】Leetcode 455 分发饼干 376. 摆动序列【规律很多】53. 最大子数组和 455 分发饼干局部最优推全局最优:尽量用大饼干去满足大胃口的小朋友 376. 摆动序列【规律很多】思想:注意考虑一个坡度留首尾两个点、平坡、首尾 53. 最大子数组和【好思想…

手写模拟器,解放双手!效果炸裂的生产工具

手写模拟器是一款基于Handright的仿手写图片生成软件,可以让你的电脑和手机也能写出漂亮的手写字,你只需要输入你想要写的内容,选择你喜欢的字体和背景,就可以生成一张高仿真的手写图片,用于各种场合,比如做…

vue3 使用实现签到活动demo静态布局详解

文章目录 1. 实现效果2. 签到设置7天布局2.1 实现代码 3 签到设置15天布局3.1 思路分享 4 完整demo代码5. 总结 1. 实现效果 实现一个签到活动的h5页面布局,需求如下 签到活动天数可配置,可配置7天,15天,30天等默认天数要求展示2行…

Github配置ssh key的步骤

1. 检查本地主机是否已经存在ssh key 是否存在 id_rsa 和 id_rsa.pub文件,如果存在,说明已经有SSH Key 如下图所示,则表明已经存在 如果存在,直接跳到第三步 2. 生成ssh key 如果不存在ssh key,使用如下命令生…

数据结构篇十:红黑树

文章目录 前言1. 红黑树的概念2. 红黑树的性质3. 红黑树节点的定义4. 红黑树的插入4.1 情况一: cur为红,p为红,g为黑,u存在且为红4.2 情况二: cur为红,p为红,g为黑,u不存在/u存在且为黑。4.2.1 …

单源最短路的建图方式

1129. 热浪 - AcWing题库 这道题可以有三种方法来做,朴素版的dijkstra、堆优化版的dijkstra和spfa算法 (1)spfa算法 这里的队列用循环队列,而不是像模板那样用普通队列是因为它的队列长度不确定 import java.util.*;public class…

【论文阅读】基于图像处理和卷积神经网络的板式换热器气泡识别与跟踪

Bubble recognizing and tracking in a plate heat exchanger by using image processing and convolutional neural network 基于图像处理和卷积神经网络的板式换热器气泡识别与跟踪 期刊信息:International Journal of Multiphase Flow 2021 期刊级别:…

03、MongoDB -- MongoDB 权限的设计

目录 MongoDB 权限的设计演示前准备:启动 mongodb 服务器 和 客户端 :1、启动单机模式的 mongodb 服务器2、启动 mongodb 的客户端 MongoDB 权限的设计1、MongoDB 的每个数据库都可以保存用户,不止admin数据库可以保存用户。2、保存用户的数据…

JVM的内存区域划分

目录 1.什么是JVM 2.JVM内存区域划分 2.1各区域详解 2.2经典笔试题: 1.什么是JVM JVM也称为Java虚拟机,它是Java代码的运行环境,Java属于半编译半解释形的语言.它的运行环境在虚拟机上,而不是物理设备.Java这么设定主要是为了跨平台,即一套代码,多处使用.我们只需要编译出一…

技巧 文本编辑器 B列每一行数据换行合并到A列中

一. 需求背景 ⏹A列是我们制作的日文版歌词,B列是中文版译文歌词 现在想让B列的每一行歌词,按下图箭头所示插入到A列的每一行后面 二. 通过文本编辑器的替换功能解决 将Excel中的A和B列的数据复制粘贴到文本编辑器中Excel中的列和列之前是通过Tab来分隔…

Matlab|【免费】基于合作博弈的综合能源系统利益分配优化调度

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该程序实现的模型为综合能源系统利益分配优化调度,采用合作博弈方法,模型针对IES系统的P2G、电解槽、甲烷反应器、储氢罐、CHP和燃气锅炉等设备进行建模,实现基于合作博弈的…