vue3 front-end query uses multiple dictionary items and interacts with the background

Table of contents

1. Front-end use

1. The front-end vue3 interface uses dictManege.ts

2. Where the interface is used at the front desk

3. The other aspects of the front-end display are the same. Here we use the idTypeList defined in the state, assign a value above, and use it here. 

2. Backend use

4. Backend controller interface implementation, which uses dictionary String[] to receive and put into

String ... codes in

5.ServiceImpl implementation class uses annotation caching

6. It can be seen in the Redis Desktop Manage tool 

3. The backend feign calls this interface

8. Also add the DictReq class in the trans service (just copy it over)

9. Used in the specific implementation class to the feign class

1. Front-end use

1. The front-end vue3 interface uses dictManege.ts

import request from '@/utils/request'

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

2. Where the interface is used at the front desk

    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. The other aspects of the front-end display are the same. Here we use the idTypeList defined in the state, assign a value above, and use it here. 

      <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>

2. Backend use

4. Backend controller interface implementation, which uses dictionary String[] to receive and put into

String ... codes in

@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 implementation class uses annotation caching

@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. It can be seen in the Redis Desktop Manage tool 

3. The backend feign calls this interface

7. Implement the feign interface in the trans service and call the queryByCodes interface in the user service.

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

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

8. Also add the DictReq class in the trans service (just copy it over)

9. Used in the specific implementation class to the feign class

    @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);
    }