## 优化前端效果 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两套框架后，会享受到更加极速的开发体验～