基于SpringBoot的个人博客系统设计与实现
管理员可以对博客进行添加，删除，修改，查询操作。普通访客可以查看所有的博客，所有的分类，所有的标签，可以评论博客，可以查询博客，可以打赏管理员。管理员可以对博客进行添加，删除，修改，查询操作。个人博客系统是部署在云上的web项目，只要登录浏览器就可以访问，况且本系统跟很多博客系统类似。前端方面：核心框架为SemanticUi，基础为html，css，js，jq。首页:博客分页列表，展示Top标签，
摘 要
作为计算机的学生，我们学习的方法是通过老师，书籍，论文等。对很多从事计算机方面的人来说，他们学习知识是通过官方文档，以及相关博客。现在知名博客网站有很多，比如CSDN，博客园，还有全球最知名的Github。其中我也在这几个博客中写过一些文章，分享自己学习的成果。因此我在想为什么不自己打造一个属于自己的博客呢。
我的博客系统是采用SpringBoot、SpringMvc、Spring、SpringDataJPA等技术栈编写的，数据库采用MySQL。架构方式是采用MVC三层架构方式。管理员可以对博客进行添加，删除，修改，查询操作。游客可以查看管理员编辑的博客，并可以评论，打赏。最后通过测试跟负载均衡完善最终需求。
关键词：SpringBoot;Github;MVC
introduction
As computer students, we learn by teachers, books, papers, etc. For many people engaged in computer science, they learn knowledge through official documents and related blogs. Now there are many well-known blog sites, such as CSDN, blog Park, and the world’s most famous GitHub. Among them, I also wrote some articles in these blogs to share my learning achievements. So I wonder why not build a blog of my own.
My blog system is written by spring boot, spring MVC, spring, spring datajpa and other technology stacks, and the database is mysql. MVC three-tier architecture is adopted. Administrators can add, delete, modify and query blogs. Visitors can view the blog edited by the administrator, and can comment and reward. Finally, the final requirement is improved by testing and load balancing.
Keywords: SpringBoot;Github;MVC
目 录
设计总说明 I
introduction II
1 绪论 1
1.1 系统的概述 1
1.2 系统的研究背景 1
2 需求分析 2
2.1 系统需求分析 2
2.2 可行性分析 2
2.2.1 技术可行性 2
2.2.2 经济可行性 2
2.2.3 操作可行性 2
2.3 开发及运行环境 2
3 总体设计 3
3.1 系统功能结构图 3
3.1.1 数据库表概要 3
3.2 数据库表设计 4
3.3 配置文件详情 6
4 系统详细设计 7
4.1 登录界面 7
4.2 游客操作 7
4.2.1 博客查看 7
4.2.2 分类查看 8
4.2.3 标签查看 9
4.2.4 归档查看 10
4.2.5 查看作者 11
4.2.6 搜索博客 11
4.3 管理员操作 12
4.3.1 博客管理 12
4.3.2 分类管理 15
4.3.3 标签管理 18
5 系统测试 21
5.1测试的必要性 21
5.1.1 目的 21
5.2测试过程 21
5.2.1 白盒测试 21
5.3测试结果 23
5.4项目部署 23
5.5负载均衡测试 24
总 结 25
鸣 谢 26
参考文献 27
2需求分析
2.1系统需求分析
个人博客系统主要分为两个角色:普通访客，管理员。普通访客可以查看所有的博客，所有的分类，所有的标签，可以评论博客，可以查询博客，可以打赏管理员。管理员可以对博客进行添加，删除，修改，查询操作。可以对分类进行添加，删除，修改，查询操作。可以对标签进行添加，删除，修改，查询操作。
2.2可行性分析
2.2.1技术可行性
技术可行性，利用现在我们学到的技术是否能够完成个人博客系统。 技术可行性分为硬件和软件两个方面：
后端方面：以java为开发语言，以tomcat作为服务器，以mysql作为数据库。技术路线是以Springboot框架为基础驱动SpringMVC+Spring+SpringDataJpa框架。
前端方面：核心框架为SemanticUi，基础为html，css，js，jq。
2.2.2经济可行性
个人博客系统的开发，主要花费的地方在于部署到服务器上。服务器采用阿里云，对于学生来说，一个月只需要10块钱作为服务器的使用费用。对于花费来说，这个开销是可以接受的。并且只有这一个唯一的开销。因此个人博客系统在经济上是可行的。
2.2.3操作可行性
个人博客系统是部署在云上的web项目，只要登录浏览器就可以访问，况且本系统跟很多博客系统类似。只要操作过其他博客系统，可以轻松上手。若是没操作过的人，只要看一遍说明文档也是可以轻松上手。因此个人博客系统在操作上是可行的。
2.3开发及运行环境
硬件资源:CPU为i7-8550u，内存16GB
软件资源：1、w10操作系统。2、数据库：mysql。3、开发工具：IDEA。4、谷歌浏览器。
3总体设计
3.1系统功能结构图
本系统主要分为两大用户模块，游客和管理员。下面针对两大用户作具体的操作功能进行介绍。
管理员:
博客管理:发布博客，修改博客，删除博客，查询博客
分类管理:新增分类，修改分类，删除分类，查询分类
标签管理:新增标签，修改标签，删除标签，查询标签
游客:
首页:博客分页列表，展示Top标签，展示Top分类，最新博客推荐，博客详情
分类:展示所有分类，展示多个分类下博客列表，博客详情
标签:展示所有标签，展示单个标签对应博客列表，博客详情
归档:按年度时间线展示博客列表，博客详情
本文转载自http://www.biyezuopin.vip/onews.asp?id=14662
以下是系统各功能模块的结构,如下图3-1所示：
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>Dimple个人博客系统后台首页</title>
<meta name="keywords" content="Dimple个人博客系统，边小丰的个人博客">
<meta name="description" content="边小丰的个人博客，专注Java技术">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<link th:href="@{favicon.ico}" rel="stylesheet"/>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>
<link th:href="@{/css/skins.css}" rel="stylesheet"/>
<link th:href="@{/dimple/css/ui.css}" rel="stylesheet"/>
<style type="text/css">
.nav > li:hover .dropdown-menu {
display: block;
}
#content-main.max {
height: calc(100% - 110px);
overflow: hidden;
width: 100%;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
z-index: 9998;
margin: 0;
}
</style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden"
th:classappend="${@config.getKey('sys.index.skinName')}">
<div id="wrapper">
<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="nav-close">
<i class="fa fa-times-circle"></i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="logo">
<span class="logo-lg">Dimple Blog</span>
</li>
<li>
<div class="user-panel">
<a class="menuItem" title="个人中心" th:href="@{/system/user/profile}">
<div class="hide" th:text="个人中心"></div>
<div class="pull-left image">
<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}"
class="img-circle" alt="User Image">
</div>
</a>
<div class="pull-left info">
<p>[[${user.loginName}]]</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
<a th:href="@{logout}" style="padding-left:5px;"><i class="fa fa-sign-out text-danger"></i>
注销</a>
</div>
</div>
</li>
<li class="active">
<a href="/dashboard/main" class="menuItem"><i class="fa fa-home"></i> <span class="nav-label">主页</span> </a>
</li>
<li th:each="menu : ${menus}">
<a href="#">
<i class="fa fa fa-bar-chart-o" th:class="${menu.icon}"></i>
<span class="nav-label" th:text="${menu.menuName}">一级菜单</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse">
<li th:each="cmenu : ${menu.children}">
<a th:if="${#lists.isEmpty(cmenu.children)}" class="menuItem" th:utext="${cmenu.menuName}"
th:href="@{${cmenu.url}}">二级菜单</a>
<a th:if="${not #lists.isEmpty(cmenu.children)}" href="#">[[${cmenu.menuName}]]<span
class="fa arrow"></span></a>
<ul th:if="${not #lists.isEmpty(cmenu.children)}" class="nav nav-third-level">
<li th:each="emenu : ${cmenu.children}"><a class="menuItem" th:text="${emenu.menuName}"
th:href="@{${emenu.url}}">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1">
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2" style="color:#FFF;" href="#" title="收起菜单">
<i class="fa fa-bars"></i>
</a>
</div>
<ul class="nav navbar-top-links navbar-right welcome-message">
<li><a title="技术支持" href="/"><i
class="fa fa-tv"></i> 前台</a></li>
<li><a title="技术支持" href="mailto:bianxiaofeng@sohu.com?subject='DimpleBlog 系统反馈'" target="_blank"><i
class="fa fa-question-circle"></i> 技术支持</a></li>
<li><a title="全屏显示" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏显示</a></li>
<li class="dropdown user-menu">
<a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}"
class="user-image">
<span class="hidden-xs">[[${user.userName}]]</span>
</a>
<ul class="dropdown-menu">
<li class="mt5">
<a th:href="@{/system/user/profile}" class="menuItem">
<i class="fa fa-user"></i> 个人中心</a>
</li>
<li>
<a onclick="resetPwd()" class="menuItem">
<i class="fa fa-key"></i> 修改密码</a>
</li>
<li class="divider"></li>
<li>
<a th:href="@{logout}">
<i class="fa fa-sign-out"></i> 退出登录</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="row content-tabs">
<button class="roll-nav roll-left tabLeft">
<i class="fa fa-backward"></i>
</button>
<nav class="page-tabs menuTabs">
<div class="page-tabs-content">
<a href="javascript:;" class="active menuTab" data-id="/dashboard/main">主页</a>
</div>
</nav>
<button class="roll-nav roll-right tabRight">
<i class="fa fa-forward"></i>
</button>
<div class="btn-group roll-nav roll-right">
<button class="dropdown J_tabClose" data-toggle="dropdown">
页签操作<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu dropdown-menu-right">
<li><a class="tabCloseCurrent" href="javascript:void();">关闭当前</a></li>
<li><a class="tabCloseOther" href="javascript:void();">关闭其他</a></li>
<li><a class="tabCloseAll" href="javascript:void();">全部关闭</a></li>
<li><a class="tabMaxCurrent" href="javascript:void();">全屏显示</a></li>
</ul>
</div>
<a href="#" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
</div>
<a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a>
<div class="row mainContent" id="content-main">
<iframe class="Dimple_iframe" name="iframe0" width="100%" height="100%" data-id="/dashboard/main"
th:src="@{/dashboard/main}" frameborder="0" seamless></iframe>
</div>
<div class="footer">
<div class="pull-right">© [[${copyrightYear}]] Dimple Copyright</div>
</div>
</div>
<!--右侧部分结束-->
</div>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/dimple/js/ui.js}"></script>
<script th:src="@{/dimple/index.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:inline="javascript">
var ctx = [[@{
/}]];
/*用户管理-重置密码*/
function resetPwd() {
var url = ctx + 'system/user/profile/resetPwd';
$.modal.open("重置密码", url, '800', '500');
}
</script>
</body>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
7
1- 0
已为社区贡献29条内容
所有评论(0)