格式化 SPA 使用的 JSON 数据的最佳方法是什么？

Question

我正在和朋友一起开发单页应用程序（在 React 中，但我相信框架并不重要，同样的问题也适用于 Angular）。

有一个有 2 个表的数据库：

• 功能
• 汽车

两个表在数据库中以多对多关系连接。

我们的不同之处在于我们应该如何将数据从后端传递到前端（更准确地说，CarManagementComponent 可以让用户处理汽车/功能（编辑/更新/删除等））。我们希望能够在实际上向后端发送请求以更新数据库之前执行多个操作，以便用户获得类似桌面应用程序的界面体验。

请记住，数据库中有更多表，但为了示例的简单性，我们在这里只讨论其中的 2 个。

1) 我的方法：

{
    "Features": [
        {
            "Id": 0,
            "Price": 3000,
            "Name": "led lights",
            "Color": "transparent",
            "Brand": "Valeo",
            "Guarantee": 12
        },
        {
            "Id": 1,
            "Price": 1000,
            "Name": "air conditioning",
            "Color": "",
            "Brand": "Bosch",
            "Guarantee": 12
        },
        {
            "Id": 2,
            "Price": 600,
            "Name": "tinted windows",
            "Color": "",
            "Brand": "Bosch",
            "Guarantee": 36
        }
    ],
    "Cars": [
        {
            "Id": 0,
            "Name": "Ford Mustang GT",
            "Weight": 2210,
            "Features":[
                {
                    "Id": 0, // id of many-to-many relations record
                    "FeatureId": 2
                },
                {
                    "Id": 1, // id of many-to-many relations record
                    "FeatureId": 1
                }
            ]
        },
        {
            "Id": 1,
            "Name": "Volkswagen Arteon",
            "Weight": 1650,
            "Features":[
                {
                    "Id": 2, // id of many-to-many relations record
                    "FeatureId": 2
                }
            ]
        }         
    ]
}

2) 我朋友的做法：

{
    "Cars": [
        {
            "Id": 0,
            "Name": "Ford Mustang GT",
            "Weight": 2210,
            "Features": [
                {
                    "Id": 1,
                    "Price": 1000,
                    "Name": "air conditioning",
                    "Color": "",
                    "Brand": "Bosch",
                    "Guarantee": 12
                },
                {
                    "Id": 2,
                    "Price": 600,
                    "Name": "tinted windows",
                    "Color": "",
                    "Brand": "Bosch",
                    "Guarantee": 36
                }
            ]
        },
        {
            "Id": 1,
            "Name": "Volkswagen Arteon",
            "Weight": 1650,
            "Features": [
                {
                    "Id": 2,
                    "Price": 600,
                    "Name": "tinted windows",
                    "Color": "",
                    "Brand": "Bosch",
                    "Guarantee": 36
                }
            ]
        }
    ]
}

我相信第一种方法更好，因为：

• 重量更轻（无数据冗余）
• 将此类数据转换为面向对象的结构会更容易
• 例如。我们能够看到所有功能记录（在第二种方法中，我们只会看到与 Cars 连接的记录，并且需要另一个后端请求）
• 例如。与第二种方法不同，我们能够在 1 个请求中获取所有需要的数据（同步问题更少），我们也可以在单个请求中保存修改后的数据

我的朋友说第二种方法更好，因为：

• 使用 ORM（休眠）会更容易实现这一目标
• 他一生中从未见过第一种方法（这可能会得出结论，它是以错误的方式完成的）

你怎么看？哪种解决方案更好？也许他们都在某些领域？也许我们还没有想到第三种解决方案？

Answer 1

我会说我最喜欢的方法是你的方法，主要原因有两个：

1. 请记住，数据重复在 HTTP 请求中是不好的，您的方法是避免它。
2. 您将FeatureId 放在汽车对象中，就足以在 O(N) 的高效性能中获得该功能。

为了让它变得更好，你可以把你的特征结构改成这样：

"Features": {
       0: { // <- If the id is unique, you can use it as a key.
            "Id": 0,
            "Price": 3000,
            "Name": "led lights",
            "Color": "transparent",
            "Brand": "Valeo",
            "Guarantee": 12
        },
        1: {
            "Id": 1,
            "Price": 1000,
            "Name": "air conditioning",
            "Color": "",
            "Brand": "Bosch",
            "Guarantee": 12
        },
        2: {
            "Id": 2,
            "Price": 600,
            "Name": "tinted windows",
            "Color": "",
            "Brand": "Bosch",
            "Guarantee": 36
        }
    },

这样，你可以在 O(1) 中得到 Feature。