2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式

原创

已于 2022-10-27 16:32:40 修改 · 500 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #axios

于 2021-12-05 22:04:52 首次发布

本文介绍如何在Vue移动端应用中，通过点击电影跳转至Detail.vue详情页面，并自动拼接电影ID。在Detail.vue中，利用axios获取后台数据，包括设置axios的URL、headers和发起请求。接着展示如何利用获取的数据为详情页面设置样式。

1.带着id传到详情页面中

效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId

http://localhost:8081/#/Detail/6112
http://localhost:8081/#/Detail/6105
等等

代码

nowPlaying.vue

  <template>
  <div>
      <ul>
        <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)">
          <!-- 获取电影海报 -->
          <img :src="data.poster" alt="">
          <!-- 获取电影标题 -->
          <h3>{
  
  {data.name}}</h3>
          <!-- 获取观众评分 -->
          <p>观众评分{
  
  {data.grade}}</p>
          <!-- 获取导演和主演信息:此处要处理一下数组data.actors(过滤) -->
          <p>{
  
  {data.actors | actorfilter}}</p>
        </li>
  </ul>
  </div>

</template>
<script>
import axios from "axios"
// 注册过滤器需要用到Vue,所以引入vue:在哪使用就在哪引入
import Vue from "vue"
Vue.filter('actorfilter',function(data){
     
     
    //回顾map的用法:
    // console.log([0,1,2].map(item=>`我是第${item+1}名`));
    // 处理da