使用Axios Vue.js和Node.js从MongoDB按id获取数据
我想从mongoDB数据库中获取数据，但不是从集合中获取所有数据。只有一个数据要在我的管理页面中更新，以管理我的产品页面，但下面的代码我无法获取，这是Console中的错误使用Axios Vue.js和Node.js从MongoDB按id获取数据,node.js,vue.js,axios,nuxt.js,Node.js,Vue.js,Axios,Nuxt.js,我想从mongoDB数据库中获取数据，但不是从集合中获取所有数据。只有一个数据要在我的管理页面中更新，以管理我的产品页面，但下面的代码我无法获取，这是Console中的错误 GET http://localhost:3000/products/5edbe6e824982635ac07e859 500 (NuxtServerError) 这是Nuxt项目中的前端代码，文件位于==>admin/pages/products/_id.vue中 _id.vue export default {
GET http://localhost:3000/products/5edbe6e824982635ac07e859 500 (NuxtServerError)
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
}
};
//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
});
}
});
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "cities" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/products/Id.vue> at pages/products/_id.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "categories" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/products/Id.vue> at pages/products/_id.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
vue.runtime.esm.js？2b0e:619[vue warn]：属性或方法“cities”未在实例上定义，而是在渲染期间引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
发现于
--->在第/products/_id.vue页
在layouts/default.vue处
vue.runtime.esm.js？2b0e:619[vue warn]：属性或方法“categories”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
发现于
--->在第/products/_id.vue页
在layouts/default.vue处
<template>
<div>
<b-container>
<b-row class="background-add">
<b-col>
<!-- title-->
<b-row>
<b-col cols="12">
<div>
<p class="title-add-page">
Update{{product.productname}}
</p>
</div>
</b-col>
</b-row>
<!-- city-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<div>
<b-form-select
v-model="product.cityID">
<option
v-for="city in cities"
:value="city._id"
:key="city._id"
>
{{city.type}}
</option>
</b-form-select>
</div>
</b-col>
</b-row>
<!-- district-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<div>
<b-form-select v-model="product.categoryID">
<option
v-for="category in categories"
:value="category._id"
:key="category._id"
>
{{category.type}}
</option>
</b-form-select>
</div>
</b-col>
</b-row>
<!-- product Name-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
type="text"
class="inputs-login"
v-model="product.productname"
placeholder="productName"
>
</b-form-input>
</b-col>
</b-row>
<!-- Cellphone-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
type="tel"
class="inputs-login"
v-model="product.cellphone"
placeholder="Cellphone"
>
</b-form-input>
</b-col>
</b-row>
<!-- License Number-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
class="inputs-login"
v-model="product.licensenumber"
placeholder="License Number"
>
</b-form-input>
</b-col>
</b-row>
<!-- Address-->
<b-row align-h="center" class="row-select-address">
<b-col cols="12" md="7">
<b-form-input
type="text"
class="inputs-login"
v-model="product.address"
placeholder="Address"
>
</b-form-input>
</b-col>
</b-row>
<!-- License Number-->
<b-row align-h="center" class="row-select">
<b-col cols="12" md="7">
<b-form-input
type="text"
class="inputs-login"
v-model="product.rating"
placeholder="Rating"
>
</b-form-input>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="12" md="7">
<b-button block type="submit" variant="outline-success"
click="onUpdateProduct">Add</b-button>
</b-col>
</b-row>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import axios from "axios";
export default {
async asyncData({$axios,params }) {
try {
let cities = $axios.$get('http://localhost:8000/api/cities');
let categories = $axios.$get('http://localhost:8000/api/categories');
let product= $axios.$get('http://localhost:8000/api/product/${params.id}');
const [cityResponse, catResponse,productResponse] = await Promise.all([
cities,
categories,
product
]);
console.log(productResponse);
return {
cities: cityResponse.cities,
categories: catResponse.categories,
product:productResponse.product
};
} catch (err) {
console.log(err);
}
},
data() {
return {
product:{
cityID:null,
categoryID:null,
productname: '',
cellphone: null,
licensenumber: null,
address: '',
rating: null
},
};
},
methods:{
onUpdatePrpduct(){
let newproduct = {
cityID: this.product.cityID,
categoryID: this.product.categoryID,
productname: this.product.productname,
cellphone: this.product.cellphone,
licensenumber: this.product.licensenumber,
address: this.product.address,
rating: this.product.rating,
}
console.log(newProduct)
axios.post('http://localhost:8000/api/product', newProduct)
.then(( response) => {
console.log(response);
})
.catch((error) =>{
console.log(error);
});
}
}
}
</script>
更新{{product.productname}
{{city.type}
{{category.type}
添加
从“axios”导入axios；
导出默认值{
异步数据（{$axios，params}）{
试一试{
let cities=$axios.$get（'http://localhost:8000/api/cities');
let categories=$axios.$get（'http://localhost:8000/api/categories');
让产品=$axios.$get（'http://localhost:8000/api/product/${params.id}'）；
const[cityResponse，catResponse，productResponse]=等待承诺。全部([
城市，
类别，
产品
]);
console.log（productResponse）；
返回{
城市：城市响应，
类别：catResponse.categories，
产品：productResponse.product
};
}捕捉（错误）{
控制台日志（err）；
}
},
数据（）{
返回{
产品：{
cityID:null，
categoryID:null，
产品名称：“”，
手机：空，
许可证号码：空，
地址：''，
评级：空
},
};
},
方法：{
onUpdatePrpduct（）{
设newproduct={
cityID:this.product.cityID，
categoryID:this.product.categoryID，
productname:this.product.productname，
手机：这个。产品。手机，
licensenumber:this.product.licensenumber，
地址：this.product.address，
评级：本产品评级，
}
console.log（新产品）
轴心柱http://localhost:8000/api/product，新产品）
。然后（（响应）=>{
控制台日志（响应）；
})
.catch（（错误）=>{
console.log（错误）；
});
}
}
}
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返回值{城市、类别、产品}。但是数据只返回值{product}。默认情况下，数据没有城市值，所以在模板开始渲染时城市是未定义的。您尝试过这个吗<代码>$axios.$get(`http://localhost:8000/api/products/${params.id}`）@HongJian你能给我一个你的意思是，你的意思是我使用你的代码时没有**let product**=$axios…我的意思是将这行代码从
let products=$axios.$get（$get）改成http://localhost:8000/api/products，${params.id}'）到让产品=$axios.$get(`http://localhost:8000/api/p