使用 Axios Vue.js 和 Node.js 从 MongoDB 按 id 获取数据答案

【问题标题】：get data by id from MongoDB by using Axios Vue.js and Node.js使用 Axios Vue.js 和 Node.js 从 MongoDB 按 id 获取数据
【发布时间】：2020-09-27 06:25:09
【问题描述】：

我想从 mongoDB 数据库中获取数据，但不是从收集的所有数据中仅收集一个数据以在我的管理页面中更新它以管理我的产品页面，但是通过下面的代码我无法获取，这是 consol 中的错误

GET http://localhost:3000/products/5edbe6e824982635ac07e859 500 (NuxtServerError)

这是 Nuxt 项目中的前端代码，文件位于 ===> admin/pages/products/_id.vue

_id.vue

export default {
    async asyncData({$axios,params }) {
      try {

        let products= $axios.$get('http://localhost:8000/api/products,${params.id}');

        const [productsResponse] = await Promise.all([
           products
        ]);
        console.log(productsResponse);
        return {
          products:productsResponse.products
        };

      } catch (err) {
        console.log(err);
      }
    },


 data() {
      return {
        product:{
          cityID:null,
          categoryID:null,
          productname: '',
          cellphone: null,
          licensenumber: null,
          address: '',
          rating: null
        }

      };

还有关于放置数据的另一部分，但正如我所说，我在收集单个数据时遇到问题

很高兴我可以获取所有数据但无法获取单个数据我认为存在部分问题，包括 {params.id}

后端代码是

product.js

//GET request - get a single style
router.get("/product/:id", async (req, res) =>{
    try {
        let product = await Product.findOne({ _id:req.params.id});
        res.json({
            success:true,
            product:product
        });

    }catch (err) {
        res.status(500).json({
            success:false,
            message:err.message
        });

    }
});

【问题讨论】：

你试过了吗？ $axios.$get(`http://localhost:8000/api/products/${params.id}`);
@HongJian 你能给我一个你的意思的代码吗，你的意思是我使用你的代码没有** let product** = $axios ...
我的意思是将这行代码从 let products= $axios.$get('http://localhost:8000/api/products,${params.id}'); 更改为 let products= $axios.$get(`http://localhost:8000/api/products/${params.id}`);
@HongJian tahnks 关于它，再给一个错误你知道那是什么吗？===>[Vue 警告]：属性或方法“城市”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：vuejs.org/v2/guide/…。发现于
“未定义城市”。这意味着你在其他地方使用“城市”，但它是未定义的。您的帖子没有足够的信息来解决这个问题。你可以显示你的模板代码吗？或者这个vue组件的所有代码

标签： node.js vue.js axios nuxt.js

【解决方案1】：

根据 nuxt 文档。 asyncData 返回值将与数据值合并。比如异步数据返回项目，那么数据也应该返回项目

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}

尝试将您的数据更改为此。声明城市和类别的默认值

      data() {
        return {
          product:{
            cityID:null,
            categoryID:null,
            productname: '',
            cellphone: null,
            licensenumber: null,
            address: '',
            rating: null
          },
          cities: [],
          categories: []
        };
      },

您的 asyncData 返回值 {cities,categories,product}。但数据只返回值 {product}。由于数据默认没有城市值，所以模板开始渲染时城市是未定义的。

【讨论】：

我真的真的真的真的真的真的真的真的很感谢你