vue/cli的学习六 数据请求和列表渲染

1:新建一个model文件夹 这里用来做数据的接口请求

2:新建一个axios.js  配置axios

import  axios from  "axios";
//这里可以做很多配置
//请求的拦截
//响应的拦截

export  default  axios;

3:新建一个和业务相关的js 名称为homeModel.js里面写入  注意导入和导出  以及参数的配置

import  axios from  "./axios.js";

let  homeInfo={
    nowPlayingList: ()=>{
        return   axios({
            url:"https://m.maizuo.com/gateway",
            method:"get",
            params:{
                cityId:110100,
                pageNum:1,
                pageSize:10,
                type:1,
                k:4312482
            },
            headers:{
                "X-Host": "mall.film-ticket.film.list"
            }
        })

    }

};
export   default  homeInfo;

4:在需要使用的页面引入  控制台里面就可以看到数据的输出

import  homeInfo  from  "../../model/homeModel"
export default {
    data(){
        return {
            films:[],//电影列表的集合
        }
    },
    created(){
        homeInfo.nowPlayingList().then(res=>{
            console.log(res);//res.data.data.films  
        })
    }
}

5:把数据渲染到页面  先画静态效果  在渲染

  <div class="item" v-for="item  in  films" :key="item.filmId">
           <div class="item-img">
               <img :src="item.poster">
           </div>
           <div class="item-content">
               <p >{{item.name}} {{item.item.name}}</p>
                <p v-if="item.grade">观众评分{{item.grade}}</p>
                <p v-else>
                   
                </p>
                 <p>主演:{{item.actors|filterActors}}</p>
                  <p>{{item.nation}}|{{item.runtime}}</p>
           </div>
           <div class="item-btn">
               <button>购票</button>
           </div>
       </div>

6:特殊的数据处理  比如演员  返回是一个集合  可以使用filters

filters:{
        filterActors(list){
            //取出集合中每个对象的名称
            return  list.map(item=>item.name).join(" ");

        }
    }

7:评分特殊处理

 <p v-if="item.grade">观众评分{{item.grade}}</p>
                <p v-else>
                   
                </p>