HTML+CSS+JS+Servlet+MSQL搭建个人博客

3.应用技术：HTML+CSS+JS+JSP+Servlet+MSQL 前端+后台管理。

4.开发环境：eclipse+jdk1.8+tomcat8.5+ mysql5.7+前端Layui。

二、前端

1.博客首页

博主和用户可以访问到博客系统的首页，首页内容主要包括导航条，文章推荐和登录注册管理模块。在首页中还引入了动态时间显示，天气插件和日历插件。

图1-2

文章阅读：点击新文章下面的箭头，弹出浮动窗口，可放大缩小或关闭。

2.微语模块

博主与用户可在此模块发表日记，支持上传图片、视频，用户还可以在日记底下点赞加评论。

3.留言模块

用户可在此模块给博主留言、查看留言。留言按时间先后倒序排列，系统自动标记留言发布日期，如图3-1至3-3所示。

大量的博文以及文章，不能在一个页面中展现给用户进行浏览，本博客系统使用数据库分页技术，实现了文章和日记的分页功能。

4.关于模块

博主可以在后台中设置自己的个人信息，用户可以在该页面看到关于博主的信息，主要是博主的个人介绍，最后还附加了博主的联系方式。

5.登录与注册模块

用户可进行登录或注册，详细说明图下附说明。

说明：

1，登录用户分为3种，1 管理员，2 普通用户，3 冻结用户（管理员在管理界面设置用户权限，冻结用户不能评论）。

管理员可进入管理界面，对整个博客进行管理（后面详细说明）

普通用户可以浏览，点赞，评论，留言。

用户权限通过数据库gg_user表中的 user_rights设置，通过过滤器filter进行拦截。

2，验证码通过后台动态生成，不区分大小写，验证码，用户名，密码同时正确，才能完成登录。点击验证码，可以动态切换验证码。

说明：

注册采用邮箱验证激活的方式，主要实现是验证gg_user表中的user_rights。当递交注册表单的时，服务器会发送一封邮件到用户填写的指定邮箱，当用户点击激活链接的时候user_rights的值设置为1 才能完成注册，否则注册的用户无效。

6.后台管理模块

管理员使用管理员账号登录后可发表文章，管理日记、评论、留言，修改用户权限等

说明：微语管理分写微语，微语管理，评论管理。
写微语，图片和文章内容在同一个form表单同时提交，在后台先做识别处理，识别出的图片存到服务器，图片地址存到数据库，识别出文字，直接存到数据库。支持一张图片上传。点击上传，上传。

主要是博主对留言板的设置，例如删除留言，设置黑名单，设置审核功能等。对于有不良记录的访客，可以进行设置权限，或者拒绝该用户访问。

说明：

1.页面内容是查询数据库内容然后循环输出的

2.点击展开查询数据库此条微语的评论并且循环显示，评论后点击确定，提交评论并写入数据库。

3.有统计此条微语总被评论数和点赞数。

4.没有登陆的用户无法评论，被冻结用户无法评论（主要是检测session中的user_name和user_right）

5.微语的图片是可以在后台上传的，图片存在服务器，地址存在数据库。

功能描述：

该模块作为整个博客系统的后台管理中心，将该博客的所有功能集成展现在此，只有博主通过账号和密码才能访问到此页面，可以实现该博客系统的所有功能，并进行相应的操作

详细说明：

AboutDao.java ：对用户信息的操作(有三个内置方法)

1，public GgUser getUserInfo(String userName) //用于关于界面的用户数据查询显示

2，public GgUser updateUserInfo(GgUser user) //管理员界面修改用户数据

3，public ArrayList<GgUser> getUsers() //管理员界面显示全部用户信息

ActiveDao ：管理用户权限

1，public boolean addUser(GgUser user) //邮箱激活时修改user_rights==2

2，public boolean forbiden(int userid) //管理员界面冻结用户时调用

LeacotDao ：留言管理

1，public boolean addLeacot(Ggcom com) //添加留言

2，public boolean delete(int id) //管理员删除留言

LeaShowDao :数据库查询留言

public ArrayList<Ggcom> getcomInfo()

LoginDao :登录检测

public int check(String userName,String userPassword)

WisComShowDao :微语评论查询展示

public ArrayList<GgNoteCom> getcomInfo(int noteId)

WisDelDao :管理员界面微语删除微语评论删除

public boolean delCom(int id)

public boolean del(int id)

wisShowDao :微语查询展示

public ArrayList<GgNote> getcomInfo()

WisUploadDao:添加微语，添加微语评论

public boolean addwis(GgNote note)

public boolean addcom(GgNoteCom com)

AboutUpServlet :管理员界面更新用户信息

ActiveServlet :处理邮箱点击的激活码get请求，激活用户

LeacotsServlet :留言post

LeaDelServlet :管理员界面删除留言

LoginFilter :用户权限管理

LoginServlet :登录

PicUpServlet :管理员界面上传微语，接受post表单包含文字和图片

RegServlet :注册时接受post表单并发送邮件

UserForbidenServlet :管理员界面冻结用户

ValidationCodeServlet :登录验证码生成

WhiComServlet :微语评论

WhiDelComServlet :管理员界面删除微语评论

WhiDelServlet :管理员界面删除微语

Auth :发送邮件的工具

DbUtil :与数据库建立连接的代码，在Dao层调用

SendMail :发送邮件的工具

Upload :在微语上传时使用，微语上传时是图片和文字一起上传，不能直接使用getParameter方法，所以先调用此方法分离出图片和文字递交 Dao层处理

images ：保存微语中上传的图片。

Page ：管理员界面的 jsp页面。

Layer，res ：引用的前端框架。

2.数据库说明

新建数据库：ggdb，并为其创建如下4个表

gg_user：用户信息管理表

gg_note：微语管理表

gg_note_com：微语评论管理表

gg_comment：留言管理表

1.系统亮点与不足
   该系统整体采用HTML+CSS+JS+Jsp+Servlet+JavaBean+Filter模式分层开发，在这种模式下，servlet负责处理用户请求并进行相应的逻辑操作，jsp负责数据的显示，javabean负责封装数据，filter负责过滤数据，数据库采用mysql数据库。方便了以后的修改与功能的扩充。
   技术上系统使用了Html5搭建前台页面，使用CSS3进行样式的美化，用了JavaScript和jQuery等技术加入了特效和前台的交互功能，给系统增加了更多的便捷性。
   由于个人能力的不足，jQuery只是会一些简单的，而非精通，以至于在后台开发模块遇到很大的障碍。系统开发中后期，由于想实现功能的模块化开发，结果需要使用Ajax技术，自己了解学习后，并没有成功解决掉该问题。系统数据库的设计未进行优化，至于能否在大数据的用户访问博客时出现问题未知。
   关于安全性，是该系统的关键所在，如何能在网络的冲击下，保护博主和用户的信息以及博客数据信息的安全，在将来的的再次设计中，需要注意。

2.未来功能设想
博客系统虽然已不陌生，但是千篇一律的博客不能给用户带来新鲜感，后期的相册功能，是否可以用java爬虫技术，爬取网易云最热门的歌曲，采用音乐与图片的结合实现音乐相册。

需要源码评论区留邮箱，感谢点赞收藏