从我的数据库中提取数据并将其填充(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

问题描述

我从控制台知道路由将其指向正确的ID号，但它会抛出404，并且我不确定连接在哪里变坏.

I know by the console that the route is pointing it to the correct Id number, but it's throwing a 404 and I'm not sure where the connection is going bad.

PrizesById本质上是另一个保存有称为Prizes的数据的路由的副本.我不确定是否重新创建两个单独的位置来提取相同的数据是否可以做到这一点，因为我找不到用于prizes的方法.两者都是以相同的方式要求的.

PrizesById is essentially a duplicate of another route holding data called Prizes. I wasn't sure if recreating two separate places to pull identical data would be a way to do this, as I couldn't find a way to do it for prizes. Both are required the same way.

这是我的awardsbyid.js(在路线中)的示例:

This is a sample of my prizesbyid.js (in routes):

  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 $16million. 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像这样:

I'm requiring it through my app.js like this:

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

前端axios调用是:

And the front end axios call is:

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

推荐答案

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

It's actually easier if you rename everything to the /prizes route. In your prizes.js routes:

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中:

In your app.js:

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

该路由允许使用可选的ID参数.如果通过，则路由将在数据中找到ID，并发送回适当的结果.如果未传递ID，则路由将传回所有数据.

The route allows for an optional ID parameter. If it's passed, the route will find the ID in the data and send back the appropriate result. If no ID is passed, the route will pass back all data.

这篇关于从我的数据库中提取数据并将其填充(ById)到我的Vue视图(使用Axios)时遇到问题.后端是Node/Express的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！