当前位置: 首页 > news >正文

【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.lryc.cn/news/311804.html

相关文章:

  • ThreeJs同一个场景多个相机的显示
  • Vue基础篇
  • 计算机视觉基础知识(十六)--图像识别
  • 数仓开发-2023/2/29
  • ipv6过渡技术-IPv4 over IPv6隧道示例
  • SpringBoot约定大于配置
  • DHCP自动获取IP地址实验(华为)
  • 探索Terraform实践:优化基础设施管理
  • MYSQL高级_目录
  • MongoDB获评2023年Gartner®云数据库管理系统“领导者”
  • 基于FastAPI构造一个AI模型部署应用
  • 【Unity】使用ScriptableObject存储数据
  • ChatGPT聊天机器人数据隐私和安全问题
  • MyBatis三个经典问题
  • JavaEE+springboot教学仪器设备管理系统o9b00-springmvc
  • Java项目:37 springboot003图书个性化推荐系统的设计与实现
  • mysql 8 修改账号密码
  • 拜占庭将军问题与区块链
  • 字节跳动热门的前端开源项目
  • uniapp+vue基于Android的图书馆借阅系统qb4y3-nodejs-php-pyton
  • RabbitMQ如何实现延迟消息?
  • Svg Flow Editor 原生svg流程图编辑器(一)
  • 头像剪切上传
  • 24计算机考研调剂 | 北京信息科技大学
  • 06 - 镜像管理
  • 最简单 导航栏 html css
  • PostgreSQL的学习心得和知识总结(一百三十一)|深入理解PostgreSQL数据库如何使用psql中的变量
  • 支付宝小程序模板开发,实现代小程序备案申请
  • 怎么培养孩子的学习习惯?
  • deeplearning with pytorch (三)