SpringBoot Vue 视频管理系统

+ Mrzys1

摘  要

在计算机还没发展的年代，以前看视频都是从电视上进行观看的，因为电视只能放在固定的位置非常的不方便。随着计算机科学技术的不断发展，互联网技术的不断演进。

网站的出现，大大方便的人们的日常生活，在精神娱乐方面，选择性更多，更便捷。人们可以直接从网站上搜索自己想看的视频信息，点击观看。因此开发一套成本低、方便维护、可扩展性强的在线视频网站是很有必要的。而前后端分离架构的B/S系统则充分满足了系统的所有要求，因此在线视频网站系统选择了基于B/S结构的前后端分离系统。

本系统可以满足在线视频观看业务的基本要求，系统的开发使视频业务进行的更加有效率，更加准确。本系统的开发采用的是前端与后端架构分离的方式，前端使用的是Vue框架，使用ElementUI辅助开发页面的样式，这种轻量级的便捷式框架使得开发更加高效，便捷。后端采用SpringBoot框架进行开发，简化了框架的配置文件，采用框架的自动配置形式，开箱即用，减少了臃肿的xml配置，也利于系统得开发和维护。数据采用的是目前市场上主流的Mysql数据库，安全、免费、功能强大。

本文主要介绍了以 SpringBoot框架为核心的在线视频系统，主要包括系统的需求分析、系统设计、系统实现、系统调试和测试等各个环节。

关键词：B/S结构，Vue，SpringBoot，视频系统，前后端分离

Abstract

In the era before the development of computers, people used to watch videos on TV, because it was very inconvenient for TV to only be placed in a fixed location. With the continuous development of computer science and technology, the Internet technology continues to evolve.

The emergence of websites has greatly facilitated people's daily lives, making spiritual entertainment more selective and convenient. People can search for the video information they want to watch directly from the website and click to view it. Therefore, it is necessary to develop a low-cost, easy to maintain, and highly scalable online video website. The B/S system with a front and back end separation architecture fully meets all the requirements of the system, so the online video website system selects a front and back end separation system based on the B/S architecture.

This system can meet the basic requirements of online video viewing business, and the development of the system makes video business more efficient and accurate. The development of this system adopts a method of separating the front-end and back-end architectures. The front-end uses the Vue framework, and uses the ElementUI to assist in the development of page styles. This lightweight and convenient framework makes development more efficient and convenient. The backend uses the SpringBoot framework for development, simplifying the framework's configuration files, using the framework's automatic configuration form, and using it out of the box, reducing bloated xml configuration, and facilitating system development and maintenance. The data is based on the mainstream MySQL database in the current market, which is safe, free, and powerful.

This article mainly introduces an online video system based on the SpringBoot framework, including system requirements analysis, system design, system implementation, system debugging, and testing.

Key Words: B/S structure, Vue, SpringBoot, video system, front and rear end separation

目  录

第 1 章 绪论 1

1.1 论文研究主要内容 1

1.1.1 系统概述 1

1.1.2 系统介绍 1

1.2 本文内容组织 2

本文内容主要安排如下: 2

第 2 章 关键技术介绍 3

2.1 关键性开发技术的介绍 3

2.1.1 Spring Boot框架 3

2.1.2 Vue.js框架 3

2.1.3 Maven 3

2.2 其它相关技术 4

2.2.1 Axios 4

2.2.2 ElementUi框架 4

第 3 章 系统分析 5

3.1 构架概述 5

3.1.1 前台模块 5

3.1.2 后台模块 5

3.2 系统开发环境 5

3.3 系统任务的可行性分析 5

3.3.1 经济可行性 5

3.3.2 技术可行性 6

3.3.3 系统的可行性 6

3.4 本章小结 6

第 4 章 系统设计 6

4.1 系统架构 6

4.1.1 用户模块 6

4.1.2 管理员模块 6

4.2 实体ER图 7

4.3 数据库设计 8

4.4 本章小结 9

第 5 章 系统实现 10

5.1 用户登录 10

5.1.1 页面 10

5.1.2 核心代码 10

5.2 个人中心 11

5.2.1 页面 11

5.2.2 核心代码 11

5.3 视频详情 12

5.3.1 页面 12

5.3.2 核心代码 12

5.4 后台登录 13

5.4.1 页面 13

5.4.2 核心代码 13

5.5 后台用户管理 14

5.5.1 页面 14

5.5.2 核心代码 14

5.6 用户点击播放量 15

5.6.1 页面 15

5.6.2 核心代码 15

第 6 章 系统测试 15

6.1 系统测试 15

6.2 测试方法 16

6.3 测试用例 16

6.3.1 系统功能测试结果表 16

第 7 章 结论 17

参考文献 18

致  谢 19

• 1 章 绪论
  1. 论文研究主要内容

在线视频系统，是用于提供给广大上网用户一个免费在线观看视频的一个系统。前台页面的主要功能有首页视频数据展示、个人中心、消息中心、视频上传、视频详情、登录。后台的主要功能有登录、用户列表、用户点击播放、审核视频、分类管理、首页等。方便用户观看视频以及上传分享视频。平台管理员可以更加高效化信息化的视频平台。

1. 1. 1. 系统概述
      2. 系统介绍

系统主要分为前台视频观看系统和后台管理系统。系统主要有两个角色用户端和系统管理员端。

用户端的主要功能有：

1. 查看首页视频展示列表。
2. 可以查看自己的个人中心。
3. 可以查看自己的消息中心。
4. 可以上传一些自己想分享的视频到在线视频平台。
5. 可以观看平台的在线视频，可以评论，点赞和收藏。
6. 输入账号和密码登录视频平台。
7. 在视频平台注册账号。

管理员端的主要功能有：

1. 输入账号密码登录后台管理系统。
2. 可以查看平台的用户列表，对用户的数据进行增删改查操作。
3. 可以查看平台用户的视频点击播放量。
4. 对平台用户上传的视频进行审核管理。
5. 对平台的视频内容进行分类管理。
   1. 本文内容组织

本文内容主要安排如下:

1. 第一章主要讲论文主要研究的内容。
2. 第二章主要对系统使用的技术进行介绍。
3. 第三章主要讲述了系统的分析。
4. 第四章讲述了系统的设计。
5. 第五章讲述了系统的实现。
6. 第六章讲述了系统的测试。
7. 第七章结论。
8. 

9. @RequestMapping("login")
   public MsgResponse login(@RequestBody Admin admin, HttpSession session) {
       Admin admin1 = adminUserService.login(admin);
       if (admin1 == null) {
           return MsgResponse.fail("密码错误");
       }
       session.setAttribute("admin", admin);
       return MsgResponse.success("登录成功", null);
   }

   @RequestMapping("userLogin")
   @ResponseBody
   public ResultDTO login(String userTel, String password, String aCode, HttpSession session,Model model) {
   
       ResultDTO<TUser> res = userService.login(userTel, password);
       if (res.getResult()) {
           String randomCode = (String) session.getAttribute(ValidateCode.RANDOMCODEKEY);
           if (!aCode.equalsIgnoreCase(randomCode)) {
               //equalsIgnoreCase方法忽略大小写判断
   
               res.setMessage("验证码错误");