Question

我有一个带有Story模型的基本CRUD rails 5.2 API。我正在构建一个Vuejs前端来使用它。当前，/ stories处的索引视图已成功从服务器提取数据。我还可以通过Story / new上的NewStory.vue将故事添加到数据库中。我现在正尝试在stories /：id的页面上显示一个故事。 api服务器当前在v1 / stories /：id上显示我需要的单个结果。

这是我在services / Api.js中拥有的东西：

import axios from 'axios'

export default() => {
  return axios.create({
    baseURL: `http://localhost:3000/v1`
  })
}

在StoriesService.js中：

import Api from '@/services/Api'

export default {
  fetchStories () {
    return Api().get('stories')
  },

  addStory (params) {
    return Api().post('stories', params)
  },

  getStory (params) {
    return Api().get('/stories/1')
  }
}

在ViewStory.vue中：

<template>
  <div class="stories">
    <h1>Story</h1>
    <div v-if="story" class="table-wrap">
      <div>
        <router-link v-bind:to="{ name: 'NewStory' }" class="">Add 
Story</router-link>
      </div>
      <p>Title: {{story.attributes.title}}</p>
      <p>Overview: {{story.attributes.description}}</p>
    </div>
    <div v-else>
       The story with id:{{params}} does not exist <br><br>
       <!-- <router-link v-bind:to="{ name: 'NewStory' }" 
class="add_story_link">Add Story</router-link> -->
    </div>
  </div>
</template>

<script>
import StoriesService from '@/services/StoriesService'
export default {
  name: 'story',
  data () {
    return {
      title: '',
      description: ''
    }
  },
  mounted () {
    this.getStory()
  },
  methods: {
    async getStory (params) {
      const response = await StoriesService.getStory(params)
      this.story = response.data
      console.log(this.story)
    }
  }
}

</script>

使用硬编码的记录ID，在“网络”标签中，我看到了对api的请求并检索到正确的记录。

但是，如果我将getStory调用更改为return Api().get('/stories/', params)，则会收到304响应，并且无法检索数据。

我的问题是如何获取StoriesService.js以返回localhost：3000 / v1 / stories / params.id，其中params.id是URL中引用的故事的ID。

Answer 1

当前您没有将任何参数传递给getStory，因此您需要从this.$route.params中获取它们

async getStory () {
  const response = await StoriesService.getStory(this.$route.params)
  this.story = response.data
  console.log(this.story)
}

此外，axios仅支持查询字符串参数，因此，如果您的网址看起来像/ stories / someId，那么您需要自己在getStory中进行构建：

getStory (params) {
   return Api().get(`/stories/${params.id}`)
}

此外，您的数据对象缺少story属性：

data () {
  return {
    story: null,
    title: '',
    description: ''
  }
},

如何使用Vue和axios检索和显示单个记录

1 个答案: