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);
    }
相关推荐
木西11 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(流动性挖矿-前端部分)
react native·web3·智能合约
白鹭凡16 小时前
WEB3的资料——免费开放
web3
dingzd953 天前
去中心化金融(DeFi)入门必看
金融·web3·去中心化·区块链·facebook·tiktok·instagram
Sui_Network3 天前
凭借 Seal,Walrus 成为首个具备访问控制的去中心化数据平台
大数据·人工智能·科技·web3·去中心化·区块链
TechubNews3 天前
Webus 与中国国际航空合作实现 XRP 支付
大数据·网络·人工智能·web3·区块链
木西4 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(流动性挖矿-合约部分)
web3·智能合约·solidity
TinTin Land5 天前
从程序员到「认识罕见病 DAO」发起人,他用 Web3 承载爱与责任
web3
木西6 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(NFT交易所-合约部分)
web3·智能合约·solidity
木西7 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(铸造NFT-前端部分)
前端·react native·web3
木西7 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(铸造NFT-合约部分)
web3·智能合约·solidity