欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

某前后端分离项目,如何传递参数?

程序员文章站 2022-07-15 16:12:05
...

1. 只有一个简单业务实体

假设有一个编辑简历的功能,页面元素很简单,只有:姓名、年龄。数据格式为:application/json。

1.1 初次提交

请求参数

{
  "age": 29,
  "name": "张三"
}

响应参数

{
  "id": 386
}

1.2 后续提交

请求参数
前端需要传递id或uuid这类唯一标识

{
  "id": 386
  "age": 29,
  "name": "张三"
}

响应参数

{
  "id": 386
}

2. 一个业务实体,并且同时1对多关联其他业务实体

2.1 初次提交

请求参数

{
  "name": "张三",
  "age": 29,
  "eduList": [
    {
      "colleague": "高校1",
      "major": "专业1"
    },
    {
      "colleague": "高校2",
      "major": "专业2"
    },
    {
      "colleague": "高校3",
      "major": "专业3"
    }
  ]
}

响应参数
问题来了,如何表征多个教育信息在数据库表里的id值?
可以考虑,前端为每个教育信息生成一个唯一标识,响应时携带这个唯一标识。
改进后请求

{
  "name": "张三",
  "age": 29,
  "eduList": [
    {
      "frontEndUuid": "xxxx",
      "colleague": "高校1",
      "major": "专业1"
    },
    {
      "frontEndUuid": "xxxx",    
      "colleague": "高校2",
      "major": "专业2"
    },
    {
      "frontEndUuid": "xxxx",    
      "colleague": "高校3",
      "major": "专业3"
    }
  ]
}

改进后响应

{
  "id": xxx,
  "eduList": [
    {
      "frontEndUuid": "xxxx",
       "id": xxx
    },
    {
      "frontEndUuid": "xxxx",    
       "id": xxx
    },
    {
      "frontEndUuid": "xxxx",    
       "id": xxx
    }
  ]
}

2.2 查询、编辑后提交请求参数

查询的响应

{
  "id": xxx,
  "name": "张三",
  "age": 29,
  "eduList": [
    {
      "id": "xxxx",
      "colleague": "高校1",
      "major": "专业1"
    },
    {
      "id": "xxxx",    
      "colleague": "高校2",
      "major": "专业2"
    },
    {
      "id": "xxxx",    
      "colleague": "高校3",
      "major": "专业3"
    }
  ]
}

问题来了,编辑后如何表征哪些教育信息是新增的,哪些教育信息是被删除的?可以考虑:

  • 新增的,frontEndUuid有值,但id无值
  • 删除的,仅传递id值,其他属性均不传递

有新增、有删除、有编辑,请求参数

{
  "id": xxx,
  "name": "张三",
  "age": 30,
  "eduList": [
    {
      "id": "xxxx"                 <====== 这是删除的
    },
    {
      "id": "xxxx",    
      "colleague": "高校2-更新",    <====== 这是更新的
      "major": "专业2-更新"
    },
    {
      "id": "xxxx",                <====== 这里并没有修改,但后端仍可以按此数据进行更新
      "colleague": "高校3",
      "major": "专业3"
    },
    {
      "frontEndUuid": "xxxx",      <====== 这是新增的
      "colleague": "高校4",
      "major": "专业4"
    }    
  ]
}

2.3 粗暴的处理方法

无论新增还是编辑,对教育信息每次都先删除数据库中的数据,再按全新数据插入。

相关标签: 前后端分离