easyLive项目学习日志

前言

本项目是来自: B站UP主程序员老罗的easyLive项目

本人购买了项目资源跟着视频进行开发学习

开发环境:

• JDK1.8
• nvm 1.1.12
• node.js 20.18.0
• IDEA 2024.2.2
• VSCODE
• MYSQL8.0
• Redis 7.4

easyLive 项目后端学习开发第一天 2024/11/5

前端:

首先在老罗的EasyShop上购买EasyLive的前端项目文件,NVM里确认好Node.js的版本之后在客户端管理端项目分别运行
npm install来安装前端所需的依赖项,随后使用npm run dev来测试前端项目启动是否成功

后端:

项目构建

由于我学习的是单服务版本的,所以是用到SpringBoot框架进行开发,这里我们需要导入EasyLive所需要的依赖,在此之前需要先构建一下项目结构目录
SpringBoot的项目结构这里直接省略,因为是JDK1.8版本,所以选用的是SpringBoot2,这里是pom文件
在pom.xml配置好之后,我们还需要注意,在application.yml里,web后端和管理后端的配置文件里区别,web后端的配置文件里需要更改spring.application.name(书写的时候使用properties格式书写会方便一点)
端口也是需要更改的,需要将server.port改为7071

更改好后启动SpringBoot主类来进行接口测试,没问题后进入下一步

EasyJava代码生成

因为这个项目使用的是mybatis原生来进行数据库的CRUD操作,所以需要手写Mapper接口里的方法将xml的SQL语句方法映射,这个项目使用了之前的EasyJava代码生成项目,所以我们直接下载下来使用(需要购买),因为我下载的是源代码,所以我们首次运行的时候需要在maven里install一下来编译.
编译完成后我们可以看properties文件,但是在此之前我们需要设置一下编码格式,在IDEA里如图

设置好之后进入properties文件里我们可以看到

这里我们只需要更改数据库的url和数据库的账号密码,改成我们自己的数据库就可以了(前提是建表完成,视频里有讲这里就不赘述了)
然后再更改一下文件输出路径(这个自定义),其他的看注释按需求更改就可以了

编码阶段

这里感觉没什么好讲的,其实就是一些SpringBoot的常规MVC编程,而且这个项目的结构感觉有点混乱不好理清流程.

easyLive 项目后端学习开发第二天 2024/11/6

编码阶段

今天就是把第一天的登录注册功能实现完善了一下,这个项目目前为止还没啥收获,其实也是,做这个项目的初衷就是接触一下其他的项目来加深对怎么写的理解,同时也接触一下原本项目里没有的新技术(其实这里有个验证码功能我还没时间搞懂,这个等项目完成了之后再说)
前端项目里的管理端记得将api地址端口改成7070,不然里面是微服务版本的默认是7071(估计录微服务课程也是用的这个项目)

easyLive 项目后端学习开发第二天 2024/11/7

编码阶段

今天除去前期无聊的CRUD
今天新接触了ffmpeg工具

FFmpeg全称为Fast Forward Moving Picture Experts Group，于2000年诞生，是一款免费，开源的音视频编解码工具及开发套件。它的功能强大，用途广泛，大量用于视频网站和商业软件（比如 Youtube 和 iTunes）。
FFmpeg 本身是一个庞大的项目，包含许多组件和库文件，最常用的是它的命令行工具

了解和学习ffmpeg(未完成)

使用ffmpeg和IO流来进行前端静态资源获取,这里我犯了一个错误导致我Debug了半天

事情是这样的:
在分类上传这个业务功能当中,当用户上传了分类的封面和背景图的时候,前端会从后端获取静态资源,如果获取不到图片则会显示404,我就是图片上传业务能正常运作,然后前端在获取后端静态资源的时候发现一直404,接下来是我Debug的经过

1. 首先打开PostMan,我们测试一下接口有没有问题
   
   需要注意的是因为后端设置了除account控制器以外的所有Http请求需要token验证,所以我们需要在Header和cookie里添加adminToken(这里是后端的token),token的获取方式就是打开管理端登录之后去cookie里面找到并复制出来
   

   

   
   经过测试发现接口并没有问题
   
   能够正常返回

2. 然后开始检查是否是前端接口请求错误,由于我安装了浏览器查看Vue的插件Vue devtools所以直接打开查看Vue元素
   
   为什么我会觉得是前端请求错误呢?因为静态资源访问是通过前端请求后端服务器获取的,之前用的OSS对象存储让我下意识的 以为这个跟之前那个一样了.
   
   通过查看Img的src,发现路径也没有问题,那么问题可能出现在getResource这个控制器方法上

