从我的数据库中提取数据并将其填充 (ById) 到我的 Vue 视图（使用 Axios）时出现问题。后端是 Node/Express

Question

我通过控制台知道路由将它指向正确的 ID 号，但它抛出 404，我不确定连接哪里坏了。

PrizesById 本质上是另一个保存名为 Prizes 数据的路由的副本。我不确定重新创建两个不同的地方来提取相同的数据是否是一种方法，因为我找不到 prizes 的方法。两者的要求相同。

这是我的示例 prizesbyid.js（在路线中）：

  const express = require('express');
  const router = express.Router();

  router.get('/', (req, res) => {
    res.send({
        "prizesbyid": [{
                id: 1,
                name: "Cordoba C5",
                description: "The Cordoba C5 Classical Guitar is perfect for any aspiring classical guitarist or steel-string/electric wizard looking to take a walk on the wild nylon-string side. The solid cedar top produces amazingly rich tone while the wide string placement, easy string tension, and low action make it a breeze to play.",
                image_url: "../assets/c5Cor.jpg",
                quantity: 5
            },
            {
                id: 2,
                name: "Merano MC400 Cello",
                description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
                image_url: "",
                quantity: 3
            },
            {
                id: 3,
                name: "Guarnerius del Gesu",
                description: "A repreduction of the most expensive violin in the world, selling for an estimated million. The owner of the original anonymously donated the historic instrument to violinist Anne Akiko Meyers, on loan for the rest of her life.",
                image_url: "",
                quantity: 7
            }
        ]
    })
  })

  module.exports = router;

我通过我的 app.js 像这样要求它：

const prizesByIdRouter = require('./routes/prizesbyid');
app.use('/prizesbyid', prizesByIdRouter);

而前端axios调用是：

getPrizeById () {
  axios.get('http://localhost:3000/prizebyid/' + this.prizeId).then(response => {
    this.prize = response.data.prize
  })
}

Answer 1

如果将所有内容重命名为 /prizes 路线，实际上会更容易。在您的 prizes.js 路线中：

const express = require('express');
const router = express.Router();

const prizes = [...];  // Extracted all data outside of the routes

router.get("/:id?", (req, res) => {
    if (req.params.id !== undefined) {
        // Send one by id
        const result = prizes.find(prize => prize.id === +req.params.id);
        res.status(200).send(result);
    } else {
        // Send all
        res.status(200).send(prizes);
    }
});

module.exports = router;

在你的app.js中：

const prizesRouter = require('./routes/prizes');
app.use('/prizes', prizesRouter);

路由允许可选的 ID 参数。如果通过，路由将在数据中查找 ID 并发回相应的结果。如果不传ID，路由会传回所有数据。

从我的数据库中提取数据并将其填充 (ById) 到我的 Vue 视图（使用 Axios）时出现问题。后端是 Node/Express

Having issues pulling data from my database and populating it (ById) onto the my Vue view (using Axios). Backend is Node/Express

node.js

express

vue.js

axios

express-router