随着互联网技术的快速发展，人们对于网络需求已经是不可缺少的资源了，很多人都有在网上发布留言和写学习感悟的习惯。于是一个界面友好简洁的个人博客系统就能很好的解决这个问题。而本系统设计与实现就非常贴切的解决了这些问题，本系统有简洁的页面布局，和实用的功能模块。作为一个网上冲浪者的门面网站是很合适的。AbstractWith the rapid developments of Internet technology, peoples demand for network has become an indispensable resource, Many people have the habit of publishing messages and writing learning sentiment on the Internet. So a user-friendly and simple personal blog system can solve this problem. The design and implementation of the system is very appropriate to solve these problems, the system has a simple page layout, and practical functional modules. As an online surfers facade website is very suitable.Keywords: HTML+CSS; blog; Spring boot; Semantic UI; java目 录 1一、引言 3（一）开发背景 3（二）选题意义 3（三）设计目的 3二、开发工具 3三、系统分析 3（一）功能需求分析 31．用户 32．管理员 4（二）系统流程分析图 41． 用户权限图 42． 管理员权限图 4四、系统设计 5（一）功能模块设计 51．功能模块设介绍 52．功能结构设计图 5（二）数据库设计 51．数据库概念设计 52．数据库表设计 63．数据库加密 8（三）网站主体设计 91．网站LOGO设计理念 92．色彩搭配设计理念 93．页面布局设计 94．后台界面布局图 10五、系统实现 11（一）前端实现 111．首页 112．文章 *51今日免费论文网|www.jxszl.com +Q: ￥351916072$ 
浏览详情页面 113．分类页面 124．归档页面 135．关于我的页面 13（二）前端核心技术与实现代码 141．前端实现模板代码 142．公示栏实现过程代码 163．后端登录界面 17（三）后端实现 171．后端首页 172．博客文章管理页面 184．分类页面 195．标签页面 206．公示栏页面 207． 数据展示页面 21（四） 后端核心技术与实现代码 23致 谢 30参考文献 31一、引言（一）开发背景随着信息科技的发展人们的生活进入了信息时代，进入了信息时代给人们带来了更多的机会和可能。然而随着信息的剧增人们对信息的获取和信息的筛选上又带来了新的挑战。于是博客网站就慢慢的出现在人们的视野中，在这些站点里大多都是在某一方面有一定建树的人为了记录自己的生活或者工作经验其中包含大量信息，这些信息有着他的可靠性和准确性人们可以直接获取和利用。这样就能大量减少了人们对信息的筛选成本提高工作效率。（二）选题意义随着时代的高速发展，人们的生活也越来越忙碌。同时在获取信息时还需要花去大量的时间在巨量的信息资料中找到有用的信息，无疑是给人们的生活增加了更多的时间成本。长此以往就给人们一种越来越忙的错觉。因此就需要解决这给问题而博客网站的出现也为人们提供了便利，可以在获取信息的同时结交一群志同道合的朋友在以后的生活工作中也少了一些困难。（三）设计目的博客网站已存在于人们生活中不少时间了，但是因为部分博客网站建立的时间过长且没有定时更新和调整而导致了页面的呆板给人一种沉闷压抑之感。使人们越来越没有新鲜感和体验感不便于人们对信息的获取。于是本博客的开发与实现就能避免这些问题所在，同时还能提高信息的安全性和可维护性再次给游客一种耳目一新之感。二、开发工具前端开发工具sublime text3后端开发工具IntelliJ IDEA2021简称（IDEA）数据库开发工具MySQL5.6图片处理工具 Adobe Photoshop 2020简称（PS）开发展示浏览器Microsoft Edge 89.0.774.45三、系统分析（一）功能需求分析本网站主要分为前端和后端两部分。1．用户用户能直接浏览前端所有的展示页面（首页，分类，标签，归档，关于我）
目 录
以留下自己的见解可以直接和作者进行交流，但是留言时需要添加自己的部分信息才能开启发表权限。
分类：可以直接点击头部导航跳转，然后就可以根据自己得需求就行板块的查看。
标签：可以直接点击头部导航跳转，然后根据管理员所添加的标签进行查看浏览。
归档：可以直接点击头部导航跳转，然后可以通过时间线查看管理员所发的所有文章。
关于我：可以直接点击头部导航跳转，此页主要展示作者的个人信息。
2．管理员
博客管理员可以在通过后台登录通过密码验证进入后台管理，可以进行文章的发布删除，标签添加删除，和公示内容的添加，还可以查看数据展示页面了解用户的访问情况和访问人数，和访问的集中时间段便于文章的更新。
（二）系统流程分析图
为了能够简明直观的了解用户和管理员的访问权限，可以通过如下图形进行查看分析。
用户权限图
通过用户权限图你可以直观的查看到用户的所有权限。见图31
图31用户权限图
管理员权限图
下面是管理员权限图通过下面图形你可以了解到管理员的所有权限。见图32


