某前后端分离项目，如何传递参数？

最新推荐文章于 2024-08-01 14:29:43 发布

火柴头9527

最新推荐文章于 2024-08-01 14:29:43 发布

阅读量7.4k

点赞数 1

分类专栏：软件工程文章标签：前后端分离

本文链接：https://blog.csdn.net/jinjiankang/article/details/89377280

版权

软件工程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

1.1 初次提交

请求参数

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

响应参数

{
  "id": 386
}

1.2 编辑后提交

请求参数
前端需要传递id或uuid这类唯一标识到后端。如果不传递：

如果业务上规定，一个用户只能有一个简历，那就简单了。
如果业务上规定，一个用户可以有多个简历，例如面试政府部门的简历，面试互联网公司的简历等，那后端就无从下手，不知道该更新哪个了。

所以，再次编辑后提交，需要携带id。

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

响应参数

{
  "id": 386
}

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

在编辑简历的同时，也编辑教育信息。

2.1 初次提交

请求参数

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

响应参数
问题来了，如何表征多个教育信息在数据库表里的id值呢？这个id很重要，删除或更新教育信息时需要用到。

最简单的方式，重新加载整个页面信息，显然，加载后所有实体都有id。但是，比较浪费带宽。
可以考虑前端为每个教育信息生成一个临时唯一标识，响应时携带这个临时唯一标识，这样前端就可以对号入座，根据frontEndUuid的值，设置后端生成的真正的id值了，之后抛弃frontEndUuid。
改进后请求参数

{
  "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"
    }
  ]
}

问题来了，编辑后如何表征哪些教育信息是新增的，哪些是被修改的，哪些是被删除的？可以考虑：
【方法1】

新增的，为新增的教育信息新增一个变量：newEduList
修改的，为修改的（无变化的视为修改的）教育信息新增一个变量：modifiedEduList
删除的，为删除的教育信息新增一个变量：delEduList

【方法2】
不新增变量，只使用eduList这一个变量：

无论用户作何操作，全都把页面上呈现的教育信息封装到eduList，并传递到后端。
将传入eduList记为A，数据库中的eduList集合（例如select id from t_edu_info where userId = ?）记为B。
新增的教育信息：A中edu的id为空的。
无变化的及修改的教育信息：A与B的交集。
删除的：B-A。

【方法3】
不新增变量，只使用eduList这一个变量：

如果eduList为null，表示教育信息无变化，后端可以忽视之。
如果eduList的大小为0，则表示客户端已删除了所有实体，无新增和修改。以下内容仅针对eduList大小大于0的情况：
将传入eduList记为A，数据库中的eduList集合（例如select id from t_edu_info where userId = ?）记为B。
新增的教育信息：A中edu的id为空的。
无变化的及修改的教育信息：A与B的交集。
删除的：B-A。

	方法1	方法2	方法3
优点	数据模型很清晰，后端代码整洁。	变量少，前端工作量少些。	对方法2的改进
缺点	变量较多，前端工作量大些。	后端对前端的操作不甚明了，计算新增的、修改的和删除的，一个也不能少，即使用户没有任何编辑行为。

方法1请求参数举例（方法2和方法3略）

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