目 录
1 绪论 3
2 相关技术 4
2.1后端技术 4
2.1.1 MVC设计模式 4
2.1.2 Maven项目构建 4
2.1.3 阿里巴巴德鲁伊（Druid）数据库连接池 4
2.2前端框架 5
2.2.5 Jquery 5
2.2.6 Bootstrap 5
2.2.7 H-ui 5
2.3开源工具 5
2.3.1 Umeditor 5
2.3.2 Wangeditor 5
2.3.3 Echarts 5
3 需求分析与设计 6
3.1需求分析 6
3.1.1 网站功能描述 6
3.1.2 用例图 6
3.2 网站的总体功能设计 7
3.2.1网站的功能框图 8
3.2.2个人空间系统前台功能分析 9
3.2.3后台管理系统功能分析 9
3.3数据库设计 10
3.3.1 网站实体描述 10
3.3.2 实体关系的设计 14
3.3.3 数据库表的设计 15
4 详细设计 18
4.1 个人空间系统前台功能流程图 18
4.1.1 登陆、注册流程图 18
4.1.2 文章管理流程图 19
4.1.3 相册模块流程图 21
5 系统实现 22
5.1 前端系统的实现 22
5.1.1 登陆、注册功能实现 22
5.1.2 首页 23
5.1.3 公开文章推送实现 24
5.1.4 热门文章推送实现 24
5.1.5 阅读文章、评论文章、点赞文章实现 25
5.1.6 关于我页面个人信息和头像修改实现 26
5.1.7 相册页面实现 27
个人相册模块是用户通过上传图片按钮将放在磁盘中的图片上传到首页，用户所上传的图片将根据时间进行树形展示。 27
5.1.8 文章发布页面的实现 27
5.1.9 文章分类管理页面的实现 28
5.1.10 留言板留言和评论页面实现 29
5.2 后台管理系统实现 29
5.2.1 后台管理员登陆与注册功能实现 29
5.2.2 Echarts对网站统计的数据动态处理实现 30
5.2.5 后台日志管理（注册日志、用户操作日志）实现 31
6 个人实训总结和感悟 31
3.2.2个人空间系统前台功能分析
1.登录和注册
未注册用户以浏览权限浏览网站，只有部分功能，必须先注册网站的账号成功成功并登录进入以后，才会有网站给予注册用户的全部功能的呈现与使用。
2.个人信息管理
已注册用户登录之后在关于我界面可以进行界面的管理包括用户头像、真实姓名、性别、个性签名的修改，展示给其他用户。
3.文章管理
用户可以根据需要创建文章的类别，同时对创建的类别有修改类别名称和删除的权限。用户所创建的文章类别可以在发布文章的界面显示出来以供用户在指定文章类别发布文章。
4.文章发布
注册用户在发布文章界面对文章进行编辑在编辑的过程中包括文章的标题、文章概要、所提供的分类进行分类、发布的文章是否公开、文章的摘要图片以及文章的主体内容部分。
5.留言管理
用户在留言板发布留言并且用户的好友可以对用户进行留言并相互评论留言的内容，所留言的信息为公开的所有已注册用户在获取这个用户名后就可查看此用户的留言但不能进行任何留言或评论。
6.相册管理
用户将想要上传的文件放在磁盘中进行上传，上传的同时选择上传图片的类别进行图片的分类。上传的图片最终根据时间的先后以树形的方式进行展现，用户对不喜欢的图片有权利进行删除。
3.2.3后台管理系统功能分析
1.网站信息统计
信息统计包括直接在动态图中显示的两个指标（站点访问量、用户活跃度）以及两张详细的网站日志表（注册日志统计和用户操作日志统计）。本文转载自http://www.biyezuopin.vip/onews.asp?id=15243
通过四大统计数据的显示可以让管理员准确的直到网站在哪个时间段访问量多哪类内容是用户喜欢的以及从详细的数据日志统计表中可以看到什么人在什么时候干了什么事。
2. 网站管理员管理
后台管理员往往不仅仅有一个人在管理同时可以注册多个账号进行相应业务的处理这里就需要后台提供管理员的注册和登录模块。当在管理员团队有出现异动的情况根据实际对管理员团队进行信息的修改和删除。
3.3数据库设计
3.3.1 网站实体描述
此网站中所涉及的实体共12个。
1.管理员实体
2.文章实体
3.文章评论实体
4.文章分类实体（一篇文章只属于一种类别）
5.留言板实体
6.留言板回复实体
7.相册实体（一张图片可以属于多个类别）
8.站点访问量图示实体
9.用户操作图示实体
10.用户注册日志实体
11.用户操作日志实体
12.用户实体
具体如下：
用户名称（uname），用户密码（upassoword），用户邮箱（umail），uuid（uuid），用户头像存储路径（uimg），用户注册日期（udate），用户性别（ugender），用户真实姓名（urealname），用户个性签名（ubio）。
<%--
Created by IntelliJ IDEA.
User: admin
Date: 2018/11/25
Time: 17:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="Bootstrap/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
<link href="Bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/icon02.png"/>
<title>Cybersapce</title>
</head>
<body bgcolor="black">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-6 column">
<ul class="nav nav-pills">
<li class="active">
<a href="user_login.jsp">登录</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li class="disabled">
<a href="#">信息</a>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">操作</a>
</li>
<li>
<a href="#">设置栏目</a>
</li>
<li>
<a href="#">更多设置</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">分割线</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-6 column">
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li class="active">
Data
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<%@ include file="testFiles/scroll.html"%>
</div>
<%--<div class="row clearfix">--%>
<%--<div class="col-md-12 column">--%>
<%--<div class="carousel slide" id="carousel-753985">--%>
<%--<ol class="carousel-indicators">--%>
<%--<li data-slide-to="0" data-target="#carousel-753985">--%>
<%--</li>--%>
<%--<li data-slide-to="1" data-target="#carousel-753985">--%>
<%--</li>--%>
<%--<li data-slide-to="2" data-target="#carousel-753985" class="active">--%>
<%--</li>--%>
<%--</ol>--%>
<%--<div class="carousel-inner">--%>
<%--<div class="item">--%>
<%--<img alt="" src="images/scroll01%20(1).jpg" width="80%"/>--%>
<%--<div class="carousel-caption">--%>
<%--<h4>--%>
<%--First Thumbnail label--%>
<%--</h4>--%>
<%--<p>--%>
<%--Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta--%>
<%--gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.--%>
<%--</p>--%>
<%--</div>--%>
<%--</div>--%>
<%--<div class="item">--%>
<%--<img alt="" src="images/scroll01%20(2).jpg " width="1920" height="1200"/>--%>
<%--<div class="carousel-caption">--%>
<%--<h4>--%>
<%--Second Thumbnail label--%>
<%--</h4>--%>
<%--<p>--%>
<%--Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta--%>
<%--gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.--%>
<%--</p>--%>
<%--</div>--%>
<%--</div>--%>
<%--<div class="item active">--%>
<%--<img alt="" src="images/scroll01%20(3).jpg" height="520"/>--%>
<%--<div class="carousel-caption">--%>
<%--<h4>--%>
<%--Third Thumbnail label--%>
<%--</h4>--%>
<%--<p>--%>
<%--Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta--%>
<%--gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.--%>
<%--</p>--%>
<%--</div>--%>
<%--</div>--%>
<%--</div>--%>
<%--<a class="left carousel-control" href="#carousel-753985" data-slide="prev"><span--%>
<%--class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control"--%>
<%--href="#carousel-753985"--%>
<%--data-slide="next"><span--%>
<%--class="glyphicon glyphicon-chevron-right"></span></a>--%>
<%--</div>--%>
<%--</div>--%>
<%--</div>--%>
<div class="row clearfix">
<div class="col-md-6 column">
<div class="media">
<a href="#" class="pull-left"><img src="v3/default7.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
<a href="#" class="pull-left"><img src="v3/default8.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
<span class="label label-primary">标签</span>
</div>
<div class="col-md-4 column">
<span class="label label-default">标签</span>
</div>
<div class="col-md-4 column">
<span class="label label-success">标签</span>
</div>
</div>
<div class="media">
<a href="#" class="pull-left"><img src="v3/default7.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
<a href="#" class="pull-left"><img src="v3/default8.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<div class="media">
<a href="#" class="pull-left"><img src="v3/default7.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
<a href="#" class="pull-left"><img src="v3/default8.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<div class="media">
<a href="#" class="pull-left"><img src="v3/default7.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
<a href="#" class="pull-left"><img src="v3/default8.jpg" class="media-object" alt=''/></a>
<div class="media-body">
<h4 class="media-heading">
Nested media heading
</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<ul class="pagination">
<li>
<a href="#">Prev</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</div>
<div class="col-md-6 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"><span
class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="alert alert-dismissable alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>
注意!
</h4> <strong>Warning!</strong> Best check yo self, you're not looking too good. <a href="#"
class="alert-link">alert
link</a>
</div>
<dl>
<dt>
Description lists
</dt>
<dd>
A description list is perfect for defining terms.
</dd>
<dt>
Euismod
</dt>
<dd>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
</dd>
<dd>
Donec id elit non mi porta gravida at eget metus.
</dd>
<dt>
Malesuada porta
</dt>
<dd>
Etiam porta sem malesuada magna mollis euismod.
</dd>
<dt>
Felis euismod semper eget lacinia
</dt>
<dd>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus.
</dd>
</dl>
<div class="panel-group" id="panel-307542">
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-307542"
href="#panel-element-994258">Collapsible Group Item #1</a>
</div>
<div id="panel-element-994258" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-307542"
href="#panel-element-617216">Collapsible Group Item #2</a>
</div>
<div id="panel-element-617216" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>
编号
</th>
<th>
产品
</th>
<th>
交付时间
</th>
<th>
状态
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong>
编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在
<small>Ruby</small>
社区中。
</p>
<img alt="140x140" src="v3/default3.jpg"/>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong>
编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在
<small>Ruby</small>
社区中。
</p>
</div>
</div>
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看