優化效果 · Saber開發手冊

## 優化前端效果 1. 點擊新增，發現都為text類型，時間不是組件，內容也不是文本域，還多處了主鍵字段。 ![](https://img.kancloud.cn/ba/9f/ba9fc74fcb9e399709d0439b1fe5e54b_2202x1282.png) 2. 因為代碼生成默認的表單控件屬性為text，所以針對一些組件，我們需要進行手動配置，就這個模塊而言，我們需要刪掉id和配置content字段和time字段的組件屬性 ![](https://img.kancloud.cn/29/9d/299d5158a99a56d48558e064343dee55_582x446.png) ![](https://img.kancloud.cn/dc/9a/dc9ab27d2ace41c063dad34702358b95_706x1020.png) 3. 刷新頁面再次打開新增，發現組件類型正確，但是布局并不是很好看 ![](https://img.kancloud.cn/83/b8/83b8778c4d599bb86f1667f84e1bbbb1_2130x1492.png) 4. 我們把時間挪上去，發現排列美觀了 ![](https://img.kancloud.cn/b5/58/b558182745e260fd09dd9a7d81b6d14a_742x1274.png) ![](https://img.kancloud.cn/4c/60/4c6043ed504c463fa3a39ad7a49730f1_2158x1258.png) 5. 如果想每個控件占用一行，我們可以如此配置 ![](https://img.kancloud.cn/44/95/44955f48882618361b404a5b2d25e6ee_776x1330.png) ![](https://img.kancloud.cn/f0/d6/f0d6cd20aa6765116c18a62612d3c491_2154x1288.png) 6. 如果覺得彈框太高，我們可以進行高度設置 ![](https://img.kancloud.cn/87/49/8749ab7ad04c7677494940ddf2a97f3a_598x632.png) ![](https://img.kancloud.cn/8d/e2/8de2f69c93be05ff4d25c1b6899c781c_2204x1106.png) 7. 這樣一來，界面就美觀多了 ## 新增測試 * 輸入相應的值，點擊保存，提示成功 ![](https://img.kancloud.cn/39/f4/39f4ca313e23253205568de44aab6a42_2942x804.png) ## 查看測試 * 點擊查看，數據加載無誤 ![](https://img.kancloud.cn/f0/80/f08060a6af80e0f72825f481b788a887_2944x1164.png) ## 編輯測試 * 點擊編輯，并修改一條數據，修改也成功 ![](https://img.kancloud.cn/60/6f/606f643c986b2fbba4e16966894c7b77_2394x1140.png) ![](https://img.kancloud.cn/06/83/0683c90ef51bd3fa7f561d9b6c28d36f_2958x796.png) ## 刪除測試 * 將剛剛新增的數據刪除，提示成功 ![](https://img.kancloud.cn/d8/d5/d8d5b640ec6ac1ac17e4500d11d1245d_2940x1102.png) ## 分頁測試 * 手動新增11條數據，發現分頁成功 ![](https://img.kancloud.cn/bf/4e/bf4e99417af5c926fe09ea7080df106d_3440x1616.png) ![](https://img.kancloud.cn/cb/30/cb30c7651fed993f49a4fa1614bf92ee_3440x960.png) ## 查詢測試 * 在標題的字段上增加屬性 ![](https://img.kancloud.cn/68/e6/68e6328ee3d3d47c7d5906bc28179d84_754x1096.png) * 刷新頁面，可以看到出現了對應的搜索框 ![](https://img.kancloud.cn/44/a7/44a7e4d121c8f9498c2122f9c4705c42_2944x1582.png) * 隨意輸入一個標題，點擊查詢，發現查詢成功 ![](https://img.kancloud.cn/b7/f5/b7f5fa57225437ebb9f764f832e4b45d_2954x882.png) ## 后記 * 由此可見，我們通過一個簡單的配置，便迅速生成了前后端分離模式下的完整增刪改查功能 * 文檔講解只是小部分知識點，更多的操作有待大家去發掘 * 相信大家看完SpringBlade+Saber兩套框架后，會享受到更加極速的開發體驗～