vue3 フロントエンド クエリは複数の辞書項目を使用し、バックグラウンドと対話します。

目次

1. フロントエンドでの使用

1. フロントエンド vue3 インターフェイスは dictManege.ts を使用します

2. フロントデスクでのインターフェースの使用場所

3. フロントエンド表示の他の側面は同じですが、ここでは状態で定義された idTypeList を使用し、上記の値を割り当てて、それをここで使用します。 

2. バックエンドの使用

4. バックエンド コントローラー インターフェイスの実装。辞書 String[] を使用して受信および格納します。

String ... codes中

5.ServiceImpl実装クラスはアノテーションキャッシュを使用します

6. Redis デスクトップ管理ツールで確認できます。 

3. バックエンドの偽装はこのインターフェイスを呼び出します

8. また、trans サービスに DictReq クラスを追加します (コピーするだけです)。

9. feignクラスへの特定の実装クラスで使用される

1. フロントエンドでの使用

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. フロントエンド表示の他の側面は同じですが、ここでは状態で定義された 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>

2. バックエンドの使用

4. バックエンド コントローラー インターフェイスの実装。辞書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 デスクトップ管理ツールで確認できます。 

3. バックエンドの偽装はこのインターフェイスを呼び出します

7. trans サービスに feign インターフェイスを実装し、ユーザー サービスで 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 クラスを追加します (コピーするだけです)。

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

おすすめ

転載: blog.csdn.net/qq_40453972/article/details/130827945