需求描述:进入页面,展示列表,列表中有个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等等计算资源,要知道服务端的计算资源是有限的,而如果放到前端,使用的是客户端的计算资源,这样你的服务端负载就会下降(高并发场景)。

类似于数据校验这种,前后端都需要做!

在前台根据传过来的XX级别的数字转XX的名字的更多相关文章

  1. react根据传参的不同动态注册不同的子组件

    上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件,实现过程请查阅Vue.extend动态注册子组件,由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢.其实,用re ...

  2. python 根据传进来的参数,动态拼接sql

    根据传进来的参数,动态拼接sql,可用于实现一个方法,有些字段不确定,又用到的情况,如查询,三个查询条件,有的时候只用到一个查询条件,其他用不到则不需要拼接 def show_runjob_detai ...

  3. vs生成解决方案错误无法将文件“xx.*”复制到xx.*”。对路径“bin\xx.*”的访问被拒绝

    使用vs2008生成解决方案时出现的问题: 无法将文件“obj\xx.*”复制到“bin\xx.*”.对路径“bin\xx.*”的访问被拒绝 解决方法: 将*.dll的只读属性去掉(在windows对 ...

  4. 小程序视图层(xx.xml)和逻辑层(xx.js)

    整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...

  5. 关于判断语句中如:while not xx: 或者:if not xx: 的含义及用法解析

    关于判断语句中如:while not xx: 或者:if not xx: 的含义及用法解析 name='' while not name: name=raw_input(u'请输入姓名:') prin ...

  6. 【LeetCode-面试算法经典-Java实现】【129-Sum Root to Leaf Numbers(全部根到叶子结点组组成的数字相加)】

    [129-Sum Root to Leaf Numbers(全部根到叶子结点组组成的数字相加)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bina ...

  7. MySQL添加外键报错 - referencing column 'xx' and referenced column 'xx' in foreign key constraint 'xx' are incompatible

    MySQL给两个表添加外键时,报错 翻译意思是:外键约束“xx”中的引用列“xx”和引用列“xx”不兼容 说明两个表关联的列数据类型不一致,比如:varchar 与 int,或者 int无符号 与 i ...

  8. 根据传智写的SqlHelper

    using System; using System.Configuration; using System.Data; using System.Data.SqlClient; namespace ...

  9. import * as x from 'xx' 和 import x from 'xx'

    普通xx.js文件 //不可变的依赖模拟数据 module.exports=[ { id: "d52dccfc-656d-11e8-b153-7cd30ad3aa7a", regi ...

随机推荐

  1. Flume配置Multiplexing Channel Selector

    1 官网内容 上面配置的是根据不同的heder当中state值走不同的channels,如果是CZ就走c1 如果是US就走c2 c3 其他默认走c4 2 我的详细配置信息 一个监听http端口 然后 ...

  2. C#获取客户端IP地址

    客户端ip:Request.ServerVariables.Get("Remote_Addr").ToString();客户端主机名:Request.ServerVariables ...

  3. 影子节点 shadowDOM

    示例: <video controls autoplay name="media"> <source id="mp4" src="t ...

  4. Python 20 Ajax全套

    概述 对于web应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  5. 2017-2018-2 20165237 实验三《 敏捷开发与XP实践》实验报告

    2017-2018-2 20165237 实验三< 敏捷开发与XP实践>实验报告 实验报告表头: 知识点: 1.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: ...

  6. EditText设置可以点击,但是不可以编辑

    EditText设置  editText.setEnabled(false);后不可编辑也不可点击 设置  setFocusable(false)后不可编辑,但是再设置 setFocusable(tr ...

  7. Android软键盘在清单文件中所有配置含义

    android:windowSoftInputMode 活动的主窗口如何与包含屏幕上的软键盘窗口交互.这个属性的设置将会影响两件事情: 1>     软键盘的状态——是否它是隐藏或显示——当活动 ...

  8. LwIP Application Developers Manual2---Protocols概览

    1.前言 本文是对LwIP Application Developers Manual的翻译 lwIP是模块化的并支持广泛的协议,这些大部分协议可以被裁减从而减小代码的尺寸 2.协议概览 链路层和网络 ...

  9. 谈谈asp,php,jsp的优缺点

    谈谈asp,php,jsp的优缺点   http://hi.baidu.com/lhyboy/item/f95bac264c38830d72863e41 asp.php.asp.net.jsp等主流网 ...

  10. linux下添加删除,修改,查看用户和用户组

    一.组操作 1.创建组: groupadd test #增加一个test组 2.修改组 groupmod -n test2 test #将test组的名子改成test2 3.删除组 groupdel ...