vue3前台查询使用多个字典项并且和后台交互

news2024/11/26 0:41:05

目录

一、前端使用

1.前台vue3接口使用  dictManege.ts

2.前台使用该接口地方

3.前台反显地方 其他几个都一样,这里使用在state中定义的idTypeList,在上面赋值,在这里使用 

二、后端使用

4.后端controller接口实现  其中使用字典String[]来接收  放入到

String ... codes中

5.ServiceImpl实现类 其中使用了注解缓存

6.在Redis Desktop Manage工具中可以看得到 

三、后端feign调用该接口

8.在trans服务中也添加DictReq类 (copy过来就行)

9.具体实现类中使用给feign类

一、前端使用

1.前台vue3接口使用  dictManege.ts

import request from '@/utils/request'

export function getDicListByCodes(query:any) {
  return request({
    url: './user-service/dict/queryByCodes',
    method: 'post',
    data: query
  });
};

2.前台使用该接口地方

    const showEdit = async (row) => {
      //初始化修改的字典
      const {
        retCode, success, data, msg
      } = await getDicListByCodes({
        codes: ["sex","id_type","copd_level"]
      })
      if (retCode === 0) {
        state.sexList = data.sex;
        state.idTypeList = data.id_type;
        state.copdLevelList = data.copd_level;
      }
}

3.前台反显地方 其他几个都一样,这里使用在state中定义的idTypeList,在上面赋值,在这里使用 

      <el-form-item label="证件类型">
        <el-select v-model="form.idType">
          <el-option
            v-for="item in idTypeList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </el-form-item>

二、后端使用

4.后端controller接口实现  其中使用字典String[]来接收  放入到

String ... codes

@Slf4j
@RestController
@RequestMapping("/dict")
@Api(value = "字典", tags = "字典")
public class DictController extends BaseController {

    @Autowired
    private DictService dictService;
   
    @PostMapping("/queryByCodes")
    @ApiOperation(value = "根据多个code获取字典数据集")
    public R<Map<String,List<Dict>>> queryByCodes(@RequestBody DictReq dictReq){
        try {
            if (StrUtil.isBlankIfStr(dictReq.getCodes()) || dictReq.getCodes().length==0) {
                return R.fail(Constant.ERROR_PARAM_CODE, "code不能为空");
            }

            // 保存成员信息到数据库
            Map<String,List<Dict>> result = dictService.queryByCodes(dictReq.getCodes());
            return R.data(0, result, null);
        } catch (Exception ex) {
            System.out.println(ex.getMessage());
            ex.printStackTrace();
            return R.fail(ResultCode.INTERNAL_SERVER_ERROR.getCode(), ResultCode.INTERNAL_SERVER_ERROR.getMessage());
        }
    }

}
import com.baomidou.mybatisplus.annotation.TableField;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;


@Data
public class DictReq {
    @TableField(exist = false)
    @ApiModelProperty(value = "多个code")
    private String[] codes;

    public DictReq(String[] codes) {
        this.codes = codes;
    }

    public DictReq(){}
}

public interface DictService extends IService<Dict> {

    Map<String,List<Dict>> queryByCodes(String ... codes);
}

5.ServiceImpl实现类 其中使用了注解缓存

@Service
@CacheConfig(cacheNames = "dict") //key键会添加dict::
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    @Override
    @Cacheable(value = "dict", key = "#codes")
    public Map<String, List<Dict>> queryByCodes(String... codes) {
        Map<String, List<Dict>> result = new HashMap<>();

        for(String code : codes){
            result.put(code,this.getByCode(code));
        }

        return result;
    }

    // @Override
    @Cacheable(value = "dict", key = "#code")
    public List<Dict> getByCode(String code) {
        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
        queryWrapper.lambda().eq(Dict::getCode, code);
        queryWrapper.lambda().ne(Dict::getParentId, 0);
        queryWrapper.orderByAsc("sort"); //排序
        return this.list(queryWrapper);
    }

}

6.在Redis Desktop Manage工具中可以看得到 

三、后端feign调用该接口

7.在trans服务实现feign接口调用user服务中的queryByCodes接口

@FeignClient(name = "user-service")//提供者的应用名称
@Component
public interface FeignUserService {

    @RequestMapping(value = "/dict/queryByCodes", method = RequestMethod.POST)
    R<Map<String,List<Dict>>> getDictByCodes(DictReq dictReq);
}

8.在trans服务中也添加DictReq类 (copy过来就行)

