【项目描述】
建立一个功能较为齐全的博客网站,所有注册使用的用户都能够分享其自己的文章,也可查看他人分享的文章,不仅如此,用户还能够对任意文章发表评论,同时还能够为自己喜爱的文章进行点赞。而用户所发表的文章能够记录访客数量,增强用户体验。
【系统设计】
完整代码:https://download.csdn.net/download/pythonyanyan/87390604
网站整体结构:
线上的值为传递所需要的参数。在对应各自的 JSP 中,关于数据库的操作处理,建立一个额外没有 HTML 视图的 JSP 文件进行处理,处理完成后执行强制跳转,跳转到另外界面后回到原有的界面,完成数据库操作以及刷新界面。详细结构图解:
-R 图
【运行截图】 1.登录:
输入已经注册过的用户名以及密码即可登录自己相应的博客。如果没有注册过,可以点击注册按钮跳转到注册页面,按照要求注册完成后会和登录一样跳转到个人主页:
光标悬浮在设置图标上显示出菜单,可以进行个人资料的修改:
若点击保存会要求必须输入相应字段,点击取消则返回原有的个人主页:
(个人头像及博客昵称修改成功)左侧菜单栏中的他人博客浏览,能够浏览其他人的博客,并按照所选的类型进行分类,如科普类:
进行分页管理,每篇文章均显示其最后修改时间以及浏览次数(如果登录用户是原作者则显示删除按钮,提供删除该文章的操作),分页操作可以点击上一页或下一页进行跳转,也可以点击数字直接跳转到某一页的内容,如果没有上一页则不显示’上一页’,同样如果没有下一页则不显示’下一页’。
为了方便操作,接下来切换用户进行展示:
如图中所示如果是登录用户写的文章则可以进行删除操作。
点击任意文章的标题,阅读文章:
在上方:
点击点赞图片能够相应的改变图标(已赞以及未赞,可以与上两图对比),相对应的,文章上方的点赞数会做相应的更改,上方的浏览次数只会统计非作者浏览的次数。右方显示现登录的用户,以及登录用户的博客昵称,点击博客昵称可以返回到个人主页。在登录用户信息的下方显示自己写的文章,点击可以直接进入自己的相对应的文章。
点赞按钮旁边的两个编辑和删除图标:
这两个图标只有登录用户是作者的时候才会显示,比如下方不是作者的时候显示为:
可以注意到自己编写的文章中没有这篇文章,所以不能够进行修改或删除操作。同样点击删除按钮会删除文章并且返回到个人主页。
在显示文章界面的下方为评论区:显示该文章下各个评论用户的头像、博客昵称以及评论内容:
在文章显示页面中点击编辑的图标
可以进入编辑该文章的界面:
点击上方的返回主页则返回到个人主页,点击下方的返回则返回到上一层的文章显示界面,点击提交保存自己修改的内容,并回到阅读文章界面显示相应的文章。
点击上方的’发表文章’或者在个人主页中点击’写文章’按钮,可以进入发表新文章的界面:
界面内容与编辑文章界面相同,但操作不同,这里不能点击修改文章,点击返回主页或者点击下方的返回都是回到个人主页,点击提交则保存新的文章并跳转到文章显示界面,显示刚编写的新文章。
在登录界面中使用管理员账号能够跳转到管理员登录界面:登录后进入:
点击左侧栏的用户名能够显示该用户编写的所有文章,点击文章可以显示对应的文章内容以及其相关评论,管理员有权限删除任意的文章以及任意的评论。
【实验体会】
写出实验过程中遇到的问题,解决方法和实验体会,每位同学单独写。
[同学 1 姓名蔡景韬]
这次合作中我主要负责登录注册界面、管理员界面与数据库管理部分,除了基本的界面设计外,我觉得感受最深的便是对 Java script 更加理解与能较熟练的使用 js,以及 JSP 和 js 之间的变量传输。
计:
界面显示问题,因为在同一个界面中有许多不同的操作,比如说显示不同类别的文章,修改个人信息的显示,而如果分成多个页面则过于冗余:
添加一个 mode 参数,页面的点击都是提交给自己来负责处理,然后根据这个参数来对 HTML 正文执行不同的输出,主要是利用 JSP 的优势:Java 语言与 HTML 共同处理:
在不同模式下输出不同的 HTML 即可达到相应的页面模式转换效果
显示文章列表时,怎么做到如果是自己的文章则显示相应的删除按钮,允许执行删除操作
在对输出语句进行操作的时候,额外多加一个判断,判断文章的作者是否为登录用户,如果是则加入相应的图片语句:
如何实现分页
从数据库筛选出相应的全部文章后,每次只显示一定量的文章,超过的文章则不进行输出处理
关键是显示文章的下方如何处理上一页下一页以及对应的页码,这个其实比较简单,同样也是在 HTML 区域穿插进 Java 语言进行判断输出:
判断是否还有上一页或者下一页再输出相应的元素,然后对于中间的页码,其中 num 代表总文章数/每页显示文章数的上取整整数,如果是当前页码,则只是输出一个 span 元素,如果不是,则输出一个 a 元素让用户对应跳转到相应的页码显示。
个人头像如何给予刚注册用户一个默认头像:
可以在用户表当中再增加一列属性,用于判断该用户是否修改过头像,如果没有修改头像,则输出的头像 url 则使用一个默认的头像:
如果设置过头像,那么该列属性就不会为 NULL,那么就设置为自己的头像,文件上传管理当中,对于头像的管理则将所有用户上传的头像命名均改为其用户 ID.jpg,因为用户的 ID 是唯一的,所以如果用户多次更改头像,也不会保留上一次的头像文件在服务器中,避免的内存的占用,同时也方便管理。
体会:
这次的大作业中,在 JSP 操作中花了相当长的时间,因为需要实现较为复杂的逻辑操作,通过一次次的 debug 更加地了解了 JSP 语言的好处,也更能理解到两种语言同时使用的好处。在实验过程中,代码编写其实更重要的是 CSS 样式,一个页面的给人的感受好坏很大程度上取决于其页面的美观程度,所以在 CSS 上同样花了很多时间,去使用动画,使用这学期学过的所有内容,全都运用到本次的大作业中,同时也提高了自己的审美,能够独立设计出一个较好的页面。在编写好相应的页面之后,只需要慢慢添加 JSP 功能即可完成一个完整的页面。
[同学 3 姓名曾华浪] 遇到的问题:
一开始发现在执行一个 SQL 指令之中执行另一个 SQL 语句,会导致运行错误。经过请教同学之后了解到每一次对数据库的操作必须要完成了才能完成下一个操作,将其分成两块就没有问题了。
ResultSet rs = stat.executeQuery(sql);之后,并不代表着 stat 调用数据库已经完成,在接下来的语句中,如果还想要查询数据库,则必须要新设一个 Statement stat2 对象才行,否则会使原来的语句停止一开始没有强制换行,在测试的时候发现对于连续的有英文字母,会出现文本溢出的情况,加上了 word-wrap 属性之后就好了。
在设定浏览次数的时候,一开始只是简单的设计成访问了就 +1,因为点赞和评论都是通过 JSP 来实现的,所以如果点赞或者评论的话都会导致浏览次数上升,这是不合理的。后来加上了一个参数来判断是否是点赞和评论之后,就解决了这个问题。
[同学 4 姓名:曾宇航] 本次项目我负责的是写文章和修改文章这一部分,可以相当于一个简单的封闭系统。
基本框图如下:
因为 userId 和 articleId 都是公开的,所以网页之间的参数传递可以直接通过 URL 来传递。
与数据库的交互过程总的来说类似于重新做了一遍 JSP1 那次实验,在功能的实现方面没有遇到很大的问题。
修改和新增文章这两个 JSP 可以只用一个实现的,debug 的时候分开了,后面也就没合起来了。
Debug 的时候根据 PPT 上写一个简单的 JSP 获取传出的参数并且输出。
在 CSS 设计方面自己做的不是很到位,总的来说自己做出来的自己都觉得难看,后面队友找了个网站,模仿者设计出 CSS 才感觉好看点,最后队友也帮忙优化了边框。
本来还想做一些其他功能的,比如草稿箱,回收站等等的,但是因为时间问题所以放弃了(建立新的数据库,设计新的网页样式,增加与其他队员之间的接口等等方面都很花时间)