#### **1、编写后台接口** **注意:返回必须是json格式,且属性名为data( jsonObject.put("data",list);)** ``` /** * 简单查询用户api * @param user 实体类 * @return JSONObject json */ @GetMapping("/getUsers") public JSONObject getUsers(SysUser user){ JSONObject jsonObject = new JSONObject(); LambdaQueryWrapper<SysUser> query = new LambdaQueryWrapper<>(); if(StringUtils.isNotEmpty(user.getUsername())){ query.eq(SysUser::getUsername,user.getUsername()); } if(null !=user.getSex()){ query.eq(SysUser::getSex,user.getSex()); } List<SysUser> list = sysUserService.list(query); jsonObject.put("data",list); return jsonObject; } ``` #### **2、新建api** ``` API地址:填写路径和参数 参数:用?和&进行拼接,单个直接用?多个需要& 注意:参数必须用'${}'包起来,且为''而不是“” 鼠标点击文本框之外即可下面自动解析,或者下面新增上面也会自动解析,然后点击Api解析保存即可 ``` ![](https://img.kancloud.cn/c5/f3/c5f33979e77f3fe943b66653f5489bae_1920x892.png) #### **3、查询条件设置(查询内容必须与后台接口相对应)** **页面:** ``` 注意:上面内容必须和下面字段文本对应,否则查询不起作用,且必须勾选查询复选框 带条件查询:预览页面时就是一个输入框或者日期框 范围查询:预览页面时当日期时才起作用 多选查询:预览页面时是下拉框 ``` ![](https://img.kancloud.cn/e1/ad/e1adbac36fb543414e27d73bf9625166_1917x904.png) **后台:** ![](https://img.kancloud.cn/21/6d/216d1ba09196f71fe3294a5579bc3e4d_902x459.png) #### **4、预览页面** 即可出现查询输入框,直接输入点击查询即可 ![](https://img.kancloud.cn/64/2e/642e3e1a4b6e305816304a1582f7c0f3_1068x633.png) ![](https://img.kancloud.cn/0e/08/0e0856aa0debf5c21ee356d39d30f08e_1920x855.png)