图32管理员权限图
四、系统设计
（一）功能模块设计
1．功能模块设介绍
系统从功能结构分为前端视图层（view）、和后端控制（control）两大主要主结构。然后前端视图层包括首页，分类，标签，归档和关于我。后端控制层包含博客，分类，标签，数据展示。
2．功能结构设计图
通过下图你可以直观的了解到博客系统所有的功能以及功能的分布结构。见图41


图41系统结构图
（二）数据库设计
1．数据库概念设计
首先对于数据库的设计需要分为两部分，首先是对数据的所有字段进行分析，了解到项目的业务需要哪些字段进行存储，并且对该字段进行记录保存，当分析清楚字段信息之后接下来要做博客实体图如图42所示。


图42 博客实体图
2．数据库表设计
表41 博客信息表tb_blog


该表是用来储存博客信息的。
表42博客标记关联信息表tb_blog_tag


该表是用来储存博客标记关联信息的数据表。
表43博客评论信息表tb_comment


该表是用来储存博客评论信息的数据表。
表44博客公告信息表tb_notice


该表是用来储存博客公告信息的数据表。
表45博客标签信息表tb_tag


该表是用来储存博客标签信息的数据表。
表46博客分类信息表tb_type


该表是用来储存博客标签信息的数据表。
表47博客用户信息表tb_user


该表是用来储存博客用户信息的数据表。
3．数据库加密
数据是一个项目或者是一个程序的核心所在，而数据库的重要信息的保密程度更是体现业务正要性的一个重要标志。对于一些重要的数据我们要对它进行精心加密以防止被有心之人所窃取和盗用，然而数据库加密方法有多种加密算法也有多种。列如数据库的全盘加密、文件加密、数据库自带加密等等。它们各有侧重点使用场景也各不相同，MD5加密算法是常用的加密方法。我使用的加密算法也正是MD5通过输入自己的密码经过加密处理后形成复杂的字符串导入数据库进行安全保护。见图43


图43数据库加密图
加密过程实现代码如下图 44


图 44 加密过程代码图
（三）网站主体设计
1．网站LOGO设计理念
LOGO的设计理念是：左边是龙卷风右是blog，即予以自己的事业能够蒸蒸日上同时也希望来本网站的游客查找结局问题的速度向龙卷风一样的速度，blog是弯曲的艺术体予以不管遇到什么困难都要迎风而起。
2．色彩搭配设计理念
色彩主要以双绿色形成龙卷风，和黑色blog。予以低碳生活绿色环保，希望来到这个网站的人能够时刻有一个环保意识，与自然和谐相处。而多种颜色的搭配寓意生活多彩丰富。
3．页面布局设计
（1）一级页面布局
图45为本网站首页的页面布局图


图45 首页页面布局
（2）二级页面布局图
下面图46为本文章二级页面（即文章浏览页面布局图）


图46 二级页面布局
4．后台界面布局图
下面图47为网站管理员后台首界面页面布局图。


图47 后台界面页面布局
五、系统实现
（一）前端实现
1．首页


图51 首页
2．文章浏览详情页面
在这页面你可也查看到每一篇博客文章的内容，首先可以看到作者为你精心挑选的首图一张，再往下你可以看到章的文字部分。文字部分文字清晰图标布局合理，其中有三个图标分别是标签，转载，和打赏，如果你欣赏作者的文采你可以适当的进行合理赏赐这样也能是作者更加为你提供信息服务。图见52和图53


图52 详情实现页面


图53 详情实现页面
3．分类页面
此图中将展现分类页面的实现效果图，图见54。


图54 分类实现页面
4．归档页面

原文链接：http://www.jxszl.com/jsj/rjgc/559909.html