Design and Implementation of Online Video Website Based on SSM

Table of contents

1 Introduction 1
1.1 Project background 1
1.2 Project research purpose and significance 1
1.3 Domestic and foreign research status 2
1.3.1 Domestic research status 2
1.3.2 Foreign research status 2
1.4 Thesis work content and structure arrangement 3
1.4.1 Thesis work content 3
1.4 .2 Paper Structure Arrangement 3
2 Feasibility Analysis and Key Technology Introduction 4
2.1 Technical Feasibility 4
2.2 System Operation Feasibility 4
2.3 System Key Technology Introduction 4
2.3.1java Language 4 2.3.2
Eclipse IDE Tool 5
2.3.3spring 5
2.3.4springMVC 5
2.3.5 mybatis 6
2.3.6 AJAX 6
3 System requirements analysis 7
3.1 System business process 7
3.2 System functional requirements 8 3.3
System user permissions 9
3.4 System non-functional requirements 9
3.4.1 System data security 9
3.4.2 System operation Status 10
4 System Design and Implementation 10
4.1 System Design Objectives and Principles 10
4.2 System Function Design 11
4.3 Database Design 12
4.3.1 Database Conceptual Model Design 12
4.3.2 Database logic model design 13
4.3.3 Database table design 14
4.4 System function module realization 15
4.4.1 User login and logout 15
4.4.2 User registration module 16
4.4.3 Video upload 17
4.4.4 Personal information module 17
4.4 .5 Video Management Center Module 18
4.5.6 Online Video Play Module 19
4.5.7 Administrator Login Module 20
4.5.8 Video Management Module 22
4.5.9 User Management Module 24
4.5.10 Rights Management Module 24
5 System Test 25
5.1 User Login module test 26
5.2 User registration module test 26
5.3 Video upload module test 27
5.4 Personal information module test 28
5.5 Video management module test 28
5.6 Administrator login module test 29
5.7 Background video management module test 30
5.8 Background user management module test 30
6 Conclusion 31
6.1 Summary 31
6.2 Future Work Outlook 31
Acknowledgments 32
References 33 Appendix
34
1 Key Code 34
1.1 Framework Configuration File 34
1.2 Key Classes 37
3 System requirements analysis
3.1 System business process
insert image description here

Figure 3-1 User business flow chart

前台系统的使用对象主要是用户,用户在前台系统中的主要业务是进行用户登录、注册、退出等基本操作;用户的个人中心主要包含三个业务流程:查看个人信息、修改个人信息、对个人上传的视频进行管理;在影片管理业务流程里,分为四个子流程:搜索视频、上传个人新视频、对已经上传好的视频进行编辑修改、删除个人视频。

insert image description here

Figure 3-2 Administrator business flow chart

系统的管理员分为三种角色:视频管理员、用户管理员、权限管理员。每个角色都设置了特定的权限,分别对网站进行整体管理。
视频管理员:负责对网站的视频进行管理,包括视频上传,首页轮播视频管理,电影、电视剧、动漫、综艺等类别的视频进行编辑、删除等操作。
用户管理员:查看网站的用户列表,对用户上传的视频进行审批、删除等管理。
权限管理员:对后台系统的账户进行管理,增加新账户、对各个账户进行权限管理。

