需求描述:进入页面,展示列表,列表中有个XX级别的项,数据库中的级别使用1234来存放的,现在要转成对应的一级XX,二级XX,三级XX,四级XX.

吐槽一下:正常的做法应该是在后台,就把查出来的级别1234转换成一级XX,二级XX,三级XX,四级XX,然后放到list中,列表循环的时候<tr><td>{list.XX}</td></tr>就直接显示了,现在老大不让这样做了,非得让在前台转,emmmm,我还能咋办,干呗!!! 上代码

代码:后台部分

  1. // 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的前台转义处理

  1. <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. mysql 案例 ~ mysql常见日志错误

    一 简介: mysql note级别日志汇总二错误系列  1 Aborted connection    1 [Note] Aborted connection 61 to db: 'unconnec ...

  2. java程序中默认整形值常量是什么类型的?如何区分不同类型的整型数值常量?

    java程序中默认整形值常量是什么类型的?如何区分不同类型的整型数值常量? 整数值默认就是int类型,只有在数值常量后面加“L”或“l”才表明该常量是long型

  3. Nginx系列1:ubuntu16.04编译出适合自己的nginx服务器

    1.下载nginx nginx官网:nginx.org tar.gz文件 解压缩命令: wget https://nginx.org/download/nginx-1.14.2.tar.gz #下载n ...

  4. Learning Spread-out Local Feature Descriptors

    论文Learning Spread-out Local Feature Descriptors 为什么介绍此文:引入了一种正则化手段,结合其他网络的损失函数,尤其是最新cvpr 2018的hardne ...

  5. ESD总结

    设计人员完全可以让系统在经过ESD事件后不发生故障并仍能继续运行.将这个目标谨记在心,下面让我们更好地理解ESD冲击时到底发生了什么,然后介绍如何设计正确的系统架构来应对ESD. 简单模型 将一个电容 ...

  6. ARM的Jazelle技术【转】

    转自:https://blog.csdn.net/ken_yjj/article/details/6797290 Come From: http://www.arm.com/zh/products/p ...

  7. Hash算法【转】

    转自:http://www.cnblogs.com/wangjy/archive/2011/09/08/2171638.html Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度 ...

  8. Fusebox 类似WEBPACK 的工具,React Studio

    Fusebox  类似WEBPACK 的工具,  http://fuse-box.org/ React Studio:  https://hackernoon.com/@reactstudio

  9. css3实现不同进度条

    进度条类型1(渐变进度条) 效果1:图片实现进度条 思路,进度条是一张图片,用定位来控制不同时间图片相对进度条box的left值来控制位置,用animate实现动画效果 html <div cl ...

  10. c#基础之异常处理

    在开发过程中,经常遇到各种各样的小问题,很多是由于基础不牢固,没有经常总结导致的.遇到重复的问题可能可根据以往经验处理,但是对问题本身引发的原因进行深入的了解.工作很多年,但是c#基础像一层冰一样,可 ...