## 优化前端效果
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后,会享受到更加极速的开发体验~
- 第零章 序
- 序言
- 系统架构
- 视频公开课
- 开源版介绍
- 商业版介绍
- 功能对比
- 答疑流程
- 第一章 快速开始
- 升级必看
- 环境要求
- 环境准备
- 基础环境安装
- Docker安装基础服务
- Nacos安装
- Sentinel安装
- 插件安装
- 建数据库
- 工程导入
- 导入Cloud版本
- 导入Nacos配置
- 导入Boot版本
- 工程运行
- 运行Cloud版本
- 运行Boot版本
- 工程测试
- 测试Cloud版本
- 测试Boot版本
- 第二章 技术基础
- Java
- Lambda
- Lambda 受检异常处理
- Stream 简介
- Stream API 一览
- Stream API (上)
- Stream API (下)
- Optional 干掉空指针
- 函数式接口
- 新的日期 API
- Lombok
- SpringMVC
- Swagger
- Mybatis
- Mybatis-Plus
- 开发规范
- 第三章 开发初探
- 新建微服务工程
- 第一个API
- API鉴权
- API响应结果
- Redis缓存
- 第一个CRUD
- 建表
- 建Entity
- 建Service和Mapper
- 新增 API
- 修改 API
- 删除 API
- 查询 API
- 单条数据
- 多条数据
- 分页
- 微服务远程调用
- 声明式服务调用 Feign
- 熔断机制 Hystrix
- 第四章 开发进阶
- 聚合文档
- 鉴权配置
- 跨域处理
- Xss防注入
- 自定义启动器
- Secure安全框架
- Token认证简介
- Token认证配置
- PreAuth注解配置
- Token认证实战
- Token认证加密
- 日志系统
- 原理解析
- 功能调用
- Seata分布式事务
- 简介
- 编译包启动
- 配置nacos对接
- docker启动
- 对接微服务
- 代码生成配置
- 前言
- 数据库建表
- 代码生成
- 前端配置
- 优化效果
- 第五章 功能特性
- SaaS多租户
- 概念
- 系统升级
- 如何使用
- 多终端令牌认证
- 概念
- 系统升级
- 使用
- 第三方系统登录
- 概念说明
- 对接说明
- 对接准备
- 配置说明
- 操作流程
- 后记
- UReport2报表
- 报表简介
- 对接配置
- 报表后记
- 动态数据权限
- 数据权限简介
- 数据权限开发
- 纯注解配置
- Web全自动配置
- 注解半自动配置
- 数据权限注意点
- 动态接口权限
- 乐观锁配置
- 统一服务登陆配置
- Skywalking追踪监控
- Minio分布式对象存储
- Boot版本对接至Cloud
- 第六章 生产部署
- windows部署
- linux部署
- jar部署
- docker部署
- java环境安装
- mysql安装
- docker安装
- docker-compose安装
- harbor安装
- 部署步骤
- 宝塔部署
- 准备工作
- 安装工作
- 部署准备
- 部署后端
- 部署前端
- 部署域名
- 结束工作
- k8s平台部署
- 第七章 版本控制
- Git远程分支合并
- Git地址更换
- 第八章 学习资料
- 第九章 FAQ
- 第十章 联系我们