3.2 Functional requirements of the system
The purpose of the online video website is to realize the functions of meeting the daily needs of film and television drama fans such as online video playback, video upload and download. In order to achieve this goal, the following system functions are proposed for the system:
(1) It can play videos online, so that users can play videos online regardless of whether they log in or not, and at the same time realize the playlist function.
(2) It enables users to view and modify personal information, which facilitates the management of personal accounts.
(3) Allow users to upload their own videos, and at the same time perform operations such as editing, searching, deleting, and playing the uploaded videos.
(4) It is possible for the administrator to edit, delete, add, etc. the homepage carousel videos, and at the same time make popular rankings for the TV dramas and movies on the homepage according to the number of views.
(5) It is possible for administrators to add, delete, modify and check videos such as movies, TV dramas, animations, and variety shows.
(6) The administrator can manage the approval and deletion of the user's video.
(7) It can realize the management of modifying the authority of the administrator and adding accounts.
3.3 System User Permissions
Online video sites require video administrators to log in and perform operations such as adding, deleting, modifying, and checking videos on the site, which is a prerequisite for realizing the online video playback function of the site. The video administrator first sets the video as a carousel video on the homepage, uploads videos such as movies, TV dramas, animations, and variety shows to form website videos. Only users can search, play and other functions for these videos. After logging in, users can modify their personal information, upload, edit, delete and manage personal videos.
There are mainly the following types of system users:
(1) Permission administrators: add accounts, delete accounts, and authorize management of existing accounts in the background management system.
(2) Video administrator: Add, modify, and delete videos on the homepage of the website, and manage videos such as TV series, movies, animation, and variety shows, such as query, deletion, and addition.
(3) User administrator: query the user list of the website, and approve and manage the videos uploaded by users.
(4) User: Users can log in and register, query and modify personal information, upload videos, modify and delete uploaded videos, and perform operations such as online playback and download of videos on the website and their own videos.
3.4 System non-functional requirements
3.4.1 System data security
When system users perform data-related operations such as adding, deleting, and modifying, the system must ensure data security and reliability. Therefore, the system must have the following functions: (1) Confirmation and
solicitation before operation : When the user modifies, deletes and other sensitive operations on the information, the confirmation must be sent to the user again before submission to prevent data loss caused by misoperation.
(2) Data accuracy verification: When the user fills in the information, the user will be clearly prompted for the data format, type, etc., and at the same time be prompted for incorrect data input, so as to avoid inaccurate data being saved in the database.
(3) Redundancy and uniqueness of data: When a user registers, ajax is used for asynchronous refreshing to prevent the user name entered by the user from being duplicated with the original user name, resulting in data redundancy and confusion. In order to ensure the uniqueness of the data, UUID is automatically generated for fields with unique identifiers such as the primary key to ensure the uniqueness of the data.
3.4.2 System running status
In order to ensure that the website can reliably serve people's needs such as watching videos. The system must be able to withstand long-term operation and complete the functional requirements of the system efficiently and stably. The website system must meet the following requirements:
(1) The system structure design is reasonable.
The website system uses java as the development language, which meets the restriction requirements of no operating system and realizes cross-system functions. Using SSM with stable performance and high efficiency as the overall framework of the background realizes the decoupling of each module and each level without interdependence and meets the needs of later system updates. The website system has high maintainability and scalability.
(2) Highly maintainable and open.
Since the online video website is a system that is continuously updated, this system provides an interface for external development, so that the system can be improved and updated in the future.
(3) High system security.
The system is used by a large number of users, so the system security must be highly secure. For the user's information, such as the user's password and other private information, the MD5 encryption algorithm is used to encrypt the database design, so as to ensure the security of the user information. This article is reproduced from http://www.biyezuopin.vip/onews.asp?id=12476 For the background system management of the website, authority management is adopted. Realized that different roles have different operation permissions, and restricted access to different businesses.
4 System design and implementation
The design and implementation of the system is to transform the user's needs into the thinking mode of programming. In order to standardize the development of symbols, it is necessary to carry out detailed design for each functional module, and at the same time carry out corresponding database design for each module. The links between the various modules are associated and not dependent.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<c:set var="cxtPath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="url" value="pictureUrl?url=E:/myvod/img/admin/"></c:set>
<html>
<head>
<title>在线视频</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="在线视频网站" />
<link href="css/indexMovie.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- start plugins -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<link rel="stylesheet" href="css/baidulogin.css" />
<script src="${cxtPath}/js/user.js"></script>
<script>
	$(function() {
		$("#slider").responsiveSlides({
			auto : true,
			nav : true,
			speed : 500,
			namespace : "callbacks",
			pager : true,
		});
	});
</script>

</head>

