仿移动端bilibili项目总结

一、项目总体功能介绍

二、关于各功能板块重点笔记

1、登录功能

页面如上图所示，使用flex+vw布局，可以下载Px to Rwd插件，使用快捷键快速将px转换为vw,快速实现屏幕适配。由于页面布局和注册页面基本一致，可将其抽离成一个组件，用于复用。首先将顶部信息抽离成组件，顶部文字信息可通过props父组件向子组件传值显示，顶部布局组件具体代码如下，

登录信息也可抽离成组件，这里输入框使用vant框架实现，下载vant，在main.js中引入后，可在组件中使用。

输入框组件

在登录页面引入组件，进行显示

2、注册功能

和登录页面类似，复用组件，使用props传值。

布局完成后，可向后台发送请求，首先将输入框数据双向绑定到data中，设计正则，若满足正则则向后台发送ajax请求并传递数据。这里使用axios，首先导入并挂载axios，然后配置baseURL 。发送请求时使用async和await，简化操作。（PS：在普通函数定义的前面加上async关键字，普通函数就变成了异步函数，返回值会变成promise对象；await关键字只能出现在异步函数中，可以暂停异步函数向下执行，直到promise返回结果。）

3、权限验证

重点：在发送请求成功注册完用户后，后台会返回数据并跳转到登录页面。登录时向后台发送请求，进行验证，若数据匹配，则登录成功，此时在localStorage中存储token和id，用来表示该用户已经登录。

用户在进入个人中心页时，需要带上id发送请求，用来进行权限验证。

4、个人中心

重点：渲染用户信息，由于显示用户信息的部分封装成了子组件，而登录成功后返回的用户信息存储在父组件中，使用props将用户信息传入子组件，并进行显示。（用户首次登录时显示的头像为默认头像，可使用v-if判断返回数据中是否有头像）。

子组件接收并显示

5、编辑个人资料

重点：点击编辑资料使用**$router.push(’/edit’)**跳转至编辑页。

上传头像使用 vant框架中的<van-uploader /> 标签，修改信息使用<van-dialog />和<van-field />标签，点击会显示弹出框。
逻辑处理最好都在父组件完成，所以需要子组件向父组件传值：使用$emit()方法

父组件接收事件，并做相应处理。

6、首页筛选分类

重点：使用vant框架中的滚动标签栏<van-tabs />，<van-tab /> 标签，最重要的是，需要改造后台返回的数据，需要给数组中每一个对象添加一个list属性，值为一个空数组，用于后面存储视频。

数据分类

下拉加载更多功能使用<van-list />标签完成。

7、播放视频

重点：使用video标签播放视频，点击某个视频时，需传入该视频的id，播放对应视频。图标使用阿里巴巴矢量图标库，使用步骤：在 main.js将相关样式导入，在组件中使用class="iconfont 对应代码"即可

8、收藏关注

重点：绑定样式，点击时将图标颜色变为红色，并且将点击后的状态存起来，刷新后不会变为变为原样。

9、视频评论

重点：评论需要登录用户才能操作，所以要先判断localStorage中是否存在token和id。学会使用ref和$refs的用法。

小结：本次项目很好的巩固了之前学的vue基础知识，包括父子组件传值，路由，axios请求，async和await在实际中的应用，并将其串联起来实现功能，有种养兵千日，用兵一时的感觉。也碰到了以前没有用到过的ref以及$refs，也是第一次使用vant框架，现在基本使用已经了解，等待更深一步的探索。对flex布局也不太熟练，还需进一步学习，总之，经过这次项目，对vue组件化有了更深的理解，也加强了对vant的认知。