目录
目录
第一章 绪 论 1
1.1 在线视频简介及研究意义 1
1.1.1 在线视频简介 1
1.1.2 在线视频的研究意义 1
第二章 系统分析与总体设计 2
2.1 需求分析 2
2.1.1 功能性需求分析 2
2.1.2 非功能性需求 2
2.2 可行性分析 3
2.2.1 技术可行性 3
2.2.2 经济可行性 3
2.2.3 社会可行性 4
2.3 系统结构设计与功能分析 4
2.3.1 系统结构设计 4
2.3.2 前台功能设计 4
2.4 后台功能设计 5
2.5 系统开发工具和运行环境 5
第三章 数据库设计 7
3.1：数据库关系图 7
3.2：数据库表设计 7
第四章 系统的详细设计与实现 9
4.1 系统界面设计 9
4.2 前台界面详情 10
4.3：后台管理页面 14
第五章 系统的测试 16
5.1 软件测试的目的 16
5.2 软件测试的环境 16
结 论 18
第二章 系统分析与总体设计
2.1 需求分析
2.1.1 功能性需求分析
开发在线视频系统的目的是为提供一个供用户在线自主选择性观看视频节目的平台，为广大观众提供一个在线观看电影，分享个人见解、以及相互交流的一个平台。因此，在线视频系统最基本的功能首先是用户在线视频观看， 其次是其他用户根据所观看视频而发表自己的视频评论等。另外，为了保证论在线视频的整齐性和规章性，用户信息安全性系统还专门提供用户注册和登录的功能。 只有注册的用户登录后才能够在线观看影片和添加评论，没有注册的游客只能够浏览主题的电影信息。
根据用户的需求及以上的简单分析，在线视频需要具备前台功能和后台功能：
(1) 系统前台功能：
未注册用户： 1. 新用户注册 2. 浏览主页 3. 查看电影
已注册用户： 1. 用户登陆 2. 资料修改 3. 购买付费电影 4. 找回密码（用户忘记密码）5. 观看电影 6. 视频评论 7. 视频评分 8. 搜索视频 9 . 用户注销（退出）
(2) 系统后台功能：
管理员：
- 管理员资料管理：管理员信息
- 用户信息管理：会员信息浏览、删除；
- 视频管理（已审核视频，未审核视频，删除视频）
- 评论管理（查找评论并管理）
- 安全退出
- 本站视频的统计概况
2.1.2 非功能性需求
（1）时间特性要求：该软件要求加载页面时间不超过 30 秒，上传下载速度不少于
10kb/s ；
（2）灵活性：要求用户输入简洁，操作方便；
（3）输入输出要求： 1. 用户名称不超过 20 个字符； - 每次评论信息不超过 500 个字符；
（4）数据管理能力要求：必须做到用户同时在线超过万级的规模；
（5）故障处理要求：服务器出现故障，要求需要备份主机，在一分钟之内可以切换。
2.2 可行性分析
可行性分析是基于在系统调查，是否为新系统开发的必要性和可能性，对新系统的研究和发展的分析，从技术，经济，和社会方面，为了避免投资失误，保证新系统的开发价值。 可行性分析的目的在于用最小的投入在最短的时间内保证问题是否可以解决。
2.2.1 技术可行性
技术可行性分析主要分析技术条件是否能够进行开发，硬件、软件条件是否达到研发组的需求等。本在线视频系统运用了 Vue搭建前端框架，运用现在最火的 Browser/Server （浏览器 / 服务器）模式进行开发。 B/S 体系结构比原来的 Client/Server （客户机 / 服务器）体系结构弥补了很多缺点，并且还紧密的结合了互联网技术，这都是互联网技术成长的巨大趋势。数据库服务器选用微软公司的MySQL5.7 数据库，它不仅能够处理大量数据而且还能够保证数据的完整性，并且提供了很多高级功能，MySQL5.7 数据库的灵活性、安全性和易用性为数据库编程创造了优越的条件。那么本系统的软件开发平台条件已基本可行。硬件方面，按照如今计算机发展的速度，硬件发展的速度会更快，信息容量更大，可靠性更高，价格更低，其硬件平台足以满足此系统开发的各种的需要。
2.2.2 经济可行性
经济可行性主要评价项目的经济效益，本在线视频系统模拟的是提供在线视频观看的网络平台， 为观众们提供更多的选择。 但实际只是用于个人的设计， 以模拟为主，不存在过大的资金的流动，所以在经济上是可行的。
2.2.3 社会可行性
随着网络技术、 互联网技术的快速发展， 在线视频已成为人们在线观看视频节目、分享视频资源的主要方式和不可缺少的工具。在视频网上，人们可以对某一视频的看点问题进行评论探讨，视频网上的其用户可以根据自己的喜好上传视频。在线视频系统方便了广大观众选择自己喜欢的视频节目，它早已成为人们网上生活的必备工具。
所以在线视频当今社会的发展是比较重要的，对人们进行信息的传递也是不可或缺的。
<template>
<div>
<el-container style="height: 710px; border: 1px solid #eee">
<el-aside width="250px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1','2','3']"
:unique-opened="true" :router="true">
<el-submenu index="1">
<template slot="title"><i class="el-icon-s-home"></i>Welcome</template>
<el-menu-item index="/index/welcome">欢迎页</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-chat-dot-square"></i>用户中心</template>
<el-menu-item index="/index/userManage">用户管理</el-menu-item>
<el-menu-item index="/index/home">个人中心</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-film"></i>影片中心</template>
<el-menu-item index="/index/addFilm">添加影片</el-menu-item>
<el-menu-item index="/index/filmManage">影片管理</el-menu-item>
<el-menu-item index="/index/typeManage">类型管理</el-menu-item>
<el-menu-item index="/index/filmChart">影片统计</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item index="4-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="4-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="4-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<span style="margin-right: 470px;font-size: 30px;font-family: 楷体;color: #409EFF ">欢迎使用后台管理系统</span>
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<router-link :to="{path:'/index/home'}"> 个人信息</router-link>
</el-dropdown-item>
<el-dropdown-item @click.native="logOut">
<!--<router-link :to="{path:'/login'}"> 退出登录</router-link>-->
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>{
{
$store.getters.user.userName}}</span>
</el-header>
<el-main>
<!--路由出口-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
logOut(){
localStorage.removeItem('Flag');
this.$router.push({
path: '/login'})
}
},
components: {
},
computed: {
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
a {
text-decoration: none;
}
.router-link-active {
text-decoration: none;
}
</style>