9.具体实现类中使用给feign类

    @Autowired
    private FeignUserService feignUserService;

 
    @Override
    public IPage<PatientDto> patientList(IPage<PatientDto> page, PatientReq req) {
       
        List<PatientDto> patientDto = baseMapper.patientList(page,req);

        Map<String,List<Dict>> resultMap =  feignUserService.getDictByCodes(new DictReq(new String[]{"sex","copd_level","is_close"})).getData();

        patientDto.forEach(dto->{
            dto.setAge(StrUtils.getAgeByBirthYear(dto.getAge()) + "");
            dto.setSex(resultMap.get("sex").stream().collect(Collectors.toMap(Dict::getDictKey , Dict::getDictValue)).get(dto.getSex()));
            dto.setCopdLevel(resultMap.get("copd_level").stream().collect(Collectors.toMap(Dict::getDictKey , Dict::getDictValue)).get(dto.getCopdLevel()));
            dto.setIsClose(resultMap.get("is_close").stream().collect(Collectors.toMap(Dict::getDictKey , Dict::getDictValue)).get(dto.getIsClose()));
        });
        return page.setRecords(patientDto);
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/559447.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

多线程环境下Java怎么从线程返回信息?

1. 问题描述 习惯了传统单线程过程式模型的程序员在转向多线程环境时&#xff0c;最难掌握的一点就是如何从线程返回信息。从结束的线程获得信息&#xff0c;这是多线程编程中最常被误解的方面之一。run()方法和start()方法不返回任何值。 2. 使用存储方法返回结果 如下面程…

自动化档案档案库房库房温湿度调节的好处

档案库房环境温湿度不合适&#xff0c;那么会造成供配电系统、网络设备不稳定&#xff0c;机房无法正常运行、资料老化。仓库温湿度不合适&#xff0c;储藏货物就会霉变、腐烂&#xff0c;给企业带来经济损失。所以环境温湿度必须实时处于可视、可控的范围&#xff0c;因此要安…

从零开始 Spring Boot 34:日志 II

从零开始 Spring Boot 34&#xff1a;日志 II 图源&#xff1a;简书 (jianshu.com) 在从零开始 Spring Boot 10&#xff1a;日志 - 红茶的个人站点 (icexmoon.cn)中&#xff0c;我简单介绍过如何在Spring Boot中整合SLF4J日志。实际上&#xff0c;如果没有特殊需求&#xff0c…

开发一套pacs系统主要解决的问题有哪些?

PACS的定义 PACS&#xff08;picture archiving and communication system&#xff09;意为影像归档和通信系统。它是应用在医院影像科室的系统&#xff0c;主要的任务就是把日常产生的各种医学影像&#xff08;包括核磁&#xff0c;CT&#xff0c;超声&#xff0c;各种X光机&…

MySQL---锁机制

1. 锁的分类 从对数据操作的粒度分 &#xff1a; 表锁&#xff1a;操作时&#xff0c;会锁定整个表。 行锁&#xff1a;操作时&#xff0c;会锁定当前操作行。 从对数据操作的类型分&#xff1a; 读锁&#xff08;共享锁&#xff09;&#xff1a;针对同一份数据&#xff…

ChatGPT与低代码开发:危机四伏、技术暴走!

随着人工智能技术和低代码开发平台的不断发展&#xff0c;越来越多的企业开始采用AI技术来提高业务效率和创造更好的用户体验。AI技术与低代码开发的结合&#xff0c;为企业节省了大量时间和成本&#xff0c;同时也提高了业务创新和竞争力。然而&#xff0c;一些潜在的问题也开…

关于怎么用好API接口获取更多信息节约时间成本

API接口是现代互联网应用开发的重要工具&#xff0c;它允许开发者使用标准化的方式获取数据和服务&#xff0c;在搭建应用中扮演了重要的角色。因此&#xff0c;如何利用API接口获取更多信息已经成为了每个开发者需要掌握的技能之一。 第一步&#xff1a;寻找 API接口 在开始…

2023Revit精装模块,一键搞定便捷精装!

大家好&#xff0c;这里是BIM建模助手。 今天有个重磅消息要告诉大家&#xff0c;那就是BIM建模助手的【精装模块】上线啦&#xff01; 为了辅助BIMer快速设计出精装修的房屋效果&#xff0c;我们开发了【精装模块】&#xff0c;无论是装饰面层、铺排瓷砖、布置吊顶、统计出量…

​​​​​​​博物馆文物馆藏环境空气质量无线监控系统方案

博物馆文物馆藏环境空气质量无线监控系统方案 博物馆无线环境测控系统 博物馆恒温恒湿消毒净化系统 现代化博物馆空气质量一体化3D可视化管控平台 博物馆温湿度在线监控系统 博物馆光照在线监控系统 博物馆二氧化碳在线监控系统 博物馆在线监控系统 博物馆紫外线在线监控…

【TikZ 简单学习(下):基础绘制】Latex下的绘图宏包

【TikZ 简单学习[下]&#xff1a;基础绘制】Latex下的绘图宏包 上文绘制多个节点给节点添加统一样式给节点命名使用相对位置绘制给节点标签链接边的绘制在线边上添加标签绘制蛇形线和多行文本层图绘制一个简单的树 上文 【TikZ 简单学习(上)&#xff1a;基础绘制】Latex下的绘…

【笔试强训选择题】Day19.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

深度学习神经网络学习笔记-多模态方向-11-Deep Voice: Real-time Neural Text-to-Speech

摘要 本文提出Deep Voice&#xff0c;一种完全由深度神经网络构建的生产质量文本到语音系统。Deep Voice为真正的端到端神经语音合成奠定了基础。该系统由五个主要的构建模块组成:用于定位音素边界的分割模型、字素到音素的转换模型、音素时长预测模型、基频预测模型和音频合成…

那年我手执『wait』桃木剑,轻松解决僵尸进程~

文章目录 &#x1f490;专栏导读&#x1f490;文章导读&#x1f427;进程退出&#x1f426;进程常见的退出方法&#x1f414;正常终止&#x1f514;return 退出&#x1f514;exit 退出&#x1f514;_exit 退出 &#x1f414;异常终止 &#x1f427;进程等待&#x1f426;必要性…

00后实在太卷了,跳槽到我们公司起薪20k,都快超过我了....

都说00后已经躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。 前段时间我们部门就来了个00后&#xff0c;工作都还没两年&#xff0c;跳到我们公司起薪20K&#xff0c;都快接近我了。 后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。最近和…

美股股指期货是什么?有哪些美股股指期货交易门槛?

美股期指就是美股期货指数&#xff0c;并不是单独的指道琼斯还是纳斯达克&#xff0c;就好像中国的股指期货一样道理&#xff0c;是以沪深300为标的的&#xff0c;美股期指也是期货&#xff0c;不是单纯的指数。交易美股产品需要先完成开户&#xff0c;要想一次性开户成功就要满…

2023.4月及5月最新HCIP 考试战报来袭

2023年HCIP/CCNP考试战报_微思xmws的博客-CSDN博客国内企业或国企、事业单位&#xff0c;华为设备普及&#xff0c;国内未来发展趋势&#xff0c;考华为认证更被认可。如果你在外企上班或有出国打算&#xff0c;推荐考思科。https://blog.csdn.net/XMWS_IT/article/details/129…

【隔空投送】2023新品,加速科技ST2500E重磅来袭

随着5G通信、人工智能、虚拟现实、新能源以及先进封装技术的飞速发展&#xff0c;芯片线宽尺寸不断减小&#xff0c;芯片复杂度不断跃升&#xff0c;对测试机的要求愈加提高。提供多种测试程序并可进行大量的并行测试&#xff0c;有效减少测试成本&#xff0c;缩短产品上市时间…

Paddle 模型转 TensorRT加速模型

Paddle 模型转 TensorRT加速模型 概述 NVIDIA TensorRT 是一个高性能的深度学习预测库&#xff0c;可为深度学习推理应用程序提供低延迟和高吞吐量。PaddlePaddle 采用子图的形式对TensorRT进行了集成&#xff0c;即我们可以使用该模块来提升Paddle模型的预测性能。在这篇文章…

Ubuntu显示时间不正确的问题解决

安装完ubuntu后&#xff0c;发现我的ubuntu显示的时间不对&#xff0c;和网络的时间根本对不上。网上查找了相关设置方法&#xff0c;这里总结一下。 一般来说&#xff0c;显示时间不正确的情况就两种情况&#xff0c;第一&#xff1a;是你系统设置的时区不对&#xff1b;第二…

多层感知机学习XOR实例

多层感知机学习XOR实例 多层感知机介绍使用多层感知机学习XOR实例传统统计数学方法&#xff08;传统机器学习&#xff09;使用多层感知机学习XOR 总结 多层感知机介绍 多层感知机&#xff08;Multilayer Perceptron&#xff0c;MLP&#xff09;&#xff0c;又称为深度前馈网络…