【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.pswp.cn/news/714567.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/714567.shtml
英文地址,請注明出處:http://en.pswp.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編譯器后居然報錯...雖然修改一下應該也可以正常編譯&…

神經網絡基礎知識:LeNet的搭建-訓練-預測

1.參考視頻: 2.1 pytorch官方demo(Lenet)_嗶哩嗶哩_bilibili 2.總結: (1)LeNet網絡就是 我最開始用來預測mnist數據集的那個網絡,簡單的2個conv2個maxpool3個linear層 (2)up主整理的train.py…

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。所謂算子…

LeetCode 1551.是數組中所有元素相等的最小操作數

存在一個長度為 n 的數組 arr &#xff0c;其中 arr[i] (2 * i) 1 &#xff08; 0 < i < n &#xff09;。 一次操作中&#xff0c;你可以選出兩個下標&#xff0c;記作 x 和 y &#xff08; 0 < x, y < n &#xff09;并使 arr[x] 減去 1 、arr[y] 加上 1 &…

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

Mac專用投屏工具AirServer 7.27 for Mac中文版是一款適用于Mac的投屏工具&#xff0c;可以將Mac屏幕快速投影到其他設備上&#xff0c;如電視、投影儀、平板等。 Mac專用投屏工具AirServer 7.27 for Mac中文版具有優秀的兼容性&#xff0c;可以與各種設備配合使用。無論是iPhon…

基于springboot+vue的在線考試系統(源碼+論文)

文章目錄 目錄 文章目錄 前言 一、功能設計 二、功能頁面 三、論文 前言 現在我國關于在線考試系統的發展以及專注于對無紙化考試的完善程度普遍不高&#xff0c;關于對考試的模式還大部分還停留在紙介質使用的基礎上&#xff0c;這種教學模式已不能解決現在的時代所產生的考試…

【MySQL】數據庫的操作

【MySQL】數據庫的操作 目錄 【MySQL】數據庫的操作創建數據庫數據庫的編碼集和校驗集查看系統默認字符集以及校驗規則查看數據庫支持的字符集查看數據庫支持的字符集校驗規則校驗規則對數據庫的影響數據庫的刪除 數據庫的備份和恢復備份還原不備份整個數據庫&#xff0c;而是備…

YOLOv9改進|增加SPD-Conv無卷積步長或池化:用于低分辨率圖像和小物體的新 CNN 模塊

專欄介紹&#xff1a;YOLOv9改進系列 | 包含深度學習最新創新&#xff0c;主力高效漲點&#xff01;&#xff01;&#xff01; 一、文章摘要 卷積神經網絡(CNNs)在計算即使覺任務中如圖像分類和目標檢測等取得了顯著的成功。然而&#xff0c;當圖像分辨率較低或物體較小時&…

【LeetCode刷題】146. LRU 緩存

請你設計并實現一個滿足 LRU (最近最少使用) 緩存 約束的數據結構。 實現 LRUCache 類&#xff1a; LRUCache(int capacity) 以 正整數 作為容量 capacity 初始化 LRU 緩存int get(int key) 如果關鍵字 key 存在于緩存中&#xff0c;則返回關鍵字的值&#xff0c;否則返回 -…

全量知識系統問題及SmartChat給出的答復 之9 三套工具之4語法解析器 之2

Q23. 一個語言的語法簡約規則 這些規則顯示show 在一個給定單詞&#xff08;a given word&#xff09;的右邊或左邊可能出現的單詞的類別。句型的多樣性variety不是復雜文法&#xff08;a complex grammar&#xff09;的結果&#xff0c;而是簡單語法&#xff08;a simple gra…

【InternLM 實戰營筆記】浦語·靈筆的圖文理解及創作部署、 Lagent 工具調用 Demo

浦語靈筆的圖文理解及創作部署 浦語靈筆是基于書生浦語大語言模型研發的視覺-語言大模型&#xff0c;提供出色的圖文理解和創作能力&#xff0c;結合了視覺和語言的先進技術&#xff0c;能夠實現圖像到文本、文本到圖像的雙向轉換。使用浦語靈筆大模型可以輕松的創作一篇圖文推…

進程間的通信 -- 共享內存

一 共享內存的概念 1. 1 共享內存的原理 之前我們學過管道通信&#xff0c;分為匿名管道和命名管道&#xff0c;匿名管道通過父子進程的屬性繼承原理來完成父子進程看到同一份資源的目的&#xff0c;而命名管道則是通過路徑與文件名來唯一標識管道文件&#xff0c;來讓不同的進…

學習Android的第二十一天

目錄 Android ProgressDialog (進度條對話框) 例子 Android DatePickerDialog 日期選擇對話框 例子 Android TimePickerDialog 時間選擇對話框 Android PopupWindow 懸浮框 構造函數 方法 例子 官方文檔 Android OptionMenu 選項菜單 例子 官方文檔 Android Progr…

Java實戰:Spring Boot中各類參數校驗機制

引言 在開發Web應用程序時&#xff0c;對客戶端傳入的參數進行有效校驗是保證系統安全性和穩定性的重要環節。Spring Boot作為一個現代化的Java開發框架&#xff0c;提供了多種參數校驗的方法和工具&#xff0c;以滿足不同場景下的需求。本文將深入探討Spring Boot中實現各種參…

typescript 的常用方式

文章目錄 前言一、綁定props 默認值的方式&#xff1a;withDefaults1.vue2 的props設置默認值2.vue3 的props設置默認值(1) 不設置默認值的寫法(2) 設置默認值的寫法&#xff08;分離模式&#xff09;(3) 設置默認值的寫法&#xff08;組合模式&#xff09; 二、定義一個二維數…