目 录
1 绪论 6
1 系统概述 7
1.1 CloudDemo系统设计分析图 7
1.2 系统架构设计 7
1.3 文件组织结构 8
2 相关技术 9
2.1后端技术 9
2.1.1 MVC设计模式 9
2.1.2 Maven项目构建 9
2.1.3 阿里巴巴德鲁伊（Druid）数据库连接池 9
2.2前端框架 10
2.2.1 Jquery 10
2.2.2 Bootstrap 10
2.2.3 Layui 10
2.2.4 H-ui 10
2.3开源工具 10
2.3.1 UEditor 10
2.3.2 Wangeditor 11
2.3.3 Echarts 11
3 需求分析与设计 11
3.1需求分析 11
3.1.1 网站功能描述 11
3.1.2 用例图 11
3.2 网站的总体功能设计 12
3.2.1网站的功能框图 13
3.2.2 CloudDemo网络问答系统前台功能分析 14
3.2.3后台管理系统功能分析 15
3.3数据库设计 16
3.3.1 CloudDemo物理数据模型-Physical Data Modal 16
3.3.2 CloudDemo数据库数据模型 17
3.3.2 网站实体描述 17
3.3.2 实体关系的设计 21
3.3.3 数据库表的设计 22
4 详细设计 27
4.1 CloudDemo网络问答系统前台功能流程图 27
4.1.1 登陆、注册流程图 27
4.1.2 用户提问问题流程图 28
4.1.3 用户回答流程图 30
4.1.4 用户举报流程图 31
5 系统实现 32
5.1 前端系统的实现 32
5.1.1注册功能实现 32
5.1.1登录功能实现 32
5.1.2 首页 33
5.1.3 用户提问问题实现 34
5.1.4 问题详情页（回答或关注问题）实现 34
5.2 后台管理系统实现 35
5.2.1 后台管理员登陆与注册功能实现 35
5.2.2 后台高级管理员功能实现 36
5.2.3 Echarts对网站统计的数据动态处理实现 37
5.2.4 后台日志管理（注册日志、用户操作日志）实现 37
3.2.2 CloudDemo网络问答系统前台功能分析
1.登录和注册
为了严控本系统，要求所有用户必须经过注册才有权限登录进该系统拥有相关权限，因此只提供通过登录才可以访问本系统。
2.个人信息管理
已注册用户登录之后在关于我界面可以进行界面的管理包括用户头像、真实姓名、性别、个性签名等相关个人信息的修改，同时非个人信息可以展现给其他用户。
3.提问管理
用户通过提问界面可以进行提问，需填写提问的标题、描述以及选择所属的分类。该分类已经实现通过系统自动生成。提问后一旦有其他用户回答则向提问用户进行提醒。
4.回答问题
用户通过热门推荐的问题可以点击问题即可以来到问题详情界面，其中展示包括其他用户的回答，用户也可以在问题的回答编辑器中进行回答。
5.关注问题或用户
用户可以在问题详情界面选择关注问题，一旦该问题有新的回答将通过系统自动通知关注的用户，用户关注某一用户则该用户的动态（提出问题、回答问题、收藏回答…）将自动进入关注用户的信息提示界面。
6.评论、点赞、举报管理
用户可以对某一个问题下的回答进行评论，同时其他用户也可以在此评论下进行评论；用户对所喜欢的回答可以进行点赞，点赞量是某一个回答能够被选到热门推荐下面的标准；用户如果认为某一个问题或者回答出现违规问题可以进行举报同时提交举报内容该举报将提交到后台管理模块由管理员进行处理，处理完毕后将处理的结果进行逻辑回执。
3.2.3后台管理系统功能分析
1.网站信息统计
信息统计包括直接在动态图中显示的两个指标（站点访问量、用户活跃度）以及两张详细的网站日志表（注册日志统计和用户操作日志统计）。本文转载自http://www.biyezuopin.vip/onews.asp?id=15244通过四大统计数据的显示可以让管理员准确的直到网站在哪个时间段访问量多哪类内容是用户喜欢的以及从详细的数据日志统计表中可以看到什么人在什么时候干了什么事。
2. 网站管理员管理
后台管理员往往不仅仅有一个人在管理同时可以注册多个账号进行相应业务的处理这里就需要后台提供管理员的注册和登录模块。当在管理员团队有出现异动的情况根据实际对管理员团队进行信息的修改和删除。
<%@ page import="com.niit.clouddemo.pojo.front.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="shortcut icon" href="./backgroundresources/images/bitbug_favicon.ico" />
<%
String contextPath = request.getContextPath();
HttpSession s = request.getSession();
User loginUserInfo = (User)s.getAttribute("loginUserInfo");
String uid = loginUserInfo.getUserid();
%>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CloudDemo首页</title>
<%--引入公共JSP页面--%>
<%@ include file="jsp/common.jsp"%>
<%--引入首页样式--%>
<link rel="stylesheet" href="<%=contextPath%>/frontresources/assets/css/index.css"/>
</head>
<body>
<%--<div class="heart" id="like1" rel="like"></div> <div class="likeCount" id="likeCount1">14</div>--%>
<%--<script type="text/javascript">--%>
<%-- $(document).ready(function(){--%>
<%-- $('body').on("click",'.heart',function(){--%>
<%-- var A=$(this).attr("id");--%>
<%-- var B=A.split("like");--%>
<%-- var messageID=B[1];--%>
<%-- var C=parseInt($("#likeCount" + messageID).html());--%>
<%-- $(this).css("background-position","")--%>
<%-- var D=$(this).attr("rel");--%>
<%-- if(D === 'like') {--%>
<%-- $("#likeCount"+messageID).html(C+1);--%>
<%-- $(this).addClass("heartAnimation").attr("rel","unlike");--%>
<%-- }--%>
<%-- else{--%>
<%-- $("#likeCount"+messageID).html(C-1);--%>
<%-- $(this).removeClass("heartAnimation").attr("rel","like");--%>
<%-- $(this).css("background-position","left");--%>
<%-- }--%>
<%-- });--%>
<%-- });--%>
<%--</script>--%>
<div class="layui-card" style="padding-top: 20px">
<div class="layui-container">
<div id="header" class="layui-row layui-col-space30">
<%--左侧内容区--%>
<div class="layui-col-md8">
<div class="layui-row layui-col-space10">
<%--标志--%>
<div class="layui-col-md2">
<img src="<%=contextPath%>/frontresources/assets/images/webimages/yunzhi.png" />
</div>
<%--首页--%>
<div class="layui-col-md2">
<button class="layui-btn layui-btn-primary" onclick="loadIndex();">首页</button>
</div>
<%--搜索--%>
<div class="layui-col-md5">
<input type="text" id="words" name="words" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
</div>
<%--提问--%>
<div class="layui-col-md3">
<button class="layui-btn layui-btn-primary" onclick="search();">搜索</button>
<button class="layui-btn layui-btn-normal" onclick="addQuestion(<%= uid%>);">提问</button>
</div>
</div>
</div>
<%--右侧内容区--%>
<div class="layui-col-md4">
<%--个人信息--%>
<div id="userinfo" class="layui-row layui-col-space20">
<div class="layui-col-md2">
<img id="userHeadImg" src="<%=contextPath%>/frontresources/<%=loginUserInfo.getHeadimg()%>" class="userMiddleHead" onclick="showUserPage();"/>
</div>
<div class="layui-col-md10">
<div class="layui-row">
<div class="layui-col-md10" onclick="showUserPage();">
<div class="layui-card">
<div class="layui-card-header" style="height: 20px;line-height: 20px;">
<p id="username" class="indexUserName"><%=loginUserInfo.getUsername()%></p>
</div>
<div class="layui-card-body" style="padding-top:5px;padding-bottom: 0; line-height: 20px; color: #007DDB">
<p id="signature" class="indexUserSignature"><%=loginUserInfo.getSignature()%></p>
</div>
</div>
</div>
<div class="layui-col-md2" >
<button class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top: 20px" onclick="logout();">退出</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-container">
<div id="center" class="layui-row layui-col-space30">
<div class="layui-col-md8">
<%--导航选项卡--%>
<div id="navigation" class="layui-row layui-col-space10">
<div class="layui-tab layui-tab-brief" lay-filter="navigations">
<ul class="layui-tab-title navtab">
<li lay-id="newest" class="layui-this">
<i class="layui-icon layui-icon-star"></i> 最新
</li>
<li lay-id="attention" >
<i class="layui-icon layui-icon-user"></i> 关注
</li>
<li lay-id="recommendation " >
<i class="layui-icon layui-icon-fire"></i> 推荐
</li>
<li lay-id="discovery" >
<i class="layui-icon layui-icon-find-fill"></i> 发现
</li>
<li lay-id="answer" >
<i class="layui-icon layui-icon-edit"></i> 回答
</li>
</ul>
<div class="layui-tab-content" style="padding: 20px 0 0 0">
<!-- 🔴最新内容 -->
<div class="layui-tab-item">
<%--加载问题相关信息--%>
<iframe id="newestQuestionsFrame" src="jsp/newest_questions.jsp"></iframe>
</div>
<!-- 🔴关注内容 -->
<div class="layui-tab-item">内容2</div>
<!-- 🔴热门（推荐）内容 -->
<div class="layui-tab-item layui-show">
<iframe id="hotQuestionsFrame" src="jsp/hot_questions.jsp"></iframe>
</div>
<!-- 🔴提供回答 -->
<div class="layui-tab-item">内容3</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<%--个人提醒--%>
<div id="usertips" class="layui-row">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-release" style="font-size: 25px; color: #1E9FFF;"></i> 消息
<span class="layui-badge-dot layui-bg-blue"></span>
</button>
<button class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-face-surprised" style="font-size: 25px; color: #1E9FFF;"></i> 问题
</button>
<button class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-edit" style="font-size: 25px; color: #1E9FFF;"></i> 回答
</button>
</div>
</div>
<div class="layui-row">
<div class="layui-card" style="height: 200px;width: 100%">
<table class="layui-table">
<tbody>
<tr>
<td>
<i class="layui-icon layui-icon-rate-solid" style="font-size: 25px; color: #77839c;"></i>
我的收藏
</td>
<td class="td_text">
<span class="layui-badge layui-bg-gray">1</span>
</td>
</tr>
<tr>
<td>
<i class="layui-icon layui-icon-face-smile-b" style="font-size: 25px; color: #77839c;"></i>
我的关注
</td>
<td class="td_text">
<span class="layui-badge layui-bg-gray">1</span>
</td>
</tr>
<tr>
<td>
<i class="layui-icon layui-icon-praise" style="font-size: 25px; color: #77839c;"></i>
我的点赞
</td>
<td class="td_text">
<span class="layui-badge layui-bg-gray">1</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="<%=contextPath%>/frontresources/assets/images/advertiseimages/ad09.jpg" alt=""/></div>
<div><img src="<%=contextPath%>/frontresources/assets/images/advertiseimages/ad07.jpg" alt=""/></div>
<div><img src="<%=contextPath%>/frontresources/assets/images/advertiseimages/ad08.png" alt=""/></div>
<div><img src="<%=contextPath%>/frontresources/assets/images/advertiseimages/ad06.jpg" alt=""/></div>
<div><img src="<%=contextPath%>/frontresources/assets/images/advertiseimages/ad02.png" width="120%" alt=""/></div>
<div><img src="<%=contextPath%>/frontresources/assets/images/advertiseimages/ad08.jpg" width="120%" alt=""/></div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
,anim: 'updown' //切换动画方式
});
});
</script>
</div>
</div>
</div>
</div>
</div>
<form id="form" method="post" action="">
</form>
<%--引入逻辑处理JS--%>
<script src="<%=request.getContextPath() %>/frontresources/assets/js/index.js"></script>
</body>
</html>
