需求描述:进入页面,展示列表,列表中有个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. Java基础_0306:数组的定义与使用

    数组 数组指的就是一组相关变量的集合.例如:如果说现在要想定义100个整型变量,按照传统的思路,可能这样定义: int i1,i2 ,... i100,一共写100个变量. 以上的形式的确可以满足技术 ...

  2. 浏览器通知--window.Notification

    参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571 Web Notifications是HTML5 的一个特性,目前我知道的有谷 ...

  3. MIME 类型

    关于读音 为了防止大家出去丢人,我先示范一下,MIME应该独坐[maim],听起来就好像“男人”的英语法人一样. 浏览器和MIME的关系 浏览器依靠MIME类型解释网页. 每当浏览器请求一个web页面 ...

  4. Javascript - ExtJs - 常用方法和属性

    常用方法和属性(Common methods and attributes) ExtJs中的对象 Ext.Component Ext组件对象,表示一个可渲染的组件. Ext.dom.Element E ...

  5. MyBatis-Plus的简单使用

    mybatis-plus也只是听过,可是终究没有使用过.于是自己花几天晚上的时间研究mybatis-plus的使用. 下面的研究也是基于其官网:http://mp.baomidou.com/guide ...

  6. python 实现神经网络算法

    注: Scratch是一款由麻省理工学院(MIT) 设计开发的一款面向少年的简易编程工具.这里写链接内容         本文翻译自“IMPLEMENTING A NEURAL NETWORK FRO ...

  7. 使用cstdiofile在vs2010中无法写入中文的问题

    在VC2010环境下, 以下代码无法实现使用CStdioFile向文本文件中写入中文(用notepad.exe查看不到写入的中文) CStdioFile file; file.Open(…); fil ...

  8. vc++高级班之多线程篇[7]---线程间的同步机制②

    //示例代码: CStringArray g_ArrString; UINT __cdecl ThreadProc(LPVOID lpParameter) {  int startIdx = (int ...

  9. P3203 [HNOI2010]弹飞绵羊 —— 懒标记?分块?

    好久没写博客了哈,今天来水一篇._(:з」∠)_ 题目 :弹飞绵羊(一道省选题) 题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏 ...

  10. Delta DVP 系列 PLC 各装置 Modbus 地址

    此Modbus地址表以 1 为基础地址 Device Range Type DVP address (Hex) Modbus address (Dec) Effective ES/EX/SS SA/S ...