• Vue3+node.js网易云音乐实战项目(三)

    页面

    一、头部导航栏布局

    image-20220613085300007

    首先我们看最上面这里的布局，大致可分为三个模块，顶部左边，顶部中间，顶部右边

    那么我们在component创建一下子组件，命名为topNav.vue

    image-20220613091653753

    为了让这个整体好看一点，我在 App.vue 这加了一点整体的样式

      *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑";
  }

  // 渐变背景色
  html{
     background:linear-gradient(top,rgb(232,235,242),rgb(255,255,255)) no-repeat ;
     background:-webkit-linear-gradient(top,rgb(232,235,242),rgb(255,255,255)) no-repeat;
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    先把基础的东西填进去然后在调整样式

    image-20220613091746009

    看看效果

    image-20220613091803098

    很明显现在的图标很大，我们先调整图片的大小

    .icon{
      width: 0.4rem;
      height: 0.4rem ;
}

    • 1
    • 2
    • 3
    • 4

    image-20220613092005496

    然后我们在利用flex布局让它从两端对齐，并设置边距，让它看起来好看一点

        .topNav{
        width: 7.5rem;
        height: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.2rem;
	}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    image-20220613092137723

    最后调整一下中间的文字，平均分布

        .topCenter{
      width: 4.5rem;
      display: flex;
      justify-content: space-around;
    }

    • 1
    • 2
    • 3
    • 4
    • 5

    image-20220613092420073

    然后我们在修它的选中状态 active 变粗

     <!-- 修改成active -->
<!-- 顶部中间 -->
    <div class="topCenter">
      <span class="navBtn">我的</span>
      <span class="navBtn active" >发现</span>
      <span class="navBtn">云村</span>
      <span class="navBtn">视频</span>
    </div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
        .topCenter{
      width: 4.5rem;
      display: flex;
      justify-content: space-around;
      .active{
        font-weight: 900;
      }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    image-20220613093318757

    整体代码 topNav.vue

    <template>
  <div class="topNav">
          <!-- 顶部左边 -->
    <div class="topLeft">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao2"></use>
      </svg>
    </div>
    <!-- 顶部中间 -->
    <div class="topCenter">
      <span class="navBtn">我的</span>
      <span class="navBtn active" >发现</span>
      <span class="navBtn">云村</span>
      <span class="navBtn">视频</span>
    </div>
    <!-- 顶部右边 -->
    <div class="topRight">
         <svg class="icon search_img" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
  </div>
</template>

<style lang="less" scoped>
    .topNav{
    width: 7.5rem;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
    .icon{
      width: 0.4rem;
      height: 0.4rem ;
    }
    
    .topCenter{
      width: 4.5rem;
      display: flex;
      justify-content: space-around;
      .active{
        font-weight: 900;
      }
    }
  }
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    二、轮播图的实现

    实现了顶部之后，我们现在来实现轮播图，轮播图这里我就偷个懒，利用vant去实现。

    vue3 npm 安装

    # Vue 3 项目，安装最新版 Vant
npm i vant

    • 1
    • 2

    文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

    我们在main.js中引用vant

    import { createApp } from 'vue'
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/index.css';

createApp(App).use(Swipe).use(SwipeItem).mount('#app')

    • 1
    • 2
    • 3
    • 4
    • 5

    我们同样在components创建一个swipe.vue子组件，然后在HomeView.vue中注册一下

    image-20220613111700356

    在swipe.vue，我们使用vant官方的例子，利用懒加载的方式做轮播图(这里的图片我放在了assets下，需要自己创建一个img文件夹放图片)

    <template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
        </van-swipe-item>
    </van-swipe>
</template>

<script>

export default {
 setup() {
    const images = [
        require('@/assets/img/1.jpg'),
        require('@/assets/img/2.jpeg'),
        require('@/assets/img/3.jpeg'),
        require('@/assets/img/4.png'),
    ];
    return { images };
  },
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    效果

    354633442

    ​ 现在来调整一下样式，使图片的宽度适中

    <style>
.van-swipe{
    width: 7rem;
    height: 2.7rem;
    margin:0 auto;
    border-radius: 0.3rem;
    border: red 1px solid;
        /* 使下面的点变成红色 */
     --van-swipe-indicator-active-background-color:rgb(255, 61, 61);
}
.van-swipe-item img{
    width: 100%;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    效果

    354633444

    这里是红边框可以去掉，只是拿来做演示用

    三、请求网易的banner图

    完成了轮播图的效果，我们请求一下api，这里安装一下axios

    npm install axios

    • 1

    然后我们在src创建一个专门api文件夹

    image-20220614161740459

    里面发送一下请求，由于接口文档已经说明了这一条，所以大家在编写axios请求时注意一下，文档所有接口都可以使用get请求，但为了真实一点，我使用了post请求

    image-20220614161931603

    import axios from 'axios'

// 请求banner
 function postBanner(type1){
   return  axios.post(`http://localhost:3000/banner?type=${type1}`).then((res)=>{
       return res.data.banners ;
    })
}

export {postBanner}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    ​ 然后我们来到我们的swipe.vue界面，请求一下数据并渲染到页面上

    ​ 这里说明一下banner接口请求出来的数据均为对象类型数据

    ​ image-20220614164643402

    ​ 这里有三种方法 1、ref存储数据 2、reactive([])存储数据（不太推荐） 3、reactive([])嵌套一个对象去存储（推荐）

    1. ref存储数据

      <template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(image,index) in images" :key="index">
            <img :src="image.pic" />
        </van-swipe-item>
    </van-swipe>
</template>

<script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'

export default {
   setup() {
        let  images = ref([])
        onMounted(async()=>{
            getSwipeAPI()
        })
       async function getSwipeAPI(){
          images.value = await postBanner(1)
        }
        console.log(images);
    return { images };
  }, 
}
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26

    2. reactive([])嵌套一个对象去存储（推荐）

    <template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(image,index) in images2.list" :key="index">
            <img :src="image.pic" />
        </van-swipe-item>
    </van-swipe>
</template>

<script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'

export default {
   setup() {
        let images2 = reactive({
            list:[]
        })
        onMounted(async()=>{
            getSwipeAPI()
        })
       async function getSwipeAPI(){
          images2.list = await postBanner(1)
        }
    return {images2};
  },
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    1. reactive([])通过push存储(不推荐)
    <template>
<div v-for="(image,index1) in images3" :key="index1">
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(i,index) in image" :key="index">
            <img :src="i" />
        </van-swipe-item>
    </van-swipe>
</div>
</template>

<script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'

export default {
   setup() {
        let images3 = reactive([])
        onMounted(async()=>{
            getSwipeAPI()
        })
       async function getSwipeAPI(){
          let x = await postBanner(1)
            x = x.map(v=>v.pic)
          images3.push(x)
        }
        console.log(images3);
    return {images3};
  },
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    效果

    3546334442

    四 链接

    Vue3+node.js网易云音乐实战项目(一)： https://blog.csdn.net/NITIQ/article/details/125358363?spm=1001.2014.3001.5501
    Vue3+node.js实战项目网易云音乐APP（二）: https://blog.csdn.net/NITIQ/article/details/125358401?spm=1001.2014.3001.5502
    Vue3+node.js网易云音乐实战项目(三): https://blog.csdn.net/NITIQ/article/details/125358446?spm=1001.2014.3001.5502
    Vue3+node.js网易云音乐实战项目(四)： https://blog.csdn.net/NITIQ/article/details/125358476?spm=1001.2014.3001.5502

    未完…

    未完…

  • 相关阅读:
    程序员VS产品经理的世纪之争
    清算、结算、南北卡支付行业概念一次说清
    【数据结构】手撕单链表
    听说你java基础很好？这些能答对几个？附上最全java必学知识点
    为了入职蚂蚁金服，鬼知道我经历了什么.. 蚂蚁金服架构师面经
    书生·浦语大模型实战营第二期作业六
    Java 变量作用域、构造方法官方教程
    MyBatis练习3
    Python 爬虫实战之爬淘宝商品并做数据分析
    windows下gvim的配置
  • 原文地址：https://blog.csdn.net/NITIQ/article/details/125358446