<body>
	<script type="text/javascript" src="js/baidulogin.js"></script>
	<div class="container">
		<div class="container_wrap">
			<!--顶部-->
			<div class="header_top">
				<div class="col-sm-3 logo" style="margin-top: -2%">
					<img src="${cxtPath}/images/logo.png" alt="logo" title="sheep影音"/>
				</div>
				<div class="col-sm-5 nav" style="margin-top: -0.5%">
					<ul>
						<li><span class="simptip-position-bottom simptip-movable"
							data-tooltip="电影"><a href="${cxtPath}/getMovieByCategory?category=1">
							</a></span></li>
						<li><span class="simptip-position-bottom simptip-movable"
							data-tooltip="电视剧"><a
								href="${cxtPath}/getMovieByCategory?category=2"> </a> </span></li>
						<li><span class="simptip-position-bottom simptip-movable"
							data-tooltip="动漫"><a href="${cxtPath}/getMovieByCategory?category=3">
							</a></span></li>
						<li><span class="simptip-position-bottom simptip-movable"
							data-tooltip="综艺"><a
								href="${cxtPath}/getMovieByCategory?category=4"> </a></span></li>
					</ul>
				</div>
				<div class="col-sm-4 header_right">
					<ul class="header_right_box">
						<li><c:if test="${user!=null}">
								<p>
									<a href="${cxtPath}/jsp/user/personalCenter.jsp"> <img
										src="${cxtPath}/${user.userPriceUrl}" alt="头像" title="个人中心"
										style="border-radius: 50%;" width=32px height=32px /> <font
										color="#31B0D5" size="4" title="个人中心">${user.userName}</font></a>
									&nbsp;&nbsp;|&nbsp;&nbsp; <a href="${cxtPath}/userLogout">
										<font color="#31B0D5" size="4" title="退出登录">退出</font>
									</a>
								</p>
							</c:if> <c:if test="${user==null}">
								<p>
								<div class="link">
									<a href="javascript:showDialog();"> <font color="#31B0D5"
										size="4" title="登录">登录</font>
									</a>|&nbsp;&nbsp;&nbsp;| <a href="register.jsp"> <font
										color="#31B0D5" size="4" title="注册">注册</font>
									</a>
								</div>
								</p>
							</c:if></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>

			<!--弹出-->
			<div class="ui-mask" id="mask" onselectstart="return false"></div>
			<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
				<div class="ui-dialog-title" id="dialogDrag"
					onselectstart="return false;">
					登录通行证 <a class="ui-dialog-closebutton"
						href="javascript:hideDialog();"></a>
				</div>
				<div class="ui-dialog-content">
					<form action="${cxtPath}/userLogin" method="post" id="loginForm"
						onsubmit="return check(this)">
						<div class="ui-dialog-l40">
							<input class="ui-dialog-input ui-dialog-input-username"
								id="userName" type="input" placeholder="用户名" value=""
								name="userName" />
						</div>
						<div style="height: 25px;">
							<font color="red" id="username_span"></font>
						</div>
						<div class="ui-dialog-l40">
							<input class="ui-dialog-input ui-dialog-input-password"
								id="userPassword" type="password" placeholder="密码" value=""
								name="userPassword" />
						</div>
						<div style="height: 25px;">
							<font color="red" id="userPassword_span"></font>
						</div>
						<div class="ui-dialog-l41">
							<input type="test" placeholder="验证码" value="" name="vcode"
								id="codeid" /> <img id="code" src="${cxtPath}/vcode"
								onclick="checkcode()" height="40px">
						</div>
						<div style="height: 25px;">
							<font color="red" id="vodespan"></font>
						</div>
						<div>
							<input type="submit" value="登录" class="ui-dialog-submit" />
						</div>
						<div class="ui-dialog-l40" style="float: left;">
							<a href="#">忘记密码</a>
						</div>
						<div class="ui-dialog-l40" style="float: right;">
							<a href="register.jsp">立即注册</a>
						</div>
					</form>
				</div>
			</div>
			<!--弹出 end-->


			<!--轮播-->
			<div class="slider">
				<div class="callbacks_container">
					<ul class="rslides" id="slider">
						<c:forEach var="slider" items="${sliders}">
							<li><img
								style="position: relative; width: 1194px; height: 497px"
								src="${cxtPath}/${url}${slider.id}${slider.sliderImage}"
								class="img-responsive" alt="${slider.movieName}" /> <label
								style="position: relative;"> <font color="#FFFFF"
									size="4">上映时间:</font> <span class="m_1"> <f:formatDate
											value="${slider.showTime}" pattern="yyyy-MM-dd" />
								</span> &nbsp;&nbsp; <font color="#FFFFF" size="4">评分:</font> <span
									class="m_1">${slider.grade}</span> &nbsp;&nbsp; <font
									color="#FFFFF" size="4">下载次数:</font> <span class="m_1">${slider.downloads}</span>
									&nbsp;&nbsp; <font color="#FFFFF" size="4">播放次数:</font> <span
									class="m_1">${slider.plays}</span>

							</label>
								<div class="button">
									<a href="${cxtPath}/player?movie=${slider.id}${slider.mvType}"
										class="hvr-shutter-out-horizontal" title="点击播放" >现在就去看</a>
								</div></li>
						</c:forEach>
					</ul>
				</div>

			</div>

			<div class="content">

				<div class="box_1">
					<h1 class="m_2">
						<font color="#FFFFFF" size="7">热门视频</font>
					</h1>
					<!--搜索栏-->
					<div class="search" style="text-align-last: center;">
						<form action="${cxtPath}/searchIndexMovie"  method="post">
							<input type="text" value="万部影片任你挑" onFocus="this.value='';"
								onBlur="if (this.value == '') {this.value ='';}" name="movieName"> <input
								type="submit" value="" title="点击搜索">
						</form>
					</div>
					<div class="clearfix"></div>
				</div>

				<div class="box_2">

					<!--高分电影-->
					<div class="col-md-5 grid_3">
						<br />
						<h3>
							<font color="#DFF0D8">高分电影</font>
						</h3>
						<form>
							<div class="row_1">
								<div class="col-md-6 grid_4">
									<c:forEach var="movie" items="${movies}" begin="0" end="2">
										<br>
										<div class="grid_2">
											<a href="${cxtPath}/player?movie=${movie.id}${movie.mvType}">
												<img src="${cxtPath}/${url}${movie.id}${movie.imgType}"
												class="img-responsive" alt="${movie.movieName}"
												style="width: 200px; height: 183px" title="点击播放"  />
											</a>
										</div>
										<div class="caption1">
											<p class="m_3">
												<a
													href="${cxtPath}/player?movie=${movie.id}${movie.mvType}">${movie.movieName}</a>
											</p>
											<p class="m_4">${movie.message}</p>
										</div>
										<br>
									</c:forEach>
								</div>

								<div class="col-md-6 grid_4">
									<c:forEach var="movie" items="${movies}" begin="3" end="5">
										<br>
										<div class="grid_2">
											<a href="${cxtPath}/player?movie=${movie.id}${movie.mvType}">
												<img src="${cxtPath}/${url}${movie.id}${movie.imgType}"
												class="img-responsive" alt="${movie.movieName}"
												style="width: 200px; height: 183px" title="点击播放" />
											</a>
										</div>
										<div class="caption1">
											<p class="m_3">
												<a
													href="${cxtPath}/player?movie=${movie.id}${movie.mvType}">${movie.movieName}</a>
											</p>
											<p class="m_4">${movie.message}</p>
										</div>
										<br>
									</c:forEach>
								</div>
								<div class="clearfix"></div>
								<br>
								<h4 align="right" style="margin-right: 50px;">
									<a href="${cxtPath}/getMovieByCategory?category=1">更多</a>
								</h4>
							</div>
						</form>
					</div>

					<!--热播电视剧-->
					<div class="col-md-5 content_right grid_3">
						<br />
						<h3 style="margin-left: 18px;">
							<font color="#DFF0D8">热播电视剧</font>
						</h3>
						<div class="row_3">
							<div class="col-md-6 grid_4">
								<c:forEach var="tvplay" items="${tvplays}" begin="0" end="2">
									<br>
									<div class="grid_2">
										<a
											href="${cxtPath}/player?movie=${tvplay.id}${tvplay.mvType}">
											<img src="${cxtPath}/${url}${tvplay.id}${tvplay.imgType}"
											class="img-responsive" alt="${tvplay.movieName}"
											style="width: 200px; height: 183px" title="点击播放" />
										</a>
									</div>
									<div class="caption1">
										<p class="m_3">
											<a
												href="${cxtPath}/player?movie=${tvplay.id}${tvplay.mvType}">${tvplay.movieName}</a>
										</p>
										<p class="m_4">${tvplay.message}</p>
									</div>
									<br>
								</c:forEach>
							</div>

							<div class="col-md-6 grid_4">
								<c:forEach var="tvplay" items="${tvplays}" begin="3" end="5">
									<br>
									<div class="grid_2">
										<a
											href="${cxtPath}/player?movie=${tvplay.id}${tvplay.mvType}">
											<img src="${cxtPath}/${url}${tvplay.id}${tvplay.imgType}"
											class="img-responsive" alt="${tvplay.movieName}"
											style="width: 200px; height: 183px" title="点击播放" />
										</a>
									</div>
									<div class="caption1">
										<p class="m_3">
											<a
												href="${cxtPath}/player?movie=${tvplay.id}${tvplay.mvType}">${tvplay.movieName}</a>
										</p>
										<p class="m_4">${tvplay.message}</p>
									</div>
									<br>
								</c:forEach>
							</div>
							<div class="clearfix"></div>
							<br>
							<h4 align="right" style="margin-right: 50px;">
							<a href="${cxtPath}/getMovieByCategory?category=2">更多</a>
							</h4>
						</div>
					</div>
				</div>

				<!--排行榜-->
				<div class="col-md-2 grid_6">
					<br />
					<h3>
						<font color="#DFF0D8">播放榜</font>
					</h3>
						<c:forEach var="ranking" items="${rankings}" begin="0" end="3">
							<div class="grid_2">
								<a href="${cxtPath}/player?movie=${ranking.id}${ranking.mvType}">
									<img src="${cxtPath}/${url}${ranking.id}${ranking.imgType}"
									class="img-responsive" alt="${ranking.movieName}"
									style="width: 160px; height: 143px" title="点击播放" />
								</a>
							</div>
							<div class="caption1">
								<p class="m_41">${ranking.message}</p>
								<p class="m_31">
									<a href="${cxtPath}/player?movie=${ranking.id}${ranking.mvType}">${ranking.movieName}</a>
								</p>
							</div>
							<br><br>
						</c:forEach>
					<h4 align="right" style="margin-right: 10px;">
						<a href="#">更多</a>
					</h4>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<footer id="footer">
		<div id="footer-3d">
			<div class="gp-container">
				<span class="first-widget-bend"></span>
			</div>
		</div>
		<div id="footer-widgets" class="gp-footer-larger-first-col">
			<div class="gp-container">
				<div class="footer-widget footer-1">
					<div class="wpb_wrapper">
						<img src="images/f_logo.png" alt="" />
					</div>
					<br>
					<p>好看的国产-最新国产-经典国产-国产电影在线网站</p>
					<p class="text">好看的国产-最新国产-经典国产-国产电影在线网站</p>
				</div>
				<div class="footer_box">
					<div class="col_1_of_3 span_1_of_3">
						<h3>友情链接</h3>
						<ul class="first">
							<li><a href="http://www.iqiyi.com" target="_blank">爱奇艺</a></li>
							<li><a href="https://v.qq.com/index.html" target="_blank">腾讯视频</a>
							</li>
							<li><a href="https://www.baidu.com/" target="_blank">百度</a>
							</li>
						</ul>
					</div>
					<div class="col_1_of_3 span_1_of_3">
						<h3>新闻动态</h3>
						<ul class="first">
							<li><a href="#">抢先发布</a></li>
							<li><a href="#">top sellers</a></li>
							<li><a href="#">Specials</a></li>
						</ul>
					</div>
					<div class="col_1_of_3 span_1_of_3">
						<h3>联系我们</h3>
						<ul class="first">
							<li><a href="protocol.html" title="用户协议">关于我们</a></li>
							<li><a href="#">联系方式</a></li>
							<li><a href="${cxtPath}/checkAdmin" title="管理员登录">后台管理</a></li>
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>

				<!--版权声明-->
				<div class="copy" align="center">
					<p>Copyright &copy; 2015-2020.sheep.</p>
				</div>
				<div class="clearfix"></div>

			</div>
		</div>
		</footer>

	</div>
</body>
</html>

insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/sheziqiong/article/details/127526342