在前台根据传过来的XX级别的数字转XX的名字
需求描述:进入页面,展示列表,列表中有个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的名字的更多相关文章
- react根据传参的不同动态注册不同的子组件
上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件,实现过程请查阅Vue.extend动态注册子组件,由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢.其实,用re ...
- python 根据传进来的参数,动态拼接sql
根据传进来的参数,动态拼接sql,可用于实现一个方法,有些字段不确定,又用到的情况,如查询,三个查询条件,有的时候只用到一个查询条件,其他用不到则不需要拼接 def show_runjob_detai ...
- vs生成解决方案错误无法将文件“xx.*”复制到xx.*”。对路径“bin\xx.*”的访问被拒绝
使用vs2008生成解决方案时出现的问题: 无法将文件“obj\xx.*”复制到“bin\xx.*”.对路径“bin\xx.*”的访问被拒绝 解决方法: 将*.dll的只读属性去掉(在windows对 ...
- 小程序视图层(xx.xml)和逻辑层(xx.js)
整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...
- 关于判断语句中如:while not xx: 或者:if not xx: 的含义及用法解析
关于判断语句中如:while not xx: 或者:if not xx: 的含义及用法解析 name='' while not name: name=raw_input(u'请输入姓名:') prin ...
- 【LeetCode-面试算法经典-Java实现】【129-Sum Root to Leaf Numbers(全部根到叶子结点组组成的数字相加)】
[129-Sum Root to Leaf Numbers(全部根到叶子结点组组成的数字相加)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bina ...
- MySQL添加外键报错 - referencing column 'xx' and referenced column 'xx' in foreign key constraint 'xx' are incompatible
MySQL给两个表添加外键时,报错 翻译意思是:外键约束“xx”中的引用列“xx”和引用列“xx”不兼容 说明两个表关联的列数据类型不一致,比如:varchar 与 int,或者 int无符号 与 i ...
- 根据传智写的SqlHelper
using System; using System.Configuration; using System.Data; using System.Data.SqlClient; namespace ...
- import * as x from 'xx' 和 import x from 'xx'
普通xx.js文件 //不可变的依赖模拟数据 module.exports=[ { id: "d52dccfc-656d-11e8-b153-7cd30ad3aa7a", regi ...
随机推荐
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- 遇到以前跑一次却没问题的问题,直接maven install 再跑
遇到以前跑一次却没问题的问题,直接maven install 再用tomcat 跑 比如,xml 路径找不到类,奇葩的报错啊
- Hibernate_day04
Hibernate_day04 上节内容 1 表与表之间关系回顾 (1)一对多(客户和联系人) (2)多对多(用户和角色) 2 hibernate一对多操作 (1)一对多映射配置 (2)一对多级联保存 ...
- 20165234 《Java程序设计》实验一 Java开发环境的熟悉
一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:刘津甫 学号:20165234 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验时间:15:35 - 17:15 实验序 ...
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- Spring Aware接口
实现aware接口的bean必须在spring的xml文件中注册,由spring的IOC容器管理 1-ApplicationContextAware接口 可以获取spring的IOC容器 2-Bean ...
- Linux网络 - 数据包的接收过程【转】
转自:https://segmentfault.com/a/1190000008836467 本文将介绍在Linux系统中,数据包是如何一步一步从网卡传到进程手中的. 如果英文没有问题,强烈建议阅读后 ...
- MOOC Linux内核之旅小结【转】
转自:https://blog.csdn.net/titer1/article/details/45345123 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...
- BZOJ2038 [2009国家集训队]小Z的袜子 莫队+分块
作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z把这N只袜子从1到N编号,然后从 ...
- LOJ 6277-6280 数列分块入门 1-4
数列分块是莫队分块的前置技能,练习一下 1.loj6277 给出一个长为n的数列,以及n个操作,操作涉及区间加法,单点查值. 直接分块+tag即可 #include <bits/stdc++.h ...