Vue实现后端数字转前端显示文字之字典翻译注解@Dict

最新推荐文章于 2023-11-25 22:41:12 发布
最新推荐文章于 2023-11-25 22:41:12 发布
阅读量6k 收藏 16
点赞数 2
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44316527/article/details/108056691
版权

效果图：

数据库设计

在这里插入图片描述
前端页面显示文字

在这里插入图片描述
功能说明：
字典翻译注解 @Dict ： 用于列表字段字典翻译，将数据库某一列的值按照字典配置翻译成对应的文字描述。（比如字段status存的值是1，会自动生成一个翻译字段 status_dictText 值是‘已付款’）
实现步骤：
1.配置数据字典
新增订单状态字典
在这里插入图片描述
2.订单实体属性上加注解

/**订单状态（0-未付款 1-已付款 2-退款中 3-已退款 4-已完成）*/
	@Excel(name = "订单状态（0-未付款 1-已付款 2-退款中 3-已退款 4-已完成）", width = 15)
    @ApiModelProperty(value = "订单状态（0-未付款 1-已付款 2-退款中 3-已退款 4-已完成）")
	@Dict(dicCode = "order_status")
	private Integer status;

3.Vue定义column（此处dataIndex需要定义为原字段名+‘_dictText’，即status_dictText）

