云课堂&云音乐项目总结

一、云课堂

项目要求：

1. 1、完成PC端首页、课程详情页、个人中心页、课程搜索页的静态布局
2. 2、数据请求并渲染到页面
3. 3、首页要实现的功能：

•        用户登录、注册、忘记密码、退出登录
•        注册、忘记密码正则校验
•        课程分类点击、搜索框回车&按钮、课程类型跳转搜索页面并查找
•        直播课程滑动Tab切换
•        侧边客服QQ跳转
•        移入课程图片逐渐变大
•        点击课程进入课程详情页面
•        底部链接跳转相关页面

1. 4、课程详情页面要实现的功能：

•        用户登录、注册、忘记密码、退出登录
•        注册、忘记密码正则校验
•        课程分类点击、搜索框回车&按钮跳转搜索页面并查找
•        课程描述、目录、评论Tab点击滑动切换
•        评论数据请求并渲染
•        登录后课程可收藏（有瑕疵）
•        根据是否免费进行不同的课程渲染

1. 5、个人中心要实现的功能：

•        退出登录并跳转回首页
•        课程分类点击、搜索框回车&按钮跳转搜索页面并查找
•        昵称、手机号、密码修改模态框（因为接口问题，但是不做修改功能）
•        文件上传

1. 6、搜索页面要实现的功能：

•        用户登录、注册、忘记密码、退出登录
•        课程分类点击、搜索框回车&按钮跳转搜索页面并查找
•        分类课程查找刷新不重置，记录数据
•        数字分页、左右按钮分页
•        点击课程进行课程页面跳转

1. 7、完成手机端静态页面的搭建
2. 8、手机端实现与PC端相同的功能

完成程度：90%左右

项目难点（对我个人而言）：

1. 1、首页

•         首页课程图片鼠标移入放大效果的实现
•         登陆注册等正则校验
•         请求到的图片大小不一致，图片大小格式的设置

1. 2、课程详情页

•        课程描述、目录、评论Tab点击滑动切换，由于是请求而来的数据，初始的高度不可固定

1. 3、搜索页

•        通过点击筛选条件，筛选出想要获得的课程，让本地存储记录数据，使其刷新之后也可以记住之前我所选择的课程

•        数字分页器的实现

•        左右分页器的实现

1. 4、个人中心页面：

•        这个页面要实现的功能比较简单，只有上传文件按钮自定义的一个小技巧的使用

出现的问题：

1.         1、在搜索页面数据记录的读取时会显得比较混乱
2.         2、PC端、手机端可以根据页面的大小不同进行相互跳转（目前还没有很好的办法解决）
3.         3、搜索页面功能初次实现时思路并不清晰
4.         4、信息存入本地内存时会对某些功能有影响
5.         5、有的静态布局并不清晰
6.         6、代码实现时的异步和函数嵌套问题

解决方法：

在书写代码实现功能时，注意函数的封装性，以及入口函数的运用

学到的新?知识：

首页：

1、 客服点击，跳转QQ联系界面

点击打开之后会直接弹出QQ聊天界面

实现代码如下：只需要将uin=之后的号码换成客服的QQ号即可

<a href="https://wpa.qq.com/msgrd?v=3&uin=24883313xx&site=qq&menu=yes&jumpflag=1" target="_blank">

          <i class="iconfont icon-QQ"></i>

          <p>客服1</p>

        </a>

2、

（好像看不出来，但是真的有变化）

代码实现：其中.li_img为图片的父盒子，下面是用less写出的css样式

 .li_img {

          position: relative;

          width: 225px;

          height: 125px;

          overflow: hidden;

          > img {

            width: 100%;

            height: 100%;

            transition: all 0.6s ease;

            &:hover {

              width: 250px;

              height: 150px;

              position: absolute;

              margin-top: -10px;

              margin-left: -10px;

            }

          }

        }

3、一个图片充满整个盒子的属性

object-fit: cover

个人中心页面：

点击更改头像之后：

普通的input file按钮会在按钮后面带有……文件已上传的字样，默认是不可以改变或者隐藏的，要实现自定义样式，代码实现如下：

html：

<input type="button" value="更改头像" id="up_img">

<input type="file" value="更改头像" style="display: none;"  class="up_img">

js/jq：

 // 上传图片

  $('#up_img').click(function () {

    $('.up_img').click()

  })

手机端与PC端实现功能类似只有页面的渲染效果不同，就不过多赘述了

二、云音乐

项目要求：

1、首页、播放页、歌单页的静态页面

2、排行榜和搜索功能的实现

3、接口数据的请求和渲染

4、歌曲播放暂停的控制

5、歌词的处理和渲染

6、歌词与音乐播放时间相对应，并改变歌词样式

7、进度条与歌词进度相对应

8、拖动进度条改变歌曲进度

9、点击歌词改变歌曲进度，同时进度条也跟着改变

完成程度：80%

项目难点：

1、对音频audio的各种属性和方法并不熟悉，导致走了很多的弯路

2、最新歌曲可以进行歌曲切换

3、歌词可以滚动（待提升）

4、默认循环列表播放

5、歌单列表渲染

6、歌曲播放模式转换-单曲循环/随机播放/列表循环

出现的问题：

1、因为云课堂项目有些地方利用了本地存储localStorage，云音乐使用localStorage会对云课堂的项目会产生一些影响，一开始的时候并没有使用本地存储，导致很多功能没有实现

2、在实现歌词拖动时，或出现卡顿的现象

3、歌词的滚动并不流畅

4、播放下一首歌曲时，跳转后不能自动播放音乐

5、歌词接口数据的处理比较杂乱；歌词的防抖和自动向上滚动相互影响，有待处理

解决方法：

在使用本地存储之后，可以实现自动存储歌单，并在存储歌单之后进行歌曲播放方式变换，但是又会出现其他问题，比如上述提到的：在自动播放下一首歌曲是并不能跳转后就开始播放音乐，还有一些问题有待解决

一些其他小点

1、$('audio')[0].ontimeupdate = function () {}

ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。

2、$('audio')[0].currentTime 播放器当前播放位置

3、$(‘audio’)[0].duration 音频总长度

4、$(‘audio’)[0].ended 音频是否结束

5、input框的onchange() 事件

四、总结

1、感觉自己写代码的速度比较慢，想要好好想一想，仔细琢磨一下代码的时候就会发现后面还有很多的任务，自己的时间紧张，代码完成就会比较粗糙

2、有些不想熟悉的属性和方法一定要先去找好资料进行大致的学习，不然会有很多问题出现

3、在完成项目之后，再次打开时会发现还有很多细节部分的问题，说明在实现功能时想的并不全面，之后写项目要多方面考虑

4、代码封装的问题，在实现功能时很少会直接去封装函数，大多时候是直接在入口函数中编写之后再去一段一段粘贴，这样会使在之后进行函数封装时比较麻烦，增加了工作量

最后，我认为不能在最开始写页面的时候就纠结一些小细节，在这次项目中，大量时间都在纠结一些小点，但其实对我项目的整体来说，影响并不大，在之后的项目完成过程中有些细枝末节的东西就可以先忽略。