# 2022-10-31--homework

**Repository Path**: carlos-sam/2022-10-31--homework

## Basic Information

- **Project Name**: 2022-10-31--homework
- **Description**: 前路漫漫亦灿灿，日日煎熬日日熬，往事堪堪亦澜澜。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-01
- **Last Updated**: 2022-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

日月光华，旦复旦兮。

## 作业一 豆瓣电影

### 1.列表页

![列表页](images/列表页.gif)

```vue
<template>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 电影卡片 -->
        <div class="card" v-for="(film,index) in films" :key="index" @click = "jump(film.title)">
            <!-- 电影卡片-封面 -->
            <div class="cover" >
                <img :src="film.pic" alt="皇帝的新图" >
            </div>
            <!-- 电影卡片-信息 -->
            <div class="inform">
                <!-- 电影名 -->
                <div class="title">{{film.title}}</div>
                <!-- 电影评分 -->
                <div class="grade">
                    <span>评分:{{valueTitle(film.raiting)}}</span>
                    <el-rate
                        v-model= "value"
                        disabled
            
                        text-color="#ff9900"
                    >
                    </el-rate>
                </div>
                <!-- 电影分类 -->
                <div class="sort" v-if="film.labels">{{film.labels[0]}}/{{film.labels[1]}}/{{film.labels[2]}}</div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router'

const $router = useRouter()
// 初始化数据
// 储存数据
const films = ref([])
onMounted(() => {
    axios.get('http://122.112.161.135:8000/films/top250').then(res => {
        // console.log(res);
        films.value = res.data.result

        films.value.forEach(film => {
            let count = film.raiting/2.
            film.raiting = count.toFixed(1)
        })

        // console.log(films.value[0].raiting);

    })
})



// 电影评分 el-rate中的评分是5分制,而请求到的数据是10分制,需要处理一下
const value = ref(3.7)

 const valueTitle = computed(()=> (rate)=>{
    let count = rate*2.
    return count.toFixed(1)
}) 


// 跳转到其他页面
function jump (name) {
    $router.push('/detail/'+name)
}

</script>

<style scoped>
/* 页面容器 */
.container {
    width: 500px;
    height: 100vh;
    /* background-color: pink; */
    margin: 0 auto;
}

/* 电影卡片 */
.container .card {
    display: flex;
    height: 150px;
    width: 100%;
    /* background-color: skyblue; */
    padding: 10px 30px;
    border: 1px solid rgb(243, 243, 243);
    /* box-shadow: 1px 1px 1px #888888; */
    box-sizing: border-box;
    cursor: pointer;
}

.container .card:hover {
    background-color: #f0eff0;
}

/* 电影卡片-封面 */
.container .card .cover {
    flex: 1;
    background-color: pink;
}

.card .cover img {
   height: 100%;
   width: 100%;
}
/* 电影卡片-信息 */
.container .card .inform {
    flex: 4;
    /* background-color: blueviolet; */
    padding-left: 10px;
}

/* 信息div个公共样式 */
.card .inform div {
    margin-bottom: 7px;
}

/* 电影名 */
.card .inform .title {
    color: #3d7bb2;
    font-weight: 600;
    font-size: 18px;
}

/* 电影评分 */
.card .inform .grade {
    /* color: #3d7bb2; */
    /* font-weight: 600; */
    font-size: 16px;
}

/* .inform .grade span {


} */

/* 电影分类 */
.card .inform .sort {
    color: #bab6ba;
    font-size: 14px;
}


</style>
```

### 2.详情页

![详情页](images/详情页.gif)

```vue
<template>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 顶部导航栏 -->
        <div class="nav" v-if="nav_show">
            <!-- <i class="el-icon-back"></i>
            <i class="el-icon-plus"></i> -->
            <div class="title">{{film.title}}</div>
        </div>
        <!-- 电影内容 -->
        <div class="content">
            <!-- 封面图 -->
            <div class="cover">
                <img :src="film.pic" alt="">
            </div>

            <!-- 口号 -->
            <div class="slogo">{{film.slogo}}</div>
        </div>
    </div>
</template>

<script setup>

import { onMounted, ref, computed ,onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios'
// import { Edit,Share } from "@element-plus/icons-vue"
const $route = useRoute()


const film = ref({})
onMounted(() => {
    // 第三步:使用$route.params.id拿到路由传递的id
    // console.log($route.params.name);
    axios.get('http://122.112.161.135:8000/movieDetail',{
        params:{
            title:$route.params.name
        }
        
    }).then(res => {
     
        film.value = res.data.result
        console.log(film.value);

    })
})


// 滚动显示
let nav_show = ref(false)


function handleScroll() {
    
  	  // 页面滑动的距离
      let scrollTop = document.documentElement.scrollTop
      console.log(scrollTop);
      // 当页面滑动的距离大于300px时元素显示，否则不显示
      if (scrollTop >= 30) {
        nav_show.value = true
      } else {
        nav_show.value = false
      }
    }

    onMounted (() => {
        window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(()=>{
        window.removeEventListener('scroll', handleScroll)
    })

</script>

<style scoped>
/* 页面容器 */
.container {
    width: 800px;
    height: 1000px;
    /* background-color: pink; */
    margin: 0 auto;

}

/* 顶部导航栏 */
.container .nav {
    display: flex;
    position:fixed;
    top: 0;
    left: 0;

    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: blueviolet;
    margin-bottom: 20px;
}

.container .nav .title {
    color: #fff;
}

/* 文章内容 */
.container .content {
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 500px;
    /* background-color: seagreen; */
    margin: 0 auto;
   
}

.container .content .cover {
    flex: 8;
    width: 100%;

    background-color: pink;
}

.content .cover img {
    width: 100%;
    height: 100%;
}

.container .content .slogo {
    flex: 1;
    width: 100%;

    /* background-color: skyblue; */

    text-align: center;
    line-height: 55px;
    font-size: 14px;
}
</style>
```

