从服务器获取数据时挂载的钩子（Promise/async）出错

Question

我是 Vue 的新手，我有一个 WebPage 组件（电影歌曲列表），它从页面路由参数（通过 this.$store.state.route.params.movieId）接收movie_id，然后从中获取实际的用户歌曲数据使用命令在服务器上的数据库：this.movie = (await MoviesService.show(movieId)).data，show function 是通过 id 查找 db 中的参数并将内容发送回前端。

我的问题是，每当我点击查看按钮时，网站都会链接到带有基本框架的某个id页面，但它无法获取电影歌曲列表web页面中的内容。 错误演示postman 中的快照

控制台中显示的错误是：

[Vue 警告]：挂载钩子中的错误（Promise/async）：“错误：请求失败，状态代码 500”在 ---> at src/components/ViewMovie.vue at src/App.vue

ViewMovie.vue：

<template>
<panel title= "Movies theme song list">
      <div class="movie-title">
          {{movie.title}}
      </div>
      <div class="movie-artist">
          {{movie.artist}}
      </div>
      <div class="movie-album">
          {{movie.album}}
      </div>
      </panel>
</template>

<script>
import MoviesService from '@/services/MoviesService'
import Panel from '@/components/Panel'
export default {
  async mounted () {
    const movieId = this.$store.state.route.params.movieId
    this.movie = (await MoviesService.show(movieId)).data
  },
  data () {
    return {
      movie: {}
    }
  },
  components: {
    Panel
  }
}
</script>

电影控制器.js：

const {Movie} = require('../models')

module.exports = {
  async show (req, res) {
    try {
      const movie = await Movie.findById(req.params.movieId)
      res.send(movie)
    } catch (err) {
      res.status(500).send({
        error: 'An error has occured trying to fetch the movie'
      })
    }
  },
  async post (req, res) {
    try {
      const movie = await Movie.create(req.body)
      res.send(movie)
    } catch (err) {
      res.status(500).send({
        error: 'An error has occured trying to create the movie'
      })
    }
  }
}

电影服务.js：

import Api from '@/services/Api'

export default {
  index () {
    return Api().get('movies')
  },
  show (movieId) {
    return Api().get(`movies/${movieId}`)
  },
  post (movie) {
    return Api().post('movies', movie)
  }
}

Answer 1

我在数据库中看不到你的实际电影 object，所以我将部分假设为 go。

findById() 是您尝试查找电影的方式。 您的 ID 为 1。 FindById() 需要自动生成的 _id 字段中的数据。 _id 更像是5d8c369e69ccb034cc31b816

如果你改变：

await Movie.findById(req.params.movieId)

至

await Movie.findOne({ id: { $eq: req.params.movieId })

如果您的数据库 object 将这些字母大写，则将此处的 id 更改为 ID。

你得到了什么？ 任何改变？

可能值得展示带有整个电影数据库条目的原始 object 以查看其中的所有内容并在我走错路时提供进一步帮助...