axios 如何从MYSQL数据库中检索数据作为数组？

我有一个使用MySQL数据库的后端API，我试图从我的数据库中检索数据，并使用数据在Map上使用谷歌MapAPI绘制纬度和经度。
我已经尝试过用下面的代码来完成这个任务，但是我遇到了一个错误，它显示
"无法读取未定义的属性（读取'coordinates'）"

我正在尝试用下面的代码检索我的数据

async function getData(){
  const {data} = await this.$axios.$get('http://localhost:8000/api/parkingPlace');
  console.log(data)
  return {data}
}

然后将这些数据传递到我的Gmaps中。

export default {
  data() {
    return {
      currentLocation: {},
      circleOptions: {},
      parkingPlaces: getData(),

然后我可以用它来检索纬度和经度的值，并将这些值作为大头针标绘到我的Map上。

<template>
  <div class="min-h-screen relative max-6/6" >
    <GMap class="absolute inset-0 h-100% bg-blue-400"
      ref="gMap"
      language="en"
      :cluster="{options: {styles: clusterStyle}}"
      :center="{lat:parkingPlaces[0].coordinates.lat, lng: parkingPlaces[0].coordinates.lng}"
      :options="{fullscreenControl: false, styles: mapStyle}"
      :zoom="5">

      <GMapMarker
        v-for="location in parkingPlaces"
        :key="location.id"
        :position="{lat: location.coordinates.lat, lng: location.coordinates.lng}"
        :options="{icon: location.free_spots > 0 ? pins.spacefree : pins.spacenotfree}"
        @click="currentLocation = location"
      >
        <GMapInfoWindow :options="{maxWidth: 200}">
          <code>
            lat: {{ location.coordinates.lat }},
            lng: {{ location.coordinates.lng }}
          </code>
        </GMapInfoWindow>
      </GMapMarker>
      <GMapCircle :options="circleOptions"/>
    </GMap>
  </div>
</template>

我的整个index.vue类都低于我正在尝试做的事情。

<template>
  <div class="min-h-screen relative max-6/6" >
    <GMap class="absolute inset-0 h-100% bg-blue-400"
      ref="gMap"
      language="en"
      :cluster="{options: {styles: clusterStyle}}"
      :center="{lat:parkingPlaces[0].coordinates.lat, lng: parkingPlaces[0].coordinates.lng}"
      :options="{fullscreenControl: false, styles: mapStyle}"
      :zoom="5">

      <GMapMarker
        v-for="location in parkingPlaces"
        :key="location.id"
        :position="{lat: location.coordinates.lat, lng: location.coordinates.lng}"
        :options="{icon: location.free_spots > 0 ? pins.spacefree : pins.spacenotfree}"
        @click="currentLocation = location"
      >
        <GMapInfoWindow :options="{maxWidth: 200}">
          <code>
            lat: {{ location.coordinates.lat }},
            lng: {{ location.coordinates.lng }}
          </code>
        </GMapInfoWindow>
      </GMapMarker>
      <GMapCircle :options="circleOptions"/>
    </GMap>
  </div>
</template>

<script>
async function getData(){
  const {data} = await this.$axios.$get('http://localhost:8000/api/parkingPlace');
  console.log(data)
  return {data}

export default {
  data() {
    return {
      currentLocation: {},
      circleOptions: {},

      parkingPlaces: getData(),

      // parkingPlaces: [
      //   {
      //     "id": 1,
      //     "name": "Chandler Larson",
      //     "post": "37757",
      //     "coordinates": {
      //       "lng": -51.84,
      //       "lat": -60.02
      //     },
      //     "total_spots": 0,
      //     "free_spots": 0
      //   }
      // ],

      pins: {
        spacefree: "/parkingicongreen3.png",
        spacenotfree: "/parkingiconred3.png",
      },
      mapStyle: [],
      clusterStyle: [
        {
          url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
          width: 56,
          height: 56,
          textColor: "#fff"
        }
      ]
    }
  }
}
</script>

我曾尝试使用Axios从我的数据库中检索数据，并将此传递到我的谷歌Map中，以在Map上显示点。
我期望点出现在我的Map上，我的数据库中的数据给出了lat和lng。
编辑1：
我现在已经编辑了一些代码，以反映@kissu建议的更改。

<template v-if="parkingPlaces.length > 0">
  <div class="min-h-screen relative max-6/6" >
    <GMap class="absolute inset-0 h-100% bg-blue-400"
      ref="gMap"
      language="en"
      :cluster="{options: {styles: clusterStyle}}"
      :center="{lat:this.parkingPlaces[0].coordinates.lat, lng: this.parkingPlaces[0].coordinates.lng}"
      :options="{fullscreenControl: false, styles: mapStyle}"
      :zoom="5">

      <GMapMarker
        v-for="location in parkingPlaces"
        :key="location.id"
        :position="{lat: location.coordinates.lat, lng: location.coordinates.lng}"
        :options="{icon: location.free_spots > 0 ? pins.spacefree : pins.spacenotfree}"
        @click="currentLocation = location"
      >
        <GMapInfoWindow :options="{maxWidth: 200}">
          <code>
            lat: {{ location.coordinates.lat }},
            lng: {{ location.coordinates.lng }}
          </code>
        </GMapInfoWindow>
      </GMapMarker>
      <GMapCircle :options="circleOptions"/>
    </GMap>
  </div>
</template>

<script>

// async function getData(){
//   const {data} = await this.$axios.$get('http://localhost:8000/api/parkingPlace');
//   console.log(data)
//   return {data}
// }

export default {

  data() {
    return {
      currentLocation: {},
      circleOptions: {},
      parkingPlaces: [],

      // parkingPlaces: [
      //   {
      //     "id": 1,
      //     "name": "Chandler Larson",
      //     "post": "37757",
      //     "coordinates": {
      //       "lng": -51.84,
      //       "lat": -60.02
      //     },
      //     "total_spots": 0,
      //     "free_spots": 0
      //   }
      // ],

      pins: {
        spacefree: "/parkingicongreen3.png",
        spacenotfree: "/parkingiconred3.png",
      },
      mapStyle: [],
      clusterStyle: [
        {
          url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
          width: 56,
          height: 56,
          textColor: "#fff"
        }
      ]
    }
  },

  async fetch(){
    this.parkingPlaces = await fetch('http://localhost:8000/api/parkingPlace').then(res => res.json())
    console.log(this.parkingPlaces)
  }

}

</script>

我的console.log(this.parkingPlaces)结果

编辑2

编辑

在this.parkingPlaces的末尾有一个对象，如console.log所示。
您需要以下代码来访问实际数据（作为可迭代数组）。

async fetch() {
  const response = await fetch('http://localhost:8000/api/parkingPlace')
  const json = await response.json()
  this.parkingPlaces = json.data
  console.log(this.parkingPlaces)
}

PS：我还建议您使用this.$axios.$get快捷方式作为showcased here。
什么是getData？把这个函数放到你的export default {中的methods中。
然后，使用asyncData()或fetch()钩子以Nuxt方式正确获取数据，您可以在其中任何一个钩子内调用this.getData。
在你的template中应用一个条件，这样你就可以在你的模板中有一个后备（只有fetch()的生命周期钩子需要）。asyncData确实是渲染阻塞。
它可以是v-if="parkingPlaces.length"，不需要更多。
但是不要同时堆叠这两个，ESlint可以警告你这一点。
这里是an example，这里我们用$fetchState.pending来等待，直到我们有了数据，然后再迭代数组，如果没有这个条件，模板会迭代到空的东西，然后抛出错误。
实际上，template部分不够聪明，无法理解数据可能是异步的。因此，它运行到sync方法中。使用条件语句足以使它意识到某些数据可能是空的（因为不是完全异步获取的）。
有关如何在Nuxt中获取数据的更多信息，请访问：https://nuxtjs.org/docs/features/data-fetching#the-fetch-hook

axios 如何从MYSQL数据库中检索数据作为数组？

1条答案

编辑

相关问题

热门标签

最新问答