當前開發的程序中.因為拋棄了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); }
經過組員whc簡化后:
List list = new ArrayList(); for (User user : pageInfo.getList()) { JSONObject linkJsonObj = new JSONObject(); // "name": "yyy" // uNameJsonObj.put("name", user.getName()); linkJsonObj.put("name", user.getName()); //獲取該用戶的線路集合 ArrayList<Way_Line> wayLineByUserIdList = (ArrayList) way_lineService.getWayLineByUserId(user.getU_id()); // wlJsonArray.add(wayLineByUserIdList); // "arr": [{"pro": "aa"}, {"pro": "aa"}] linkJsonObj.put("arr", wayLineByUserIdList); list.add(linkJsonObj); }
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;