# project1 **Repository Path**: hali-java/project1 ## Basic Information - **Project Name**: project1 - **Description**: 一个牛逼的项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-12-30 - **Last Updated**: 2022-04-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # kgmusic ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). # _kgmusic_ app 开发文档解释说明 ## 页面跳转逻辑以页面功能、逻辑和 iconfont 图标按钮为纽带，相互跳转最终到音乐播放、视频播放、我的，三个单页面为止 - 使用框架：vue - 使用技术：html+css+vue+js - 使用接口：更新过的最近版网易云接口，老版本请求有些无数据，因此换了接口，检查项目时如有需要 联系：vx：cvnert - 另：页面内相互跳转会有些慢，因为发起请求太多的缘故 - 小组成员互相探讨合作，跳转传输接收值互相转告，共同合作开发 - 一个用心制作的不算完美的*kgmusic* app 诞生啦 ### 各个页面的名字所对应的功能板块**共有 17 个单页面组成** - 另：页面内相互跳转会有些慢，应该是因为发起请求太多的缘故 - 小组成员互相探讨合作，跳转传输接收值互相转告，共同合作开发 - 一个用心制作的不算完美的*kgmusic* app 诞生啦 ### 各个页面的名字所对应的功能板块**共有 17 个单页面组成** 郑航：负责账号页，歌单广场页，排行榜页，视频页 姬寅飞：首页，歌单页，推荐歌单页，评论页。 张茹青：搜索，播放，每日推荐，排行榜单各榜单详情 张艺卓：开屏页，注册页，登录页，我的页，收藏歌单详情展示 开屏界面：Jump 登录：Login 注册：Reg 我的：User 首页：Home 歌单：Song 推荐歌单：TJGD 每日推荐：Detail 账号：Admin 歌单广场：SongSing 视频：Video 搜索：Search 播放：Play 排行榜:RankList 排行榜详情:RankListDetail 歌单详情页：Collect 评论页：pinglun #### 小组成员（组长）郑航 - 创建项目、仓库、撰写路由跳转 - 账号（我的）页详细分析 - 功能：实现了登录数据的一个同步，同步了自己的网易云账号的头像和用户名，实现了退出功能， 实现了签到的功能。 - 难点：页面搭建，样式布局，登录以后接受参数，使用参数调用接口 - 亮点：引入了阿里巴巴图标库的图标样式，结合 vantui 实现了较为好看的布局 - 歌单广场页详细分析 - 功能：歌单的轮播图以及推荐歌单的跳转 - 难点：引入饿了么 UI 的走马灯，不会添加动态的数据，摸索后完美实现，在点击推荐歌单的时候传给歌单详情 的 id，跳转到歌单的详情页，实现了点那个是哪个歌单的功能，还原了网易云的歌单内容 - 亮点：饿了么 UI 的走马灯 - 排行榜页详细分析 - 功能：实现了榜单推荐，官方榜，精选榜，曲风榜，全球榜。实现了数据的渲染，其中官方榜的每一个榜单都显示排行榜前三的数据，和网易云官网高度相似，但是也加入了我们自己独特的想法，通过传参实现进入每一个排行榜都进入详情的功能 - 难点：页面的搭建，排版一直都不满意，随后已修改 - 亮点：传参给排行榜详情页以及播放页，在官方榜就能实现点击前三的歌曲听歌的功能 - 视频页页详细分析 - 功能：四个 tab 栏，实现了视频，电台 1，电台 2，以及专辑的呈现，其中实现了视频的播放以及电台 1 的收听 - 难点：电台的播放需要使用三个接口互相的调用，最后已完成，视频的播放的位置一直找不到合适的，最后选择了使用弹出层来实现。 - 亮点：视频的播放，使用 vantUI 的弹出层挂载了视频的播放。电台的播放。 #### 小组成员张茹青 - git分支提交问题解决 - 文档收集整理 - 搜索页详细分析 - 功能： - 搜索历史：开始有固定的三个，新搜索词会显示在搜索历史的第一个，如果之前有这个，重复搜索的就不添加进历史，点击删除 iconfont 图标，清空搜索历史。 - 搜索框：按下回车键触发事件，请求出的数据展示在列表中，播放此数大于一定次数有 HOT 标识 - 点击单个搜索到的歌曲行跳转到播放页进行展示 - 轻提示：搜索完成提示搜索框内容 - 难点： - 页面搭建：最初版样式不大符合，已修改 - 亮点：HOT 标识 历史搜索 - 播放页详细分析 - 功能： - 接收 url 中传过来的 id，渲染歌曲，歌曲 cd 仿真旋转 - 点击 cd 样式的转盘显示歌词点击右上方 iconfont 隐藏歌词显示 cd 样式转盘 - 点击播放按钮播放 cd 转盘旋转，停止按钮暂停播放 cd 转盘停止旋转。 - 若直接打开此页面不传 id，将渲染一个固定的歌曲内容 - 难点：转盘旋转和音频控制，掌握的没有那么熟练，实验多次才成功 - 亮点：cd 盘旋转，为了更仿真一点，也是一个努力让页面更好看的小心思了 - 每日推荐页详细分析 - 功能： - 调取根据用户推荐的歌曲进行展示 - 展示出的每首歌点图片在 url 路径中传出 id 跳转到播放页 - 亮点：样式渲染，颜色搭配的还挺好看的 - 排行榜榜单页详细分析 - 功能： - 接收榜单 id，渲染榜单详情，榜单歌曲详情 - 点击歌曲行在 url 路径中传出 id 并跳到播放页 - 难点： - 这是最后做的一个页面，到这一页基本没有难点，在重复调接口取数据渲染展示 - 亮点： - 色彩搭配符合 app 主题颜色 #### 小组成员张艺卓 - 页面新功能发现者一号 - 开屏页详细分析 - 功能：实现一个开屏界面效果，可以选择登录已有账号，还可以注册新的账号 - 难点：暂无 - 亮点：算是一个封面吧，好看一点 - 注册页详细分析 - 功能：注册账号，实现手机号注册账号，发送验证码实现注册成功 - 难点：一天发送验证码的次数只有五次，而且没有未注册的手机号，在这个阶段较为困难 - 亮点：注册完成跳转到登录页，实现后续功能， - 登录页详细分析 - 功能：登录功能，输出一个用户 id，传送到后面的页面实现调取用户的信息等功能。 - 难点：登录的时候密码记错了好几次 - 亮点：输出一个用户 id，后面就可以调用这个 id 来获取播放记录，以及收藏歌单，收藏的歌手查看记录，而且可以显示自己的昵称，以及头像到账号页 - 我的页详细分析 - 功能：调用接口，获取用户 id，来获取到用户最近观看的视频，播放的歌曲，收藏的歌手以及歌单功能，然后渲染到页面上。传出一个歌单 id - 难点：因为一直用的是更新之前的接口文档，所以最初的效果最近播放的歌单，视频，以及歌单无法实现，之后更新了接口实现此功能。 - 亮点：历史记录的获取以及展示。如果登录不成功，或者没有登陆，此页面将获取不到用户 id，无法展示用户的播放记录。 - 收藏的歌单详情页详细分析 - 功能：在我的页面点击想要进去的歌单，接收到歌单 id，渲染数据，把歌单详情渲染在页面上，输出一个歌曲 id - 难点：页面渲染不成功 - 亮点：通过过输出一个歌曲 id 到播放页接收，以实现歌曲的正常播放。 #### 小组成员姬寅飞 - 页面新功能发现者2号 - 首页详细分析 - 功能： - 实现了向各个页面的路由跳转及传参 - 相应的按钮按照逻辑跳转到相应的页面 - 首页视频的播放功能 - 难点： - 视频样式控制播放的位置 - 歌单页详细分析 - 功能： - 渲染页面，点击时歌曲把 id 传递播放页，实现播放功能 - 难点： - 页面布局和排版 - 渲染数据时找不到id，反复试验后发现数据取错了，已修改完成 - 推荐歌单详情页详细分析 - 功能： - 这个是根据首页点击列表的不同加载不同的歌曲 - 把参数传递给播放页，实现播放 - 难点： - 数据渲染和静态页面撰写，已解决，数据渲染老找不着id，已解决 - 评论页详细分析 - 功能： - 简单的根据点击不同的歌单对应相应的接口调取数据进行渲染 - 亮点： - 页面样式结构搭建，数据较为灵活