Web开发-问题-前后端交互数据不一致

0x01 问题描述

  • 所用的技术:Vue+Spring Boot
  • 后端传给前端数据:
cpp 复制代码
[Student(studentId=1, person=org.fatmansoft.teach.models.Person@4abe6020, major=软件工程, className=一班, grade=一年级), Student(studentId=2, person=org.fatmansoft.teach.models.Person@5207b9e6, major=软件工程, className=二班, grade=二年级)]
  • 前端接收数据:

前后端通讯数据明显不同,非常疑惑???(・∀・(・∀・(・∀・*)

0x02 解决

问题原因

javascript 复制代码
export interface StudentItem {
  studentId: number;
  personId: number;
  num: string;
  name: string;
  dept: string;
  major: string;
  className: string;
  card: string;
  gender: string;
  genderName: string;
  birthday: string;
  email: string;
  phone: string;
  address: string;
  grade: string;
  url: string;
  introduce: string;
}
  • 前端的学生数据定义,和后端传的不一致,后端传的person是封装过的,所以前端获取不到person内的数据
  • 要想获取到数据,就要在后端将person里封装的数据给拿到Student下

解决方案

定义一个模板类StudentDto继承Student,将Student中没有的数据(此处是url和name),从person里拿到StudentDto里,然后返回一个StudentDto的list。

java 复制代码
   public DataResponse getStudentListByMajor(@Valid @RequestBody DataRequest dataRequest){
        Optional<Student> student = studentRepository.findStudentByStudentId((Integer) dataRequest.get("studentId"));
        Student s = student.get();
        String major = s.getMajor();
        List<Student> list = studentRepository.findStudentListByMajor(major);
        List<StudentDto> collect = list.stream().map((item) -> {
            StudentDto dto = new StudentDto();
            BeanUtils.copyProperties(item, dto);
            dto.setName(item.getPerson().getName());
            dto.setUrl(item.getPerson().getUrl());
            return dto;
        }).collect(Collectors.toList());
        return CommonMethod.getReturnData(collect);
    }
相关推荐
leijiwen19 小时前
S11e Network 商业模型:AI × Web3 × RWA 驱动的实体经济新范式
人工智能·web3·区块链
leijiwen19 小时前
Web3 RWA 品牌的价值跃迁:从竞争到共赢的网络共建
web3
ZFJ_张福杰1 天前
【Flutter】APP的数据安全(基于Flutter 交易所APP的总结)
flutter·web3·区块链·app·交易所
caijingshiye1 天前
ChainVault闪耀杭州RWA峰会,黄金RWA重塑Web3新生态
web3
caijingshiye2 天前
Auricore亮相杭州RWA峰会,以黄金RWA重塑Web3新生态
web3
StockPP2 天前
获取美国股票数据API对接完全指南
web3·区块链
leijiwen4 天前
基于 Web3 + RWA 的品牌门店数字化范式
web3
OpenBuild.xyz5 天前
PBS, 以太坊的棘刺雕猴
web3
元宇宙时间6 天前
SYN VISION韩国发布会:获评非小号Alpha,战略合作PrompTale
人工智能·web3·区块链
Sui_Network7 天前
CUDIS 健康协议在 Sui 上打造更健康的未来
人工智能·科技·web3·去中心化·区块链