why
我是后端开发工程师,前端的很多函数不是很了解,所以很多问题期望在后端进行处理。
前端
有这样一个实现,前端要动态添加记录,然后将记录统一存储在一个字段里,代码如下:
// 动态添加一行输入参数描写 function addParamIn() { // 输入参数列表 var paramInList = $('#paramInList'); // 添加一行 var tr = $(['<tr>' , '<td ><input type="text" name="paramIn-' + data.paramInNum + '-name" placeholder = "输入字段英文名" value="" class="layui-input"></td>' , '<td ><input type="text" name="paramIn-' + data.paramInNum + '-cn" placeholder = "输入字段中文名" value="" class="layui-input"></td>' , '<td ><select name="paramIn-' + data.paramInNum + '-type" lay-verify="required"> <option value="date">时间</option><option value="varchar">字符串</option></select></td>' , '<td ><input type="text" name="paramIn-' + data.paramInNum + '-map" placeholder = "输入映射字段名" value="" class="layui-input"></td>' , '<td ><select name="paramIn-' + data.paramInNum + '-isRequired" lay-verify="required"> <option value="1">是</option><option value="0">否</option></select></td>' , '<td ><input type="text" name="paramIn-' + data.paramInNum + '-defaultVal" placeholder = "输入默认值" value="" class="layui-input"></td>' , '<td>' , '<button class="layui-btn layui-btn-xs layui-btn-danger specialConfig-delete">删除</button>' , '</td>' , '</tr>'].join('')); // 删除当前行 tr.find('.specialConfig-delete').on('click', function () { tr.remove(); }); // 页面追加一行、输入参数个数加一 paramInList.append(tr); // 重新渲染 下拉选 form.render("select"); data.paramInNum += 1; }
可以看的出来,传输到后端后,输入参数是多个map对象,比如:
{ // 其他参数 "source":"sourceTableName", "view":"全部展示", "desc":"查询特殊时段的异常信息", ... // 输入参数【主要要处理的】 // 第一行 "paramIn-0-name":"test_param", "paramIn-0-cn":"测试参数", "paramIn-0-type":"字符串", "paramIn-0-map":"testParam", "paramIn-0-isRequired":"1", "paramIn-0-defaultVal":"测试成功", // 第二行 "paramIn-1-name":"test_param2", "paramIn-1-cn":"测试参数2", "paramIn-1-type":"日期", "paramIn-1-map":"testParam2", "paramIn-1-isRequired":"0", "paramIn-1-defaultVal":"测试失败", // ... 还有很多行 // 动态的输出参数【跟输入参数一样,这里不再贴出】 }
后端处理
// 进行分组【这里过滤了输入参数paramIn 和输出参数 paramOut 进行分组处理】 // paramIn-000-name 分组key为 paramIn-000 Map<String, List<Map.Entry<String, Object>>> paramIn = mapParam.entrySet().stream().filter(map -> map.getKey().contains("paramIn")).collect(Collectors.groupingBy(map -> { String key = map.getKey(); return key.substring(0, key.indexOf("-", 8)); })); // paramOut-000-name 分组key为 paramOut-000 Map<String, List<Map.Entry<String, Object>>> paramOut = mapParam.entrySet().stream().filter(map -> map.getKey().contains("paramOut")).collect(Collectors.groupingBy(map -> { String key = map.getKey(); return key.substring(0, key.indexOf("-", 9)); })); // 封装 ArrayList<SpecialConfigParaIn> paraInArrayList = new ArrayList<>(); paramIn.forEach((key, val) -> { // 这里实现了key值的处理,使其与entity的字段对应 Map<String, Object> stringObjectMap = changeKeysToEntity(val, key); SpecialConfigParaIn specialConfigParaIn = JSON.parseObject(JSON.toJSONString(stringObjectMap), SpecialConfigParaIn.class); paraInArrayList.add(specialConfigParaIn); }); specialConfig.setParamIn(JSON.toJSONString(paraInArrayList)); /** * 处理所有key值 * * @param mapList 需要处理所有key值的对象 * @param replaceStr 要替换的字符串 * @return Map<String, Object> */ private Map<String, Object> changeKeysToEntity(List<Map.Entry<String, Object>> mapList, String replaceStr) { Map<String, Object> returnMap = new HashMap<>(8); mapList.forEach(map -> { returnMap.put(map.getKey().replace(replaceStr, "").replace("-", ""), map.getValue()); }); return returnMap; }
总结
如果前端可以进行处理自然是最佳的,前端无法处理,在后端解决问题也不是不行。