如何将MYSQL数据库中的数据作为数组检索？

Question

我有一个使用MySQL数据库的后端API，我试图从我的数据库中检索数据，并使用该数据来用google绘制地图上的纬度和经度。我正在与Nuxt一起使用Gmaps。

我试着用下面的代码来做这个，但是我遇到了一个错误，上面写着

“无法读取未定义的属性(读取‘坐标’)”

​

​

我试图用以下代码检索我的数据

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(),

然后我可以使用它来检索我的纬度和经度值，并将这些作为引脚绘制到我的地图上。

<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从我的数据库中检索数据，并将其传递到我的google地图中，以便在地图上显示点。

我期望地图上的点出现在我的数据库中的数据提供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

​

​

Answer 1

编辑

在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:我还建议您使用快捷键作为在这里展示。

getData是什么？将该函数放入export default {中的一个export default {中。

然后，使用asyncData()或fetch()钩子以Nuxt方式正确地获取数据，您可以在其中任何一个中调用this.getData。

在您的template中应用一个条件，以便您的模板中有一个后备(只需要fetch()的生命周期挂钩)。asyncData确实是呈现阻塞。

它可以是v-if="parkingPlaces.length"，不需要更多。

但不要两者叠加在同一时间。ESlint可以提醒你这一点。

这里是一个例子，我们使用$fetchState.pending来等待数据，然后再迭代数组。如果没有这个条件，模板将对空的内容进行迭代，并抛出您确实存在的错误。

实际上，template部分不够聪明，无法理解数据可能是异步的。因此，它会遇到一种sync方法。使用一个条件就足以让它意识到某个东西可能是空的(因为没有完全异步获取)。

有关如何在Nuxt中获取数据的更多信息，请参见：https://nuxtjs.org/docs/features/data-fetching#the-fetch-hook