当前开发的程序中.因为抛弃了jsp的渲染,改为thymeleaf,并在比较厉害的前端进行数据json的渲染无误后,得出此json数据返回.
以往的Map<String,Object>返回json只是键值对,即使使用Map<String,Map<Object,Object>>此类的有整体name值的json还是有点不尽人意.
所以这里使用了JSONObject和JSONArray的组合形式:
首先看返回的json格式:
{ "totalData": 2, "data": [{ "arr": [{ "update_time": 1553976471000, "create_time": 1553850399000, "province_a": "山东", "user_id": 17, "wl_id": 2, "porcince_b": "山西" }, { "update_time": 1553976475000, "create_time": 1553850399000, "province_a": "东北", "user_id": 17, "wl_id": 4, "porcince_b": "桂林" }], "name": "zq" }, { "arr": [{ "update_time": 1553976468000, "create_time": 1553850399000, "province_a": "济南", "user_id": 18, "wl_id": 1, "porcince_b": "河南" }, { "update_time": 1553976473000, "create_time": 1553850399000, "province_a": "湖北", "user_id": 18, "wl_id": 3, "porcince_b": "武汉" }], "name": "wang" }], "rows": [{ "u_id": 17, "tel": 13439222875, "password": "7251f35e038a777037ce0f80d420cde4", "salt": "Lm/Gp+J2dyTrLLmCNaoq1Q==", "name": "zq", "role_id": 2, "way_type": 0, "create_time": "2019-03-30 08:52:24", "update_time": "2019-03-30 08:52:24", "lastlogin_time": "2019-03-30 08:52:24" }, { "u_id": 18, "tel": 17310208735, "password": "7248bfaaa6c1d33340c9b3176f59f925", "salt": "qBjovbk4f21pcBJJcRU7oA==", "name": "wang", "role_id": 2, "way_type": 0, "create_time": "2019-03-30 15:31:07", "update_time": "2019-03-30 15:31:07", "lastlogin_time": "2019-03-30 15:31:07" }] }
前端根据key value的格式获取到每一个键中的value或是数组
这里可以使用之前的EChartsFormatter组件中的getParamValues方法.
/** * 根据传入name和json数据获取指定name的value值数组 * "create_time"为时间节点,即该条数据时间key字段名(可扩展) * * @param name 要获取的其中某一个json的key的value数组 * @param json 控制层返回的json数据如thisData:[{"id":33,"province":"山东","company":"A公司0","s_company":"公司0","softening_point":0.1,"toluene":1,"quinoline":1,"beta_resin":1,"coking_value":1,"ash":1,"today_price":123,"remarks":"备注0","reporter":"张","create_time":"2019-02-20 13:47:52","update_time":"2019-02-20 13:47:52","b_time":null,"e_time":null,"order":null}, * @returns {Array} 假设传入("company",thisDate),则会获取数组[A公司0,B公司1,C公司2,D公司3] 注意这里的company的数组还不能用于ECharts的维度,因为要设置 */ function getParamValues(name, json) { console.log("name:"+name); var ret = []; var len = Object.keys(json).length; for (var i = 0; i < len; i++) { if (name == "create_time") { var aDate = formatDateUntilDay(json[i][name]); ret.push(aDate); }else{ ret.push(json[i][name]); } // console.log("json[i][name]:"+json[i][name]); } return ret; }
上面的进行改善后:
/** * 根据传入name和json数据获取指定name的value值数组 * "create_time"为时间节点,即该条数据时间key字段名(可扩展) * * @param name 要获取的其中某一个json的key的value数组 * @param json 控制层返回的json数据如thisData:[{"id":33,"province":"山东","company":"A公司0","s_company":"公司0","softening_point":0.1,"toluene":1,"quinoline":1,"beta_resin":1,"coking_value":1,"ash":1,"today_price":123,"remarks":"备注0","reporter":"张","create_time":"2019-02-20 13:47:52","update_time":"2019-02-20 13:47:52","b_time":null,"e_time":null,"order":null}, * @returns {Array} 假设传入("company",thisDate),则会获取数组[A公司0,B公司1,C公司2,D公司3] 注意这里的company的数组还不能用于ECharts的维度,因为要设置 */ function getParamValues(name, json,timeName) { console.log("name:"+name); var ret = []; var len = Object.keys(json).length; for (var i = 0; i < len; i++) { if (name == timeName) { var aDate = formatDateUntilDay(json[i][name]); ret.push(aDate); }else{ ret.push(json[i][name]); } // console.log("json[i][name]:"+json[i][name]); } return ret; }
所调用的时间格式化方法, 因为json中的时间是精确到秒的,也就是 yyyy-MM-dd hh:mm:ss
这里因为echarts组件要展示时间间隔用于在下方展示,所以如果是秒的话就过多了,这里使用时间格式化,只获取json中的时间到天为止.
如下:
/** * 将时间格式转换到直到天 省去时分秒 * @param date */ function formatDateUntilDay(date) { var date = new Date(date); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var formatDate = year + "-" + month + "-" + day; return formatDate; // console.log(format); }
这里继续先看下JSON数据.
最上面的json数据我们看到,最外层的key有3个, totalData(分页用到),data(总数据list),rows(分页用展示数据)
单看data的数据格式:
"data": [{ "arr": [{ "update_time": 1553976471000, "create_time": 1553850399000, "province_a": "山东", "user_id": 17, "wl_id": 2, "porcince_b": "山西" }, { "update_time": 1553976475000, "create_time": 1553850399000, "province_a": "东北", "user_id": 17, "wl_id": 4, "porcince_b": "桂林" }], "name": "zq" }, { "arr": [{ "update_time": 1553976468000, "create_time": 1553850399000, "province_a": "济南", "user_id": 18, "wl_id": 1, "porcince_b": "河南" }, { "update_time": 1553976473000, "create_time": 1553850399000, "province_a": "湖北", "user_id": 18, "wl_id": 3, "porcince_b": "武汉" }], "name": "wang" }],
data中存放了json数组,其中一个的key是arr,另一个key是name, arr对应的value是另外的数组,各自存放不同的数据.,name对应的只是一个名称.
在java代码中,首先要声明出用于返回的JSONObject.
JSONObject resultJsonObj = new JSONObject();
JSONObject的存放形式是key value,也可以先理解为Map集合. 方法同样也是put方法.
这里的key放入的是上文提到的 totalData(分页用到),data(总数据list),rows(分页用展示数据)
对于rows的value,也就是下面的数据,是两组对象,也就是获取的如"学生数据集合","老师数据集合",就是说白了是数据库里好几条的数据元组回来的List集合:
"rows": [{ "u_id": 17, "tel": 13439222875, "password": "7251f35e038a777037ce0f80d420cde4", "salt": "Lm/Gp+J2dyTrLLmCNaoq1Q==", "name": "zq", "role_id": 2, "way_type": 0, "create_time": "2019-03-30 08:52:24", "update_time": "2019-03-30 08:52:24", "lastlogin_time": "2019-03-30 08:52:24" }, { "u_id": 18, "tel": 17310208735, "password": "7248bfaaa6c1d33340c9b3176f59f925", "salt": "qBjovbk4f21pcBJJcRU7oA==", "name": "wang", "role_id": 2, "way_type": 0, "create_time": "2019-03-30 15:31:07", "update_time": "2019-03-30 15:31:07", "lastlogin_time": "2019-03-30 15:31:07" }]
rows的put
ArrayList<User> userList = (ArrayList) userService.getSalasmanListAll(); PageInfo<User> pageInfo = new PageInfo<User>(userList); JSONObject resultJsonObj = new JSONObject(); resultJsonObj.put("rows", pageInfo.getList());//展示的当前也的数据list
下面重点说明key为data的数据格式:
List list = new ArrayList(); for (User user : pageInfo.getList()) { JSONObject linkJsonObj = new JSONObject(); JSONObject uNameJsonObj = new JSONObject(); //name 键值对 JSONObject wlJsonObj = new JSONObject(); //wayline 键值对 // JSONArray wlJsonArray = new JSONArray(); //wayline 数组集合 // "name": "yyy" uNameJsonObj.put("name", user.getName()); //获取该用户的线路集合 ArrayList<Way_Line> wayLineByUserIdList = (ArrayList) way_lineService.getWayLineByUserId(user.getU_id()); // wlJsonArray.add(wayLineByUserIdList); // "arr": [{"pro": "aa"}, {"pro": "aa"}] wlJsonObj.put("arr", wayLineByUserIdList); linkJsonObj.putAll(uNameJsonObj); linkJsonObj.putAll(wlJsonObj); JSONObject jsonObject = JSONObject.parseObject(linkJsonObj.toString()); list.add(jsonObject); }
1. 首先的list声明,和上面rows一样,是为了放置整体的对象.
2. 因为"学生对象"/or"用户对象"的不同,其对应的关联表的数据也是不同的,这里所有的JSONObject声明都是在for循环里面.
(如果在for循环外层,使用put,put相同的名称,则会被后put的给覆盖掉,因为Map,以及JSONObject放置的数据key必须是唯一的,不可重复)
3. 因为在data这个数据中,除了有arr,还有name,所以首先声明 wlJsonObj 和 uNameJsonObj ,而作为合并,声明使用 linkJsonObj 用于对之前的arr和name的简单合并.
4. 使用putAll方法,分别放入上面的两个键值对数据,并且使用 JSONObject.parseObject(linkJsonObj.toString()) 合并为 JSONObject 对象.
5. for循环第一次,放置list一个合并后的JSONObject对象:
{ "arr": [{ "update_time": 1553976471000, "create_time": 1553850399000, "province_a": "山东", "user_id": 17, "wl_id": 2, "porcince_b": "山西" }, { "update_time": 1553976475000, "create_time": 1553850399000, "province_a": "东北", "user_id": 17, "wl_id": 4, "porcince_b": "桂林" }], "name": "zq" }
同样,此时list有了这条数据,之后通过for循环又获取了不同的user.getName和对应的数据list,再次放入for循环外层声明的List集合.
这里其实更改下名称就更好理解了:
for循环里的jsonObject改为 mergeObject :
JSONObject mergeObject= JSONObject.parseObject(linkJsonObj.toString());
for循环外层的List声明改为 dataList :
List dataList = new ArrayList();
最后,该获取到的数据已经获取到,
在for循环外面将添加了数据的list, put到resultJsonObj中进行返回,就可以获取文章开头的json数据格式了.
resultJsonObj.put("data",list);
return resultJsonObj;