需求描述:进入页面,展示列表,列表中有个XX级别的项,数据库中的级别使用1234来存放的,现在要转成对应的一级XX,二级XX,三级XX,四级XX.
吐槽一下:正常的做法应该是在后台,就把查出来的级别1234转换成一级XX,二级XX,三级XX,四级XX,然后放到list中,列表循环的时候<tr><td>{list.XX}</td></tr>就直接显示了,现在老大不让这样做了,非得让在前台转,emmmm,我还能咋办,干呗!!! 上代码
代码:后台部分
// XX级别转义
HashMap<String, String> xxLevelMap = new HashMap<>();
xxLevelMap.put("1", "一级XX");
xxLevelMap.put("2", "二级XX");
xxLevelMap.put("3", "三级XX");
xxLevelMap.put("4", "四级XX");
modelMap.addAttribute("xxlist", list);//这个list中级别那一项放的是级别的数字1234
modelMap.addAttribute("xxLevelMap", xxLevelMap);
return VIEW_PATH + "/list"; //去list.html页面 ssm框架 视图解析器 省略了.html
代码:list.html的前台转义处理
<tr th:each="xx : ${xxlist}">
<td th:text="${xx.xxName}">XX名称</td>
<td th:text="${xx.xxCode}">XX编码</td>
<td th:text="${xxLevelMap['__${xx.xxLevel}__']}">XX级别</td> //就是这行代码转义的,根据取出的xxLevel数字 作为map的key 获得value 别问我为什么这么写,格式还是我度娘来的 页面采用的是thymleaf模板html5,所以有那个th
</tr>
结果:
简单总结:我个人认为这么做太费事了,后台直接把数字级别 转 成一级二级三级 传到前台直接显示 多好, 非得这么折腾~!~ 不过老大让这么做,可能有好处吧,前台转 我是第一次做,简单总结一下!
补充:说一下为什么要在前端校验
现在不是都在做前后端分离么,因为你的逻辑需要计算资源进行计算,如果放到后端去执行,则会消耗带宽&内存&cpu等等计算资源,要知道服务端的计算资源是有限的,而如果放到前端,使用的是客户端的计算资源,这样你的服务端负载就会下降(高并发场景)。
类似于数据校验这种,前后端都需要做!