网易云音乐项目总结

网易云音乐项目知识点

品风 ₯ 未醉

2329人浏览 · 2022-02-28 21:55:01

品风 ₯ 未醉 · 2022-02-28 21:55:01 发布

不熟悉的知识点

知识点1：
rem的作用:rem适合于移动端适配和制作全屏效果，例如设计图的宽度与屏幕宽度进行适配。页面以及页面内容随屏幕宽度变化而变化。

如何设置rem:1rem的大小是等于html下的font-size，所以可以通过设置这个css属性告诉浏览器rem的大小

在哪里设置Rem.js： 一般在public文件夹下，擦黄健一个rem文件夹子，配置js文件
在这里插入图片描述

html{
	font-size:10px;//所以1rem=10px
}
.div{
	width:50rem;/*width:500px;*/
	height:50rem;/*height:500px;*/
}

例子如下：

// 这个文件的功能是做rem适配，是我们页面的大小可以随着窗口的大小变化自适应

function remSize(){
    // 首先获取窗口的大小
    let deviceWide=document.documentElement.clientWidth;

    // 如果窗口的大小,大于750px,则令其等于750
    if(deviceWide>750){
        deviceWide=750;
    }
    if(deviceWide<320){
        deviceWide=320;
    }
 
    // 通过设置根节点的fontSize来控制rem的大小，这里控制1rem=100px;
    document.documentElement.style.fontSize=(deviceWide/3.75)+"px";
    // 设置根节点的字体大小，这里设置为30px,注意我们这里的获取的是整数，所以要加上"rem"
    document.body.style.fontSize=0.16+"rem";
}

remSize();

// 当窗口大小再次变化时我们再次调整rem的大小
window.onresize=function(){
    remSize();
}

这里顺便介绍一下vw vh:
1，vw、vh 的含义
（1）vw、vh 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的，单位 1，代表类似于 1%。
视窗是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

（2）具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

知识点2： 同步异步函数,这个已经补充再js查漏补缺中了

知识点3： 如何获取屏幕的大小：

    // 首先获取窗口的大小,注意获取的是整数
    let deviceWide=document.documentElement.clientWidth;

    // 设置根节点的字体大小，这里设置为30px,注意我们这里的获取的是整数
    //所以要加上"rem"
    document.body.style.fontSize=0.3+"rem";

知识点4： 如何监视浏览器的大小变化

window.onresize=function(){}

知识点5： vue3中路由的变化，这部分知识点已经补充到快速上手vue3哪里

知识点6： 生命周期钩子onMounted与asncy，await实现请求后端数据

      // 使用生命周期钩子函数来发送axios请求
         onMounted(async()=>{
            let res=await axios.get("http://localhost:3000/banner?type=1");
            // 一定要记住在set中使用ref代理的数据是一定要使用.value
            arr.value=res.data.banners;
        })

知识点5： 获取本地图片的方法

        // 首先这里为什么使用ref代理数组,因为我要监视的是arr所保存的地址
         let arr=ref([
            //  要想获取图片的地址必须要使用require函数
             {pic:require("/前端开发学习/vue3 网易云项目/vue_test/src/assets/img/1.webp")},
             {pic:require("/前端开发学习/vue3 网易云项目/vue_test/src/assets/img/2.webp")},
             {pic:require("/前端开发学习/vue3 网易云项目/vue_test/src/assets/img/3.webp")}
         ])

知识点7： 为组件绑定原生事件的方法？因为vue3移除了.nativa,所以绑定原生事件可以直接v-on:click()

<swiper-slide v-for="item in gdlist " :key="item.id" v-on:click="toexact(item.id)">

知识点8： css控制显示的文本的多少
在这里插入图片描述

知识点9： 使用audios 显示控件

  <audio controls="controls"  :src="`https://music.163.com/song/media/outer/url?id=${store.state.tracks[0].id}.mp3 `"></audio>

知识点10： 控制同一个地方不同组件的显示可以使用v-if与v-else
在这里插入图片描述

知识点11： html标签 - marquee></marquee可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在marquee></marquee内部输入要滚动的内容即可

知识点12: vue中标签中内联样式的使用
1、直接在元素上通过：style的形式，书写样式对象

<h1 :style="{'color':'red','font-weight':200}">你会freestyle吗？</h1>

在这里插入图片描述

内联样式结合模版字面量的使用：

 <LYJ   :music="tracks[curindex]" :style="{'display':`${showbg?'none':'block'}`}" @click="changeshow"></LYJ>

**知识点13：**为标签绑定类的对象写法，其中的active是类名，通过boolean控制类是否生效
在这里插入图片描述

知识点14： 我们必须知道当父组件给子组件传递函数是两组件是公用一个函数

知识点15： 为什么需要使用async 来同步异步函数
在这里插入图片描述

知识点16： 如何在router中使用store?直接在router中导入store然后直接使用即可
在这里插入图片描述

知识点17: 为单个组件配置路由守卫时，直接在该组件的路由配置中加入beforeEnter即可
在这里插入图片描述

知识点18： 取消谷歌浏览器的自动填充
在这里插入图片描述

知识点19： 设置cookie值，浏览器set-cookie显示有内容，但没写入cookie（刷新没有cookie）
在这里插入图片描述

知识点20： 要善于利用我们的后台管理，network中可以看到我们发出的请求，以及服务器返回的信息，而qpplication中可以看到可以看到我浏览器做出的一些改变例如cookier,localStore问题

知识点21: 在这里插入图片描述

知识点22： 如何设置默认2级路由，将path设置为1级路由的跳转地址，然后将组件设置为你想要的默认组件即可
在这里插入图片描述
知识点23： 重定向：的意思是，当用户访问/a时，URL 将会被替换成/b，然后匹配路由为/b，又因为/是项目的跟路径所以，下面的可以设置默认路由

知识点：16
知识点：16
知识点：16
知识点：16
知识点：16
知识点：16

知识点：16
知识点：16
知识点：16
知识点：16
知识点：16
知识点：16
知识点：16

没见过的技术

技术1： 如何使用网易云的后端接口？
1：首先经项目下载到电脑本地
使用git 下载：
如果下面的地址不行，就直接取github找到http地址下载即可：

$ git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

$ npm install

2.使用node.js运行该项目：
可以将项目拉到vscode 中运行项目

$ node app.js

其他的按照官方文档即可使用

技术2： 使用阿里图标时css样式时没有那个颜色的，svg样式才会显示颜色

技术3： 在使用swiper是会发生不可避免的错误，原因是模版中引入的文件的地址发生了错误，具体如何修改这个错误看看收藏
首先如何解决这个错误？
错误如下：
在这里插入图片描述
具体为什么错？我们在导入下面的插件的时候路径发生了错误，所以导致vue无法找到相关的文件

如何修改这个错误？
我们打开node_modules文件夹，找到swiper文件夹，找到所有文件的正确路径即可