需求描述:进入页面,展示列表,列表中有个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. Hbase思维导图之数据存储

  2. 🍓 react,jroll滑动删除 🍓

    import React, { Component } from 'react'; import '../src/css/reset.css'; import '../src/css/delete.c ...

  3. 添加,删除List<Map<String, Object>>元素

    这里讲对List<Map<String, Object>>的数据结构的添加和删除实例 添加 //初始化 List<Map<String, Object>> ...

  4. 打印手机当前界面(位于栈顶)的activity

    adb shell dumpsys activity activities | grep "Hist #0" 一般第一条就是当前页(位于栈顶)的activity

  5. Win10提示无法创建新的分区也找不到现有的分区解法

    原文链接:https://www.pconline.com.cn/win10/1126/11261093.html 1.格式化整个硬盘,重新分区 如果你的硬盘上没有重要数据的话,到了分区这一步时,将硬 ...

  6. CountDownLatch 闭锁、FutureTask、Semaphore信号量、Barrier栅栏

    同步工具类可以是任何一个对象.阻塞队列可以作为同步工具类,其他类型的同步工具类还包括信号量(Semaphore).栅栏(Barrier).以及闭锁(Latch). 所有的同步工具类都包含一些特定的结构 ...

  7. ubuntu server命令行搭建虚拟专用网

    问题: 在做一个国外的开源项目,需要用到很多 ubuntu 上特定版本的应用,由于国内墙的问题,导致Ubuntu 14.04在需要添加一些国外的库的时候(add-apt-repository ppa: ...

  8. k64 datasheet学习笔记45---10/100-Mbps Ethernet MAC(ENET)之功能描述

    1.前言 本文是对K64 datasheet 之ENET部分的功能描述,将对每个部分进行详细说明 2.Ethernet MAC frame formats MAC帧组成格式 (1)7字节前导码:如按最 ...

  9. Html input 常见问题

    1.input回车事件不执行导致页面刷新 场景:在文本框中输入关键字按回车,页面自动刷新了 <form name="keywordForm" method="pos ...

  10. Python在线聊天软件(Tkinter)

    1.python2.7下安装 apt-get install python-tk 主要功能是实现客户端与服务器端的双向通信,这个小东西用到的主要知识点: 1.Python Socket:2.Pytho ...