Spring Boot 自定义应用开发框架九——基本增删改查“低代码”框架初设计3 前后端交互 未完待续

前端

前面已经把后端需要处理的逻辑大致梳理了一遍，至于通过ibatis拦截器如何拼装新的SQL，网上有很多教程，找度娘即可。
前端需要解决的问题有几个：
1.每一个分页列表需要哪些字段
2.这些字段哪些可以显示，哪些可以查询，哪些可以排序
3.用于搜索的字段如何指定 等于、不等于、大于、模糊、in 等搜索方式
上面已经说过，分页其实就是主表与副表的查询（如果只有一张表，那么就只存在主表，太复杂的SQL不在本次讨论范围），而所有的搜索和排序的字段都存在于这些表中(那怕是通过复杂SQL派生出来的字段也可以理解为在表中)，对应于程序就是对应的实体类中，那么我们需要做的就是将每个分页需要的字段保存入库，然后提供固定的接口，让前端能够在调用每个分页接口时获取到当前页面所有字段的配置就可以完成自动封装操作。
PS：由于本人主要工作是架构设计和后端技术，前端还停留在web3.0+jquery阶段，现在vue3没有接触过，前端的代码就不提供了，但不管是什么技术，思路都是一样的。

页面效果

通过上面的页面效果，就知道前端要处理的主要有以下4个方面
1、显示列表字段的设定
2、搜索字段的展示
3、判断条件的生成
4、排序字段的设定
通过以上4点可以分析出前端需要的就是当前页面的所有字段信息，而每个分页列表上的字段对应的就是后端的一个实体类，例如上面的“用户列表”（同时关联角色）案例，在项目中一定会对应一个JAVA的实体类，例如：

public class UserRoleVO implements Serializable {
	private static final long serialVersionUID = 1L;
	@ApiModelProperty("ID")
	private Long id;
	@ApiModelProperty("uuid")
	private String uuid;
	@ApiModelProperty("删除标记")
	private Boolean deleted;
	@ApiModelProperty("创建人ID")
	private Long createUserId;
	@ApiModelProperty("创建人")
	private String createUserName;
	@ApiModelProperty("创建时间")
	@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
	private LocalDateTime createDateTime;
	@ApiModelProperty("更新人ID")
	private Long updateUserId;
	@ApiModelProperty("更新人")
	private String updateUserName;
	@ApiModelProperty("更新时间")
	@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
	private LocalDateTime updateDateTime;
	@ApiModelProperty("姓名")
	private String name;
	@ApiModelProperty("出生日期")
	@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
	private LocalDateTime birthday;
	@ApiModelProperty("性别")
	private String gender;
	@ApiModelProperty("学历")
	private String edu;
	@ApiModelProperty("身高")
	private Double height;
	@ApiModelProperty("薪酬")
	private Double salary;
	@ApiModelProperty("毕业院校")
	private String graduateSchool;
	// ******* 以下是角色表（副表）中的所有字段，注意副表的字段统一用oc开头（可自定规则）
	@ApiModelProperty("角色名")
	private String ocRoleName;
	@ApiModelProperty("层级")
	private String ocRoleRank;
}

那么只要将此实体类中的所有需要在分页页面上处理（显示、搜索、排序）的字段入库，然后前端通过统一的调用机制获取当前页面上的这些字段，根据每个字段的属性来展示效果，那么对于前端来说也就做到了“低代码”的效果。
入库后的字段页面配置效果，即上图中按钮“列配置”点击后的页面效果：

每个字段需要的配置如图所示，其中只有“数据类型”比较特殊，其他字段通过名称应该就明白是干啥的了，就不多说了，主要说下“数据类型”的作用。

数据类型

 此项有2个功能：
 1.字段作为搜索时，自动生成搜索条件，例如字符串类型的字段就是模糊查询、数值型与日期型字段就有范围查询、下拉列表字段就是 等于或者in。
 2.显示字段对应表单的样式，如输入框、下拉列表还是日期

数值型与日期型字段

    效果如下

下拉列表

其他类型的就不一一展示了，上面的效果前端都是根据入库字段配置来自动设定的，目前我设置的数据类型有6类，如下图

string、boolean、number、date 这4类大家应该都清楚，分别代表字符串，布尔值，数值，日期。
dict、dictSet ：这2类是特殊类型，主要用于自动生成字典使用，对应的搜索条件也是不一样的，dict就是用 in() , dictSet 用 find_in_set()。
大家也可以根据实际需求自行扩展。

搜索案例

这里设置了3个搜索条件，红框内的pageFieldList就是上一篇文章说的前后端约定的查询条件的数据结构，这样就初步实现了“低代码”的开发模式。