一，项目背景

本次项目实现的是老板本的网易云音乐，主要主要技术点都有Vue实现路由跳转，axios前后端交互

二，项目展示与功能拆分讲解

一，首页

这一张图片是首页主要就是排版和数据请求

一，路由

在vue3组合式aip中使用router-link和在vue2选项式写法是一样的没什么区别

二，请求数据

使用axios发请求和es6模块化的按需引入

一，安装

安装（如已安装请忽略）axios然后在发请求的界面导入axios

npm安装

npm i axios

yarn安装

yarn add axios

二，使用

配置界面导入axios

import axios from 'axios'

在导入完成之后可以开始写配置信息了

const instance = axios.create({
    //使用了axios.create方法创建了一个自定义的的axios实例
    baseURL:"/api"//这里谢api是因为在发请求的时候跨域了
    //在后面发请求的时候都会将api作为基础路径
    //通常这里应该是请求头比如localhost：xxx或者是'http://xxx.x.x.x.xxxx'
})
//导出instance
export default instance

创建完axios实例之后就开始具体发请求了

//shopcar.js
//写名称的地方可以自定义想写什么写什么
//在写路径的地方写刚刚我们创建axios实例的文件路径
import 名称 from '路径'
//按需导出一个名为home的方法
export function home(){
    return request({
        method:'这里写请求的方法（比如get,post,put,delete方法）',
        url:"请求地址"
    })
}

在这里确定了请求地址请求方法之后就可以按需引入发请求

import {home} from '@/app/shopcar'
//按需导入配置信息中的方法

//使用ref声明一个空数组
const homepage=ref([])

//使用async，await请求数据
//再把请求响应的数据赋值给空数组
 const homelist = async()=>{
    const {data:res} = await home()
    homepage.value = res.result
}

homelist()

在把数据请求到并且保存起来之后就开始渲染数据

使用v-for来循环保存的数据

    <ul>
        //在函数方法中使用ref的数据的时候需要带（.value）但是在模板中的时候就不需要带(.value)了
        <li v-for="item in homepage">
        //item可自定义homepage是刚刚保存的响应结果的数据
            <div>
                //动态绑定可以让一个属性的值是变量
                <img :src="item.picUrl" alt="" style="width: 160px;height: 150px;">
                //使用插值表达式
                <p>{{ item.name }}</p>
            </div>
        </li>
    </ul>

再把样式写一下首页就完成了

后续除了详情页和搜索页都是一样的（如果要优化的话可以把这个li中的内容封装起来做成一个组件后续直接往里面传值就行）

二，搜索

这个就是搜索的界面数据渲染的方式和前面的界面大差不差，区别就是需要带参数

export function suggest(text){
    return request({
        method:'get',
        url:"请求地址",
        params:{
                键：值
                //服务器需要参数的参数名：要带过去的值
        }
    })
}

//补充：
//常用的请求方式又get，post，put，delete
//其中get和put请求带参数的时候需要加上params
//post，delete请求带参数的时候需要加上data

//注意！注意！！注意！！！
//post和delete后面加参数带data仅限上面展示的方法

然后在调用请求的方法的时候需要带个形参

//表单的默认值
let inputtext =ref("想念")
  
 const ss = async()=>{
                                       形参写这里
    const {data:res} = await suggest(inputtext.value)
    //赋值的操作与前面无异
    suggestlist.listdata = res.result.songs
}

在数据渲染和前面无异

<template>
    <div style="width: 1000px;height: 500px;border: 1px solid #000;margin: auto;" class="sslb">
        <div style="width: 350px;margin: auto;height: 40px;margin-top: 20px;">
            <input type="text" style="width: 290px;"
            v-model="inputtext"><button 
            @click="ss">搜索</button></div>
        <ul >
            <li  v-for="item in suggestlist.listdata"
            :key="item.id"                     
            @click="xiangqing(item.id)">
                    <img src="../assets/ss.png" alt="" style="margin-left: 20px;">
                    <p style="width: 320px;">{{ item.name }}</p>
                    <p style="width: 150px;">{{ item.artists[0].name }}</p>
                    <p style="width: 230px;overflow: hidden; height: 20px;">
                    {{ item.alias[0] }}</p>
                    //这里按正常应该是可以直接打印时间的但是需要根据服务器返回的数据来进行操作
                    //下面的操作就是服务器返回的毫秒数
                    <p>时长{{ (item.duration/1000/60).toFixed(2) }}</p>
            </li>
        </ul>
    </div>
</template>

三，详情页

在详情页中发请求的方法和操作与搜索页一样主要考察的是路由的传参

在上面的代码中可以看到有一个方法叫xiangqing后面带了个参数(参数为当前数据的id)

再点击的时候使用路由跳转并传参

const xiangqing = (id)=>{
    //模板字符串拼接路径
    router.push(`/details/${id}`)
}
//然后在路由的配置界面也要发生变化
 {
     path:'/details/:id',
     component:details
 },

详情页渲染的方式和前面一样都是插值表达式