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

发布于:2022-12-27 ⋅ 阅读:(654) ⋅ 点赞:(0)

 

 

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爬虫技术,爬取网易云最热门的歌曲,采用音乐与图片的结合实现音乐相册。

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


网站公告

今日签到

点亮在社区的每一天
去签到