【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.mzph.cn/news/714567.shtml

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

相关文章

Dynamo幕墙探究系列(一)

一直想写个系列教程,但是没有那么多时间整理资料,这次呢,先弄个小系列吧,还是和之前差不多的幕墙测试,我们分几节课,一步一步深入研究。 今天先开个小头儿,要弄的,就是下面这么个模型…

对象锁与类锁

不同锁互不影响,共用一个锁,可能会发生阻塞。 1.在修饰静态方法时,锁定的是当前类的 Class 对象,在下面的例子中就是SycTest1.class 2.当修饰非静态方法时,锁定的就是 this 对象,即当前的实例化对象 public…

【Git教程】(四)版本库 —— 存储系统,存储目录,提交对象及其命名、移动与复制~

Git教程 版本库 1️⃣ 一种简单而高效的存储系统2️⃣ 存储目录:Blob 与 Tree3️⃣ 相同数据只存储一次4️⃣ 压缩相似内容5️⃣ 不同文件的散列值相同6️⃣ 提交对象7️⃣ 提交历史中的对象重用8️⃣ 重命名、移动与复制🌾 总结 事实上,我们…

keil MDK安装armcc V5编译器

不知道从什么时候开始,Keil MDK默认不支持V5的编译器了,里面默认只有V6的编译器,设置界面跟V5有很大的差异不太熟悉。最可怕的是,之前使用V5编译的工程,换成V6编译器后居然报错...虽然修改一下应该也可以正常编译&…

SQL面试题(2)

第一题 创建trade_orders表: create table `trade_orders`( `trade_id` varchar(255) NULL DEFAULT NULL, `uers_id` varchar(255), `trade_fee` int(20), `product_id` varchar(255), `time` varchar(255) )ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_…

web自动化笔记九:验证码的处理方式

一、验证码常用的处理方式 ①、说明:Selenium中并没有对验证码处理的方法,在这里我们介绍一下针对验证码的几种常用处理方式 ②、方式: 1)、去掉验证码(测试环境下采用) …

RDD算子介绍

1. RDD算子 RDD算子也叫RDD方法,主要分为两大类:转换和行动。转换,即一个RDD转换为另一个RDD,是功能的转换与补充,比如map,flatMap。行动,则是触发任务的执行,比如collect。所谓算子…

Mac专用投屏工具AirServer 7.27 for Mac中文版2024最新图文教程

Mac专用投屏工具AirServer 7.27 for Mac中文版是一款适用于Mac的投屏工具,可以将Mac屏幕快速投影到其他设备上,如电视、投影仪、平板等。 Mac专用投屏工具AirServer 7.27 for Mac中文版具有优秀的兼容性,可以与各种设备配合使用。无论是iPhon…

基于springboot+vue的在线考试系统(源码+论文)

文章目录 目录 文章目录 前言 一、功能设计 二、功能页面 三、论文 前言 现在我国关于在线考试系统的发展以及专注于对无纸化考试的完善程度普遍不高,关于对考试的模式还大部分还停留在纸介质使用的基础上,这种教学模式已不能解决现在的时代所产生的考试…

【MySQL】数据库的操作

【MySQL】数据库的操作 目录 【MySQL】数据库的操作创建数据库数据库的编码集和校验集查看系统默认字符集以及校验规则查看数据库支持的字符集查看数据库支持的字符集校验规则校验规则对数据库的影响数据库的删除 数据库的备份和恢复备份还原不备份整个数据库,而是备…

YOLOv9改进|增加SPD-Conv无卷积步长或池化:用于低分辨率图像和小物体的新 CNN 模块

专栏介绍:YOLOv9改进系列 | 包含深度学习最新创新,主力高效涨点!!! 一、文章摘要 卷积神经网络(CNNs)在计算即使觉任务中如图像分类和目标检测等取得了显著的成功。然而,当图像分辨率较低或物体较小时&…

【LeetCode刷题】146. LRU 缓存

请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,否则返回 -…

【InternLM 实战营笔记】浦语·灵笔的图文理解及创作部署、 Lagent 工具调用 Demo

浦语灵笔的图文理解及创作部署 浦语灵笔是基于书生浦语大语言模型研发的视觉-语言大模型,提供出色的图文理解和创作能力,结合了视觉和语言的先进技术,能够实现图像到文本、文本到图像的双向转换。使用浦语灵笔大模型可以轻松的创作一篇图文推…

进程间的通信 -- 共享内存

一 共享内存的概念 1. 1 共享内存的原理 之前我们学过管道通信,分为匿名管道和命名管道,匿名管道通过父子进程的属性继承原理来完成父子进程看到同一份资源的目的,而命名管道则是通过路径与文件名来唯一标识管道文件,来让不同的进…

typescript 的常用方式

文章目录 前言一、绑定props 默认值的方式:withDefaults1.vue2 的props设置默认值2.vue3 的props设置默认值(1) 不设置默认值的写法(2) 设置默认值的写法(分离模式)(3) 设置默认值的写法(组合模式) 二、定义一个二维数…

Matlab在同一张图中如何加入多个图例

根据代码最终画出的图片如下: 其实原理很简单,就是在一张figure中画多个坐标轴,每个坐标轴都有对应的图例,之后再将多余坐标轴隐藏,只保留一个即可。 代码如下: clear all; close all;dd_linewidth 1;a …

maven archetype 项目原型

拓展阅读 maven 包管理平台-01-maven 入门介绍 Maven、Gradle、Ant、Ivy、Bazel 和 SBT 的详细对比表格 maven 包管理平台-02-windows 安装配置 mac 安装配置 maven 包管理平台-03-maven project maven 项目的创建入门 maven 包管理平台-04-maven archetype 项目原型 ma…

Spring学习笔记(六)利用Spring的jdbc实现学生管理系统的用户登录功能

一、案例分析 本案例要求学生在控制台输入用户名密码,如果用户账号密码正确则显示用户所属班级,如果登录失败则显示登录失败。 (1)为了存储学生信息,需要创建一个数据库。 (2)为了程序连接数…

php源码 单色bmp图片取模工具 按任意方式取模 生成字节数组 自由编辑点阵

http://2.wjsou.com/BMP/index.html 想试试chatGPT4生成,还是要手工改 php 写一个网页界面上可以选择一张bmp图片,界面上就显示这张bmp图片, 点生成取模按钮,在图片下方会显示这张bmp图片的取模数据。 取模规则是按界面设置的&a…

Linux 的交换空间(swap)是什么?有什么用?

目录 swap是什么?swap有什么用?swap使用典型场景如何查看你的系统是否用到交换空间呢?查看系统中swap in/out的情况 swap是什么? swap就是磁盘上的一块区域。它和Windows系统中的交换文件作用类似,但是它是一段连续的…