Javascript 如何在React中使用外键向我的数据库添加数据

我正在使用React使用NodeJS将数据发送到我的PostgreSQL数据库。我的歌曲和图像中都有一个外键（id），它引用了专辑id作为我的标题、日期和描述。我在相册表中使用uuid作为我的id。我的问题是，我的歌曲和图像文件表如何知道该页面上的唱片集id是用歌曲和图像创建的

这是一个包含相册（标题、描述、日期）的页面，相册保存在自己的表格中，歌曲列表保存在自己的表格中，图像保存在自己的表格中。image和songs表都有一个唱片集id，该id引用唱片集的id:

专辑

const addAlbum = (request, response) => {
  const { title, date, description, id } = request.body;
  const uuid = uuidv4();

for (let i = 0; i < request.body.length; i++) {
  db.pool.query('INSERT INTO albums (title, date, description, id) VALUES ($1, $2, $3, $4) ON CONFLICT (id) DO NOTHING RETURNING *' , [request.body[i].title, request.body[i].date, request.body[i].description, uuid], (error, results) => {
    if (error) {
      throw error
    } else {
      console.log('INSERT ' + JSON.stringify(request.body));
    }
  })
}
}

---

唱片集信息和歌曲信息在React的同一保存按钮上插入，但歌曲如何知道唱片集id来自同一页面上的唱片集id？

问题的关键在于

addAlbum

方法没有返回新创建唱片集的id，因此，插入相册后，无法将歌曲和图像与相册关联。有多种方法可以解决这个问题，但如果是我，我只需更新

addAlbum

方法，在创建后返回整个相册（也就是说，包括新的UUID）。帖子可能如下所示：

POST /albums HTTP/1.1
Content-Type: application/json

{
  "title": "Dillon",
  "date": "2020-01-01T00:00:00.000Z",
  "description": "An awesome political protest album."
}

鉴于上述建议，答复如下：

{
  "title": "Dillon",
  "date": "2020-01-01T00:00:00.000Z",
  "description": "An awesome political protest album.",
  "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
}

然后，在前端，您的代码看起来像这样（伪代码）

const newAlbum=wait albumDao.save（相册）；
for（康斯特歌曲集）{
song.album_id=newAlbum.id；
等待松刀。保存（松）；
}

---

另一种选择是将相册及其所有图像和歌曲一起保存在一个精心编制的API中。这样做的好处是：1）服务器知道相册ID，2）您可以利用事务，这样，如果歌曲或图像无法插入，整个shebang就会回滚。

问题的措辞方式使您很难理解所询问的内容。有一页提到过几次：哪一页？可以为页面或图片或其他可视化功能提供代码吗？@avejidah好的，我添加了一个图像如何调用函数

addAlbum

和

upsertSong

？它们是通过API访问的吗？如果是这样的话，你是点击一个调用两种方法的API，还是点击多个API——一个保存专辑，然后一个上传歌曲？@avejidah我更新了我的代码。希望这能回答你的问题。我在所有单独的功能中使用POST in React来保存唱片集数据歌曲数据和图像数据，但它们都在同一个保存按钮功能中使用。好的，因为第二个选项没有那么混乱，你能告诉我在沙盒或其他东西中是什么样子吗？如果不是的话，我可以试着自己解决。只是重申一下，我可能会选择第一条路线。在我看来，我认为将API按照您拥有的方式进行分离是一种可行的方法。无论如何，使用第二种方法，每个专辑都会有如下结构：

{title:string，date:date，description:string，id:string//uuid，songs:Song[]，images:Image[]}

。服务器端，创建相册后，您只需迭代

歌曲

和

图像

，设置

相册id

，然后插入。好的，我想我会选择第一个选项。我会使用uuid将id保存到相册中，但如何检索它并为歌曲和图像相册设置id？我要指出的是，您的

/albums

API需要在创建相册后返回其id。您需要相册的id才能将歌曲/图像保存到相册中，因此请从API返回id。如何在“我的歌曲插入”中检索该id，还是在前端检索？

POST /albums HTTP/1.1
Content-Type: application/json

{
  "title": "Dillon",
  "date": "2020-01-01T00:00:00.000Z",
  "description": "An awesome political protest album."
}

{
  "title": "Dillon",
  "date": "2020-01-01T00:00:00.000Z",
  "description": "An awesome political protest album.",
  "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
}