columns: [
	{
	  title: '订单状态',
	  align:"center",
	  dataIndex: 'status_dictText',
	  scopedSlots: { customRender: 'status' },
	 }
]
impl柴猿滚滚
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo在自己项目里进行封装
vue实现输入一位数字转汉字功能
10-15
主要介绍了vue实现输入一位数字转汉字功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
前端vue +后端 koa-前端开发
最新发布
04-23
计算机技术是指评价计算机系统的各种知识和技能的总称。它涵盖了计算机硬件、软件、网络和信息安全等方面。计算机技术的发展使我们能够进行高效的数据处理、信息存储和传输。现代计算机技术包括操作系统、数据库管理、编程语言、算法设计等。同时，人工智能、云计算和大数据等新兴技术也在不断推动计算机技术的进步。计算机技术的应用广泛，涵盖了各个领域，如商业、医疗、教育和娱乐等。随着计算机技术的不断革新，我们可以更加高效地实现预期自动化、标准化
vue3+pinia+vuerouter4动态路由菜单
学如逆水行舟，不进则退！
09-12 7877
最近在做一个通用后台管理系统的框架，通过用户登录拿取用户的权限和菜单列表数据来动态添加路由，使不同用户的显示不同左侧菜单列表。这篇文章主要是讲述通过vue3+router+pinia技术栈设置动态路由菜单。
小知识点汇总文
javaxiaobai21的博客
05-10 396
进化
自定义注解
sutonline的博客
08-21 662
自定义注解@JsonFormat目前的@JsonFormat只对Date类型的shape进行了特殊处理，支持shape和pattern。我需要对一个double类型的数字进行百分比格式化，所以就得自己写个注解和序列化类了。首先定义一个number的注解:package cn.kevin.annotation;import java.lang.annotation.Documented; import
添加数据字典表注解@Dict,并在缓存中执行
weixin_37822991的博客
11-04 2703
@Dict,字典表数据
@Dict 注解的作用
想静静的小码虫的博客
06-01 1431
概括一下@Dict 注解的作用：显示给前端时，替换表中某个字段的内容为关联表的制定字段的内容。也有人解释为“字典翻译”正如注解的名字一样，把某个字段翻译，或“取别名”。
@Dict(dicCode = “数据字典CODE“)
weixin_36873225的博客
08-30 731
【代码】@Dict(dicCode = “数据字典CODE“)
@Dict注解返回时不生效问题解决
weixin_44764340的博客
06-15 1076
可以看到只有当返回类型为IPage时才会进行字典转换。
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-字典翻译
weixin_45408578的博客
12-14 1305
定义 filters: { convertDurationUnit(unit) { const unitList = { d: "天", m: "个月", y: "年", }; return unitList[unit] || unit; }, }, }; 使用 {{ packageInfo.unit | convertDurationUnit }
vue根据ID（数字、编号）显示对应的文字状态
weixin_44533129的博客
07-27 9005
原来的样式 想要显示的样式 方式一：使用slot-scope+计算属性；（关于计算属性传参，参考的是vue 计算属性传参，并返回处理结果） 方式二：使用slot-scope <template> <el-table :data="TemplateList" highlight-current-row> <el-table-column label="模板类型方式一"> <template slot-scope="scope"&
基于vue的通用权限管理系统(论文+源码)_jsp_210
15年开发经验，擅长 管理系统/网站/app/小程序等，单片机/物联网/机械/土木等
11-25 881
本通用权限管理系统主要实现了用户登录、用户管理、角色管理、菜单管理、部门管理、岗位管理、字典管理、参数设置、日志管理九大功能模块，通用权限管理系统的功能模块图如图。本通用权限管理系统主要包括用户登录、用户管理、角色管理、菜单管理、部门管理、岗位管理、字典管理、参数设置、日志管理九个大模块。1)菜单管理：可以实现对后台管理系统左侧菜单的管理，支持更换图标、更换名称、控制菜单显示和排序。3)角色管理：用于对后台用户角色进行管理，我们可以给角色分配指定的菜单和资源。6)部门管理：对部门的基本属性进行管理。
SpringBoot 中，返回给 前端如 Vue、thymeleaf 、javascript 插件如 bootstrapTable时，将code码转换成文本显示
猎人在吃肉
08-24 571
在处理过程中，对象 转 字符串，字符串转对象过程中，日期格式出现了问题，需要对日期格式进行特特殊处理。根据 其vaue值 和 dictCode 值，从缓存、配置文件、数据库进行查询配置，并增加一个。定义了对 controller 类中的 返回值类型是 PageUtils 进行拦截处理。对 PageUtils， List 中各对象的每个属性进行遍历，标注有。
@Dict注解实现简单字典翻译
weixin_36873225的博客
11-03 416
2、使用：在需要转换的字段上添加@Dict注解，注明需要引用的code，后端会在返回值中增加filedName_dictText的key，前端只需要取对应的filedName_dictText就可以直接使用。1、实现简单的字典翻译，在后端向前端返回数据时，将0,1,2等数据转换成前端要展示的字段，如果通过，拒绝等。前端可以直接使用数据字段，无需做字典渲染，节省前端做数据判断的工作量。@Dict注解实现简单字典翻译。测试类controller。一、Dict注解作用。
【JAVA日常】关于jeecgBoot @Dict注解的使用不生效问题
weixin_45456848的博客
09-11 2050
关于jeecgBoot @Dict注解的使用不生效问题
Error: `gyp` failed with exit code: 1的解决方案
热门推荐
ChuaWi98的博客
03-05 1万+
解决方案： 1、进入node_modules，删除node-gyp 2、执行npm i -g node-gyp 3、删除node_modules 4、执行npm i -d 完成！
springboot+websocket+vue实现后端实时向前端推送数据
05-30
以下是一个基于 Spring Boot、WebSocket 和 Vue 实现后端实时向前端推送数据的代码示例： 1. 后端代码 ``` @Controller public class WebSocketController { private final WebSocketService webSocketService; @Autowired public WebSocketController(WebSocketService webSocketService) { this.webSocketService = webSocketService; } @GetMapping("/") public String index() { return "index"; } @Scheduled(fixedDelay = 1000) public void pushData() { webSocketService.sendAll(String.valueOf(System.currentTimeMillis())); } @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` ``` @Service public class WebSocketService { private final List<Session> sessions = new CopyOnWriteArrayList<>(); public void add(Session session) { sessions.add(session); } public void remove(Session session) { sessions.remove(session); } public void sendAll(String message) { sessions.forEach(session -> { try { session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } }); } } ``` 2. 前端代码 ``` <template> <div> <h1>Real-time data:</h1> <ul> <li v-for="(data, index) in dataList" :key="index">{{ data }}</li> </ul> </div> </template> <script> export default { data() { return { dataList: [] } }, mounted() { const ws = new WebSocket('ws://localhost:8080/ws'); ws.onmessage = (event) => { this.dataList.push(event.data); }; ws.onclose = () => { console.log('Connection closed'); }; } } </script> ``` 在这个示例中，我们在后端创建了一个定时任务，每秒钟向所有连接上的客户端推送当前时间戳。我们还创建了一个 WebSocketService，用于管理客户端连接和消息发送。 在前端，我们通过 Vue 的 mounted 生命周期创建了一个 WebSocket 连接，并在每次接收到服务器发来的消息时将其添加到一个数据列表中，然后在模板中通过 v-for 渲染出来。 要注意的是，我们在前端中只创建了一个 WebSocket 连接，用于接收服务器推送的数据。这是因为 WebSocket 是全双工通信，可以同时进行发送和接收操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值