## 作业二 实现列表的滚动加载

![无限滚动](images/无限滚动.gif)

```vue
<template>
    <!-- 页面容器 -->
    <div class = "container">
        <!-- 标题 -->
        <div class="list-title">
           <span class="left">{{msg}}</span>
           <span class="right">(每日更新)</span>
        
        </div>

        <!-- 推荐列表 -->
        <div class="list-table">
            <table  v-infinite-scroll="load">
                <tr :class="index%2==1 ? 'even-row' : ''" v-for="(radio,index) in radios" :key="radio.id">
                    
                    <td>{{index+1}}</td>
                    <td>
                        <img :src="radio.coverImgUrl" alt="">
                        <span class="bookName" >{{radio.name}}</span>
                    </td>
                    <td>{{}}</td>
                    <td>播放{{}}</td>
                    <td>赞{{}}</td>
                    <td>
                        <span class="bookSort">{{radio.tags[0]}} {{radio.tags[1]}} {{radio.tags[2]}}</span>
                    </td>
                </tr>
            </table>
        </div>

        
    </div>
    

</template>

<script setup>
import { useRouter } from 'vue-router';
import axios from 'axios'
import { onMounted, ref } from 'vue';


const $router = useRouter()

// 测试
const msg = ref('每日推荐')

// 存储电台数据
const radios = ref([])

// 初始渲染
onMounted(() => {
    axios.get('http://122.112.161.135:3000/top/playlist?limit=20&offset=0').then(res => {
        // console.log(res);
        radios.value = res.data.playlists
        // console.log(radios.value[0].name);
        // console.log(radios.value[0].coverUrl);
    })
})

let limit = ref(20)
// 实现滚动加载
function load() {
    limit.value += 20
    axios.get(`http://122.112.161.135:3000/top/playlist?limit=${limit.value}&offset=0`).then(res => {
        // console.log(res);
        radios.value = res.data.playlists
        // console.log(radios.value[0].name);
        console.log(radios.value.length);
    })
}


</script>






<style scoped>
    /* 表格的初始化 */
    table,
      tr,
      th,
      td {
        /* 给表格添加边框 */
        border: 1px solid #ddd;
        /* 将表格的边框合并为一个单一的边框 */
        border-collapse: collapse;
        /* 设置相x邻单元格的边框间的距离（仅用于"边框分离"模式） */
        border-spacing: 0;
      }

    /* 页面容器 */
    .container {
        display:flex;
        flex-direction: column;
        width: 80vw;
        min-width: 1000px;
        /* height: 90vh; */
        /* background-color: pink; */
        margin: 20px auto;
        padding: 25px;
        /* border: 2px solid #666; */
        box-shadow: 3px 3px 5px #999;
    }

    /* 标题 */
    .container .list-title {
        height: 50px;
        width: 100%;
        /* background-color: pink; */
        border-bottom: 3px solid #c20c0c;
        line-height: 53px;
    }

   
    /* 标题的左半部分 */
    .container .list-title .left {
        font-size: 22px;
    }

    /* 标题的右半部分 */
    .container .list-title .right {
        margin-left: 5px;
        font-size: 12px;
        color: #b9b9ba;
    }





    /* 推荐列表 */
    .container .list-table {
        flex:1;
        width: 100%;
        /* background-color: blue; */
    }

    /* 推荐列表--表格 */
    .container .list-table table {
        width: 100%;
        /* 给表格设置最小宽度，使 */
        /* min-width: 1000px; */

    }

    /* 推荐列表--表格行 */
    .container .list-table tr {
        height: 100px;
    }

    /* 推荐列表--表格行--偶数行样式 */
    .even-row {
        background-color: #eee;
    }

    /* 推荐列表--表格行--hover样式 */
    .container .list-table tr:hover{
        background-color: #bfbfbf;
    }


    /* 推荐列表--表格单元格 */
    .container .list-table td {
        padding:5px 25px;
        font-size:12px;
        color: #747171;
        font-weight: 600;
    }

    /* 推荐列表--封面图 */
    .container .list-table img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        vertical-align: middle;
    }

    /* 推荐列表--电台名名 */
    .container .list-table .bookName {
        color: #333;
        cursor: pointer;
    }

    /* 推荐列表--分类 */
    .container .list-table .bookSort {
        border: 1px solid #333;
        padding: 0 3px;
    }

</style>
```