# front-end-homework

**Repository Path**: chrisn-gs/front-end-homework

## Basic Information

- **Project Name**: front-end-homework
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-19
- **Last Updated**: 2024-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、项目概览

小谢音乐播放器是一个基于Vue 3.0和Vant 4.0开发的移动端音乐播放器应用。它不仅提供了基本的音乐播放功能，还集成了音乐列表管理、搜索、播放队列管理以及歌单选择等高级功能。以下是该项目的技术实现细节。

<table>
    <tr>
        <td><img src="期末大作业/music_front_end/img/页面图.png" alt="手机端页面2" width="200px"></td>
        <td><img src="期末大作业/music_front_end/img/页面图2.png" alt="手机端页面2" width="200px"></td>
    </tr>
</table>

## 二、技术栈

- **前端框架**：Vue 3.0，利用其响应式和组件化的特性，构建高效的用户界面。
- **UI组件库**：Vant 4.0，提供丰富的移动端UI组件，提升开发效率和用户体验。
- **状态管理**：Vuex，用于管理应用的状态，如播放列表、播放状态等。
- **路由管理**：Vue Router，用于页面导航和页面状态管理。
- **网络请求**：Axios，用于与后端API进行数据交互。

## 三、功能实现

### 1. 音乐播放功能

- **播放控制**：通过封装音乐播放的逻辑，实现播放、暂停、停止等控制功能。
- **播放状态同步**：使用Vuex管理播放状态，确保不同组件间的状态同步。

### 2. 音乐列表管理

- **展示音乐列表**：通过MusicList.vue组件展示音乐列表，使用Vant的List组件提升列表的展示效果。
- **添加和删除歌曲**：提供操作界面，允许用户通过按钮或滑动操作添加或删除歌曲。

### 3. 音乐搜索功能

- **搜索框**：使用Search.vue组件，集成搜索框和搜索结果展示。
- **搜索逻辑**：通过request/api/home.js中的API请求，与后端交互获取搜索结果。

### 4. 音乐播放队列

- **队列展示**：展示当前播放队列，使用Vant的List组件。
- **队列管理**：允许用户对队列中的歌曲进行排序和删除操作。

### 5. 歌单选择

- **歌单展示**：通过ItemMusicList.vue组件展示热门歌单。
- **歌单内容**：点击歌单后，展示歌单中的歌曲列表，使用ItemMusic.vue组件。


## 四、项目运行

```
npm install
```
```
npm run serve
```
## 项目打包
```
npm run build
```
## 同时也需要安装vant
```
npm install vant --save
```
## axios
```
npm install axios --save

```

## 五、项目结构

~~~tree
|-- App.vue
|-- assets/
|   `-- logo.png
|-- components/
|   |-- home/
|   |   |-- MusicList.vue
|   |   |-- Search.vue
|   |   |-- SwpierTop.vue
|   |   `-- TopNav.vue
|   `-- item/
|       |-- FooterMusic.vue
|       |-- ItemMusicList.vue
|       |-- ItemMusicTop.vue
|       |-- ItemPlayList.vue
|       `-- MusicDetail.vue
|-- main.js
|-- plugins/
|   `-- index.js
|-- request/
|   |-- api/
|   |   |-- home.js
|   |   `-- item.js
|   `-- index.js
|-- router/
|   `-- index.js
|-- store/
|   `-- index.js
`-- views/
    |-- HomeView.vue
    `-- ItemMusic.vue

~~~

**简要说明:**
- **App.vue**：根组件，作为应用的入口。
- **assets/**：存放静态资源，如logo.png。
- **components/**：存放复用性高的组件。
  - **home/**：包含首页相关的组件，如MusicList.vue（音乐列表）、Search.vue（搜索框）等。
  - **item/**：包含歌单页相关的组件，如FooterMusic.vue（底部音乐控制）等。
- **main.js**：应用的入口文件，初始化Vue实例和相关插件。
- **plugins/**：存放插件，如Vuex、Vue Router等。
- **request/**：网络请求模块，封装Axios，提供统一的API请求。
  - **api/**：具体的API请求文件，如home.js和item.js。
- **router/**：路由配置，定义页面路由和导航守卫。
- **store/**：Vuex状态管理，定义状态、getters、mutations和actions。
- **views/**：页面组件，如HomeView.vue和ItemMusic.vue。