3. 打开IDEA并打开file控制器,在getResource方法打上断点,刷新界面重新请求,这里会有两个请求,一个是fetch请求,调用的loadCategory控制器方法,获取到分类的信息,因为将路径存储到了数据库里,所以回返回路径,这时候前端img会根据src向后端发起请求.理应来说程序应该停在控制器方法getResource当中,但是并没有按照预期执行,那么问题就是出在了这里,这个请求在后端并没有执行这个方法

4. 于是我到拦截器当中,查看了拦截器的代码,因为前端发送过来的静态资源请求没有携带token的Header,那么这个请求是携带了cookie来访问的,我打了个断点在cookie验证的拦截器判断上,这次果然停止了
   
   这里出现了,问题,因为这个字符串是在if代码块里定义的,所以if代码块执行结束之后就访问不到了(其实就算判断到了也没用)
   
   这里的token判断只是判断Header里是否有token,当cookie里携带token的时候而Header里没有携带就会判断拦截器为 false从而拦截请求导致返回失败

5. 解决方法也很简单
   
   完事了,其实就是这个小Bug,真的很简单但是让我调试了好一会

做几个项目发现自己调试找Bug的能力进步了很多

easyLive 项目后端学习开发第三天 2024/11/8

今天完成的功能是这个项目的视频上传功能,有一说一这个做这个项目的时候老是明明没做多少但就是过了很久,好了来看下今天遇到的问题

因为这个业务功能对我来说比较新,之前的博客功能的图片是上传到OSS,还没涉及到本地IO操作,所以这里记录一下
首先上传视频的时候会发送请求包含fileName的chunks,这里的chunks指的是文件的切片数
我们来看代码

首先控制器接收前端传来的两个参数,控制器方法从Redis里获取到用户的登录信息,随后的savePreVideoFileInfo方法则是创建临时文件

这里使用id+uploadid的组合就是防止uploadId重复导致出现问题(概率小但不为0)

这个控制方法结束之后会将前端会将文件切成13片来调用uploadVideo接口

这里就是通过获取上个方法存储在Redis缓存里的dto信息获取文件存储目录以及当前上传了多少切片和当前文件大小
图上的注释已经说明的很清楚了.

写到这里的时候想起来了,当初花时间最多的是建数据库表,因为没买后端源码所以数据库得跟着视频一个个敲.今天也是跟前几天那种单纯的CRUD不同,复习了IO操作,挺好的.这里按理来说还缺少权限验证?不清楚,明天再说吧

easyLive 项目后端学习开发第四天 2024/11/12

这天又是把前几天写的功能给整合起来

1. 投稿界面删除视频

这个接口控制器很简单,这里就不过多赘述

2. 上传封面图片

这里就是上传一张图片之后指定路径使用ffmpeg来生成缩略图

3. 当用途填写好投稿视频表格之后点击上传,调用/ucenter/postVideo控制器来进行视频信息和视频文件的上传

业务太长,到时候代码存到github想复习就自己看看,这里就放一下大概的流程图吧(省略了很多细节)

4. 审核视频

让我记忆比较深的就是这个

这里就是之前加入删除队列的临时文件,全给删了,另起的一个线程异步删除

5. 获取推荐视频

太简单了,跳过

6. 获取视频列表

太简单了,没什么好讲的

Entity类和Query类

• 刚开始做项目的时候我还不理解为什么要有Entity类和Query类这两个类,字段都是基于数据库表格,ORM不久是一个表对应一个Entity类吗?
  查阅发现Entity是用来封装数据库表格查询结果的类,有时候会有联表查询,就有其他表格的一些字段,这时候可以在Entity类上加入一些其他表格的字段方便返回.这点相比MybatisPlus的自动生成代码好一点?不过mybatisplus也能使用xml,所以学SQL还是很重要的
  Query类是查询类,用于设置SQL语句的查询字段,有时候可以添加一些连表查询的if判断条件什么的.里面的fuzzy后缀的字段则是模糊查询.
• 所以就是Query查询类,Entity封装数据实体类(至少现阶段理解是这样)

目前大概就这样,接下来就是实现视频播放界面的接口了.

更改思路

感觉一些简单的逻辑开发没什么好记录的,很像流水账,所以以后只记录比较感兴趣的有学习到的点了.开发日志基本就算完结了.