總算到重點中的核心內容,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 即可
預覽新增一下
行內查看和編輯同樣也可以改為抽屜。
凍結表頭
每頁顯示的行數較多時需要 凍結表頭
凍結后的預覽效果:
先咋樣了,還有還多功能不會用,慢慢摸索吧。