forked from ljx1845780976/videoSite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path笔记
174 lines (159 loc) · 14.2 KB
/
笔记
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
需要的中间件：1. mybatis plus、thymeleaf、redis
2. ffmpeg
3. vue.min.js 、axios.min.js 、Dplayer.hls.js 、Dplayer.min.js、moment.min.js(时间类转换工具)
出现的bug：1、如果实体类的属性名和数据库的字段名一样且都使用了下划线，则查找后返回的类的属性会为null，
解决方法：属性名和数据库名不能同时使用下划线，应该设置属性名为userId，数据库名为user_id
2、在播放视频时，会出现客户端中断连接的错误，具体在输出流写数据时发生，如果要让视频继续播放就必须重复调用
该接口会重复读视频文件，但是只调用一次接口的话就会出现中断连接，导致视频不能继续播放;
解决方法：尚未解决
3、前端页面在不同的电脑屏幕分辨率下会出现不同的样式，有的小有的大，可以学习自适应页面来解决。
一、登录注册模块： (前端模板加载不出来就用maven清理打包一下)
1、登录模块：使用springSecurity进行权限登录认证
实现的功能：
①可用回显用户名密码错误信息
注意点
①连接数据源时，一定要获取表的三个字段username、password及status
②定制成功后跳转的页面一定要写controller接口有的
③登录表单提交的action与登录接口的值要一样，登录接口要返回login.html页面
④创建一个LoginFailureHandler类设置里面的url，使登录失败后返回登录页面时可以回显错误信息
提升空间：
登录三次不正确出验证码;
2、注册模块：
实现的功能：
①当出现用户名重复时，如果第二次再输入刚刚相同的用户名则disable提交按钮，防止重复恶意点击提交按钮
(其实没什么卵用，因为第三次输入又可以用第一次的用户名了，这里其实可以用验证码或者直接邮箱注册)
②密码和确认密码框不相等，邮箱格式不正确，直接disable提交按钮
注意点
①提前写好MD5密码编码器，在注册接口内保存时要先给密码编码
②前端使用v-model及@change绑定确认密码和邮箱输入框，当确认密码错误和邮箱格式错误可以使按钮失效;
实现前端校验
③前端页面有两个input标签如果name相同，得到的结果会出现逗号
提升空间：
①找回密码功能、注册时发送邮件给对方邮箱返回一串认证码并根据发送的认证码与输入的认证码校验完成注册;
②每分钟发一次邮箱;
③禁止用户使用特殊符号如, . / \ 等等作为用户名
3、首页模块：
实现功能：
①分页功能：这里使用vue获取数据，当点击下页上页按钮时，分别触发相应的方法函数，在函数内使用axios
获取后端相应页数的数据，可不跳转页面实现分页；当当前页大于总页数或小于1时，disable换页按钮；
缺点就是一刷新页面就会回到第一页的数据
②
注意点：
①使用Vue前端时在href,src,id,这种标签内传参时,要加:号;
比如 要向movie/getMovie/{id}的接口内传入当前id，则前端要写成
<v-for="item in items">
...
<a :href="'video/getMovie'+(item.id)"><a>
②
提升空间：
①
4、使用springSecurity获取登录后的用户信息方法：
①后端通过调用SecurityContextHolder获取当前用户信息，即工具类GetCurrentUserUtil的内容。
②前端页面通过<span sec:authorize="isAuthenticated()" sec:authentication="name"></span>
来获取用户名，如果登录了就显示用户名，没登录就不显示；
前提是要在开头加xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5
③注意：
前端也可以通过获取session域对象获取当前用户信息，即[[${session.SPRING_SECURITY_CONTEXT.getAuthentication().getName()}]]
但有个缺点就是如果没有登录，就获取不到当前用户信息，也不返回空值，前端页面直接报错;
5、视频上传存储流程
原始方法：上传到本地服务器磁盘,通过io流获取本地视频,该方法比较原始
①每当用户上传视频时，会为该用户在服务器磁盘内创建一个该用户的文件夹，文件夹再分别创建视频目录和图片目录分别存储视频和视频的封面图片。
②上传完成后就可以获取该视频的url路径，给ffmpeg处理视频获取其封面图片和时长时提供视频路径
③ffmpeg处理完成后，得到图片路径和时长；
④将所有参数封装到一个pojo类并写入数据库
新方法：购买阿里云oss对象存储服务器，将每个视频和封面文件存到oss服务器。
①上传视频时，会在oss服务器创建用户文件夹存储其视频和封面，
同时会存入本地磁盘给ffmpeg处理视频文件来获取封面和时长，
设置一个定时任务，每天凌晨三点删除本地磁盘的视频和封面文件。
②ffmpeg处理后也把封面存到oss服务器并把封面的权限设置为公有读，
最后存入数据库的是视频文件的url为在oss的key值(即object名),封面url为oss的url;
③每次请求看视频时，会通过数据库拿到视频在oss的key值，再实时获取到视频的私有读url(该url会过期)。
注意：为了在前端获取视频url时不发生跨域问题，得在oss控制台设置权限管理->跨域设置。
提升空间：
①后期可追加点赞数、播放数(可用redis存储前面两个)及弹幕评论
②用户可自己上传视频封面或选择视频某个时间段的封面
③目前只允许用户传输MP4格式，主要是因为前端播放器不支持其他;
也可以支持各种视频格式，把用户传入的所有视频转为MP4,但缺点是可能会有损画质;
后期可以换一个支持多种格式的前端播放器
注意点：
①上传的表单一定要加上enctype="multipart/form-data"
②字符串如果想以点号\分隔 ,不能直接split("\"), 而是split("//.");
6、播放页详细说明:
①将主页传来的视频id存入hidden的input标签中并从js里获取，用改id提供axios调用接口获取视频信息
②将信息展现出来：
1)订阅与取消订阅:
Ⅰ、这里先创建一个订阅表 、里面只有订阅者(subscriber)和被订阅者(youtuber)两个字段
Ⅱ、写功能分别为订阅、取消订阅、查看订阅状态、查看已订阅和查看粉丝(该接口用与展现订阅列表和粉丝列表)的接口
Ⅲ、在订阅按钮与取消订阅按钮内的函数使用axios绑定接口
2)订阅按钮的详解：
Ⅰ、写两个分别id不同和css颜色不同的订阅和已订阅的按钮
Ⅱ、使用vue为这两个按钮分别绑定函数方法，即@click="subscribe"和@click="un_subscribe",再在方法内写具体流程
Ⅲ、在方法内设置，只要点击其中一个按钮，该按钮就会消失而另外一个按钮出现的css("display","none|inline")函数;
这样就起到切换作用
Ⅳ、在获取video信息的axios函数内再定义一个axios函数获取当前用户与youtuber是否存在订阅关系,如果存在则让订阅按钮消失;反正让已订阅按钮消失
Ⅴ、定时将订阅消息传入数据库(前提先创建一个timer为0的data),
并通过clearTimeout(this.timer) + this.timer = setTimeout(() => {···})
两个定时方法完成只对最后一次点击有效，并过一段时间后再调用调用后端的两个分别存入和删除的接口;
提升空间：
能规定好视频的尺寸，每个视频传进来时播放器的大小都不变
7、通知功能说明：
①、 创建一个通知pojo类，里面存通知人、被通知人、通知时间、
收到通知后点击通知跳转的地址(如收到订阅通知,点击跳转对方主页;收到评论通知,跳转自己被评论的视频页)
和通知信息。
②、 每次有别人点击订阅或评论时,都会创建一个通知类并存好相关信息,然后以被通知人为key新的通知类为value存入redis的list中
存入和获取的顺序要相反，即要求先进后出，因为通知信息的顺序总数按通知时间来;
还会创建一个以被通知人名字_num为key,值为自增1的键值对来存放通知数量,用户可以在前端点击已读按钮清除这些数量
③、 再写一个通知controller接口，里面分别有获取被通知人的通知信息，和清除被通知人的通知信息
④、 在header公共页面的mounted内以当前用户为参数，获取他的通知信息即可
提升空间：
建议把通知类持久化到数据库,从数据库拿信息,还可以设置一个status字段来记录已读和未读属性;
每次如果点击某个通知信息就会设置它的status为已读;点击全部已读即循环判断status是否为未读,如果是就
设置为已读;点击清空通知信息就删除数据库数据;
8、我的关注与我的粉丝模块：
①模块说明：
1)两个模块实际上是一个模块,调用查询已关注和查询粉丝接口时根据模块不同分别传入不同参数即可
2)在myfoucs.html页面的mounted内一开始就获取已关注的User信息，再逐依遍历;
缺点是调用了两个接口两次进入数据库,如果用多表查询可能只用进入一次数据库
3)这里的订阅按钮和取消订阅按钮与在video.html页面的有所不同
此处订阅按钮详情：
Ⅰ、分别为订阅按钮和取消订阅按钮绑定:name=sub+当前已关注的username和:name=un_sub+已关注的username
Ⅱ、为两个按钮分别绑定方法函数并传入参数event，即@click=subcribe($event);
在脚本区即可通过event.target.name获取按钮绑定的name值
Ⅲ、通过jquery的$("name='字符串'"),如果传入的字符串为参数则写成$("name='"+参数+"']")来获取特定的标签
然后改变其css即可
Ⅳ、再通过js的slice()切割字符串将un_subusername切成subusername和将subusername切成username
得到的subusername使订阅按钮显示，得到的username传入订阅与取消订阅接口
9、评论模块：
①先创建一个评论表和评论类，属性分别是评论id、视频id、评论时间、评论人、评论内容
②评论接口分别是发表评论并存入数据库，和分页从数据库获取评论
③前端设计：
Ⅰ、用一个window.addEventListener监听器可一直监听 handleScroll()函数，该函数获取滚动条和页面的相关高度
，并通过计算使回到顶部按钮在滚动条滚到特定高度时显示和隐藏，使滚动条滚到评论区时才调用axios获取评论的接口。
Ⅱ、发表评论时设置函数post_comment 限制发表频率，禁止无内容发布，并通过通知弹窗显示给用户
Ⅲ、分页功能：目前只支持首页、尾页、下页和上页，点击相关页会把当前页赋值为点击的页然后传入axios接口；然后使滚动条回到评论区而不是顶部
Ⅳ、回到顶部按钮：css设置position为fix 及固定在页面不随滚动条移动而动，并设置相关函数returnTop;
提升空间：
Ⅰ、增加评论区用户可相互回复，而不是单单评论视频
Ⅱ、设置评论点赞，并按点赞数排序前5条评论为热门评论，然后再按时间排序后面的
Ⅲ、分页按钮更加多选项以及加入输入框
10、个人主页
模块介绍：Ⅰ、该模块有四个页面，有一个公共顶部页面;
公共页面可以修改个性签名，输入为再点击外面触发@change函数调用后端更新接口;
Ⅱ、投稿页面即查看自己的视频通过当前用户名获取自己的视频
Ⅲ、主页可设置置顶视频，具体过程
①每个视频有一个status属性，status为3时，表示该视频为置顶视频
②添加置顶视频会获取所以视频，确定后传入id，修改status值为3，每次进入主页会通过status==3获取置顶视频
③删除置顶视频会修改status值为0
③编辑置顶视频会获取所以视频，确定后传入id，修改当前置顶视频status为0，新置顶视频status为3
11、所有的时间处理模块：
Ⅰ、这里主要用到moment.min.js 多语言版本
Ⅱ、主要用到该工具的方法：
①、moment(日期类型参数).format("YYYY-MM-DD"):将日期类型参数格式化并返回结果
②、moment(日期类型参数).startOf('minute').fromNow():将参数与当前时间比较，根据相隔时间
返回n秒前、n分钟前、n小时前、n天前、n月前和n年前
Ⅲ、
1)这里的视频列表上视频的发布时间、通知时间及评论时间的显示的时间为：
①、只要时间相隔超过一天，统一返回YYYY-MM-DD类型；
②、否则返回n秒其、n分钟前和n小时前
以上通过js字符串的indexOf方法实现
2)具体视频播放页显示的时间为 具体时间，即 YYYY-MM-DD HH-mm-ss