（实战）WebApi第13讲：怎么把不同表里的东西，包括同一个表里面不同的列设置成不同的实体，所有的给整合到一起？【前端+后端】

前言

在现代Web开发中，如何将不同表中的数据或者同一个表中的不同列整合成一个统一的视图，是一个非常常见的问题。无论是在后端数据库设计、API设计，还是前端展示层的构建，都经常需要将来自不同数据源的数据整合到一起。比如，假设我们有一个包含用户信息和订单信息的数据库，如何将这些数据整合成一个API响应，使得前端能够直接展示所有相关内容，便是一个典型的应用场景。

本文将从前后端的角度，探讨如何将多个表中的数据、或者同一个表中的不同列整合成不同的实体，并最终返回给前端显示。我们将讨论数据模型设计、后端API开发、前端展示、交互设计等方面的内容，并通过一个实际案例来演示如何实现这个过程。

章节概览

1. 数据整合的基本概念
2. 后端设计：如何整合数据
3. 前端设计：如何展示整合后的数据
4. 完整案例：用户与订单信息的整合与展示
5. 总结

1. 数据整合的基本概念

在多表设计中，数据整合的常见需求主要涉及以下几种场景：

• 一对多：一个表中的一条记录与另一个表中的多条记录相关联。
• 多对多：两个表中的多条记录相互关联。
• 单表多列整合：同一个表中的不同列需要整合成不同的实体或者视图。

1.1 一对多关系整合

比如，一个订单系统中，一个用户可以有多个订单。数据库中通常会有一个用户表和一个订单表，用户表的每一条记录与订单表的多条记录相关联。在这种情况下，如何将用户信息和订单信息整合到一起，返回给前端展示，是我们需要解决的问题。

1.2 多对多关系整合

在多对多的场景中，两个表中的记录是相互关联的，常见的例子是学生与课程的关系。每个学生可以选修多个课程，而每个课程也可以被多个学生选修。在这种情况下，我们需要通过一个中间表来维护这种多对多的关系，并将这些数据整合后返回给前端。

1.3 单表多列整合

有时候，我们需要将同一个表中的不同列整合成多个实体。例如，假设有一个包含用户、商品、价格等多列信息的表，在后端需要根据不同的列生成不同的实体返回前端。这种情况一般会通过拆分不同的列为不同的DTO（数据传输对象）来解决。

2. 后端设计：如何整合数据

在后端设计中，整合数据通常包括以下几个步骤：

• 数据库查询：通过SQL语句将多个表的数据查询出来。
• 数据转换：将查询结果转化为适合前端展示的数据格式。
• API设计：将转换后的数据返回给前端。

2.1 数据库查询

首先，我们需要通过数据库查询将相关的表数据拉取出来。比如，如果我们有一个Users表和一个Orders表，用户表和订单表通过user_id关联。SQL查询可以如下所示：

sqlCopy Code
SELECT u.name, u.email, o.order_id, o.order_date, o.amount
FROM Users u
JOIN Orders o ON u.user_id = o.user_id
WHERE u.user_id = @userId;

这个查询将返回一个用户的基本信息以及他们的所有订单信息。

2.2 数据转换

查询数据后，我们需要将数据转化为适合前端展示的结构。可以使用DTO模式（数据传输对象）来封装数据，确保数据格式清晰且易于传输。

csharpCopy Code
public class UserDto
{
    public string Name { get; set; }
    public string Email { get; set; }
    public List<OrderDto> Orders { get; set; }
}

public class OrderDto
{
    public int OrderId { get; set; }
    public DateTime OrderDate { get; set; }
    public decimal Amount { get; set; }
}

通过这种方式，前端只需要处理一个UserDto对象，而不必关注用户和订单信息的分离。

2.3 API设计

为了返回这些数据，我们需要设计一个RESTful API端点，例如：

csharpCopy Code
[HttpGet]
[Route("api/users/{userId}/details")]
public ActionResult<UserDto> GetUserDetails(int userId)
{
    var user = _userService.GetUserById(userId);
    if (user == null) return NotFound();

    var userDto = new UserDto
    {
        Name = user.Name,
        Email = user.Email,
        Orders = user.Orders.Select(o => new OrderDto
        {
            OrderId = o.OrderId,
            OrderDate = o.OrderDate,
            Amount = o.Amount
        }).ToList()
    };

    return Ok(userDto);
}

这个API端点将根据用户ID返回整合后的用户和订单信息。

3. 前端设计：如何展示整合后的数据

前端的任务是根据后端返回的数据，将其以用户友好的方式展示。以下是几个关键的前端设计考虑点：

3.1 数据绑定

前端框架（如React、Vue、Angular）可以通过数据绑定将从API获取的数据渲染到界面。例如，在React中，我们可以使用useState和useEffect来获取和展示数据：

javascriptCopy Code
import React, { useState, useEffect } from 'react';

const UserDetail = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}/details`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <h2>Orders</h2>
      <ul>
        {user.orders.map(order => (
          <li key={order.orderId}>
            Order ID: {order.orderId}, Date: {order.orderDate}, Amount: {order.amount}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserDetail;

在这个React组件中，我们从API获取用户和订单信息并渲染在界面上。

3.2 标签切换和动态展示

前端中经常需要根据用户的操作动态展示不同的数据。比如，用户点击标签切换显示不同的信息。在Vue中，我们可以通过v-if或v-for来根据用户的操作动态展示数据：

Copy Code
<template>
  <div>
    <div>
      <button @click="currentTab = 'user'">User Info</button>
      <button @click="currentTab = 'orders'">Orders</button>
    </div>

    <div v-if="currentTab === 'user'">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>

    <div v-if="currentTab === 'orders'">
      <ul>
        <li v-for="order in user.orders" :key="order.orderId">
          Order ID: {{ order.orderId }}, Date: {{ order.orderDate }}, Amount: {{ order.amount }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'user',
      user: {
        name: 'John Doe',
        email: 'john.doe@example.com',
        orders: [
          { orderId: 1, orderDate: '2024-01-01', amount: 100.00 },
          { orderId: 2, orderDate: '2024-02-01', amount: 150.00 }
        ]
      }
    };
  }
};
</script>

这里的currentTab控制了用户信息和订单信息的显示，用户点击按钮后，界面会根据当前选中的标签切换展示不同的数据。

4. 完整案例：用户与订单信息的整合与展示

4.1 后端实现

假设我们在后端有如下数据库表结构：

• Users：包含用户基本信息。
• Orders：包含用户的订单信息。

sqlCopy Code
CREATE TABLE Users (
    user_id INT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100)
);

CREATE TABLE Orders (
    order_id INT PRIMARY KEY,
    user_id INT,
    order_date DATE,
    amount DECIMAL,
    FOREIGN KEY (user_id) REFERENCES Users(user_id)
);

我们的目标是将Users表和Orders表的数据整合成一个