Spring+Html+JS全栈实现Weibo网页前后端

Web 大作业报告 需求分析 基础功能 用户注册,登陆,退出:spring security 微博列表排序(发布时间,评论数,点赞数) 分页:下部按钮实现 未注册用户:直接查看内容和评论 微博发布:文字+图片 点赞

本文包含相关资料包-----> 点击直达获取<-------

Web 大作业报告

需求分析

基础功能

  1. 用户注册、登陆、退出:spring security
  2. 微博列表排序(发布时间、评论数、点赞数)
  3. 分页:下部按钮实现
  4. 未注册用户:直接查看内容和评论
  5. 微博发布:文字+图片
  6. 点赞、评论
  7. 关注

拓展功能

  • 错误锁定:spring security

  • 邮箱重置密码:通过用户名关联邮箱,发送修改密码的请求

  • @用户:正则表达式,高亮被@用户信息,点击可以跳转用户主页;被@用户有提示信息

  • AJAX减少刷新(点赞+评论)

额外功能

  • 管理员账号才能访问h2数据库

  • 通过邮箱进注册

设计

html页面

登陆页面

注册页面

我的页面(我的微博)

我的页面(关注和粉丝)

我的页面(@信息显示)

微博内容页面(排序➕发布➕主体内容)

数据

数据表

用户表 WeiboUser:

id 户名 String username 密码;String password 邮箱;String email 粉丝 ;List< Weibo User> fansUser 关注 ;List< Weibo User> attentionU ser 微博 ;List< Wei bo> weibos @我;List< Weib o> atMeWeib o
邮件锁定截时间;String emailOut Date 有效位 String validCode 当前账号未被锁定;boolean Account NonLock ed 当前账号激活情况 ;boolean active 头像路径;String avatarPath 关注我的微博 List< Wei bo> attentio nWeibo 权限;List< Weib oRole> roles

微博表 Weibo:

id 内容;String weibo Text 评论数 int ;commen tNum 点赞数 int likeNu;m 发布者 ;Weibo User weibo User 评论 ;List< Com ment> comments 发布时间 ;String time 发布图 List< Pict ure> pictures @户;List< Weib oUser> atUsers

评论表 Comment:

id 内容;String ;commentText 户;WeiboUser weiboUser 微博;Weibo weibo

权限表:WeiboRole

id 权限名称;roleName

表项映射关系

用户 -> 微博 (one -> many) 用户 -> 粉丝用户 (one -> many) 用户 -> 权限 (many -> many) 用户 -> @我的微博 (many -> many) 用户 -> 关注用户(many -> many) 用户 -> @我的用户 (many -> many)

微博 -> 发布用户(one -> one) 微博 -> @用户(many -> many) 微博 -> 评论 (one -> many) 微博 -> 图片 (one -> many)

评论 - > 用户(many -> one)

评论 - > 微博(many - > one)

图片 -> 用户(one - > one)

控制器 Controller

AdminController

URL 访问时机及作
/admin 权限

ErrorController

URL 访问时机及作
/404 错误处理(或件未找到)
/403 错误处理(资源不可)
/401 错误处理(户权限)
/400 错误处理(访问域名不存在或者请求错误)

IndexController

URL 访问时机及作
/ 返回主页

LoginController

URL 访问时机及作
/login 登录页面

RegisterController

URL 访问时机及作
/register 登录
/activeUserEmail 激活户邮箱
/activeUserEmail/reSend 重新发送激活户邮箱
/resetMailSend 重置邮箱
/resetUserPassword 重置户密码

UserController

URL 访问时机及作
/myWeibo 户主
/selfWeibo 访问登录户的主
/fans 粉丝
/at @我的
/checkAttention 添加关注

WeiboController

URL 访问时机及作
/likeAdd 点赞(Ajax)
/commentAdd 添加评论(Ajax)
/commentShow 展示评论(Ajax)
/patternAt 添加关注(Ajax)
/release 发布微博(Ajax)
/mainPage 微博主

问题反思及实现

登录密码输错误3次后账号锁定1时

由于采Spring security作为项安全框架,因此户entity已经实现了基于Spring security的UserDetails接,通过该接中entity的AccountNonLocked属性实现账户的锁定。因为该属性将会在Spring security过滤器链的前端(少在密码验证过滤器的前端)进行判断,若判断不通过Spring security将会抛出LockedException,并发登录错误事件。

接下来,需要在Spring security配置类中设置登录错误处理类即项中的LoginFailureHandler。需要注意的是论是账户锁定、账户未激活、密码错误均会进该处理过程。为了检测户短时间类多次触发登录错误的情况,利API限流库ratelimitj的内置案如下:

python Set<RequestLimitRule> rules =Collections.singleton(RequestLimitRule.of(5, TimeUnit. MINUTES, 3)); RequestRateLimiter limiter = new InMemorySlidingWindowRequestRateLimiter(rules);

这样设定表示每5分钟给予三次错误机会,否则触发限流处理。旦处理函数检测到限流信号,则将AccountNonLocked属性设为false并返回401错误,这样户账户将被锁定。

为了实现1时后动解锁户账户,利Spring task和java 线程池技术,先在Spring的静态启动类设置静态的户-解锁进程映射数据结构(利Map实现)。并且,在户从未锁定状态变为锁定状态时利线程池调度执解锁线程,设定时间为1时,并在一小时后执行,时间片对应的Cron表达式如下:

c++ "0 0 1/1 * * ?"

在解锁线程中,将通过调静态户-线程映射结构,在执解锁操作后取消该线程的时间片调度,从防每个时都会执解锁线程,实现了在时后将户解锁的功能。

邮箱重置密码

为了实现发送邮箱的功能,必须先实现异步邮件发送类。先通过MD5数字证书技术加密密钥,最后使Spring内置的JavaMailSender类实现邮件的发送。

为了实现异步调JavaMailSender,使RabbitMQ消息中间件,在config包中配置其级消息队列设置,编写RabbitMQ监听器监听消息队列,最后在控制器中验证户信息的正确性,如果验证通过,利RabbitMQ内置模板的convertAndSend函数来发送验证邮箱。户仅仅需要点击邮箱中的链接即可访问重置密码。

每个重置密码邮件的数字签名有30分钟的过期时间,若签名过期或是签名错误,将会在链接跳转给予提示并引导户进登录界。若签名合法则显示注册成功提示,并在指定页面允许户更改其密码。

该功能的主要实现难点在于使⽤RabbitMQ进⾏异步邮件发送。由于是⼀个完整的消息中间 件框架,RabbitMQ的环境配置较为繁琐,并且其向Spring提供的API需要重新学习,具有⼀ 定上⼿难度。然⽽在粗略地了解了相关API功能和RabbitMQ运⾏原理后,可以发现RabbitMQ 的使⽤⽅式并不是⼗分困难。在处理完验证邮件的发送过程后,剩下的控制器、视图⻚⾯编写 等过程也能迎刃⽽解了。

@用户

为了实现@户的功能,先需要检测户输框中被@的户并将其亮显示。由于html中的textarea标签功能过于简单,故利div标签加上属性contenteditable="true"实现输入框富本显示。

在JavaScript脚本中,通过绑定input propertychange事件,实时检测@⽤户⽂本,并将@ ⾄@后第⼀个空格间的字符串作为⽬标名字传给后端。后端控制器筛选⽬标名称(去重、去除 数据库不存在的⽤户名),得到被@的⽤户(由于是实时响应输⼊的ajax,因此这些⽤户数据 还需要额外存储在前端的隐藏标签中)。在微博发送表单提交后,后端将收到所有被@的⽤户 名,依次将该微博存⼊对应⽤户的atMeWeibo列表(也即数据库⼀对多关系)中。在每个⽤ 户主⻚上,能够显示所有@本⼈的微博信息。

该功能的难点在于对于实时监听的数据如何进⾏存储(⽤户随时可能新@另⼀个⽤户)。 在此处我们利⽤了隐藏input标签存储被识别的@后⽤户名,在⽤户发送微博进⾏提交后将这 些数据也⼀并发送给后端,便于后端进⾏相应的操作。

Ajax减少刷新

在实现中,我们对点赞、评论、关注等多处采Ajax技术,此处以关注为例(因为在关注的时候需要传参数多,实现更复杂)。

出现过的错误

  • html中使Ajax传递的参数书写形式不正确

  • 点赞数没有匹配当前weibo_id,导致在第条微博处点赞时,点赞数显示在第条微博

  • 在发布评论更新 评论显示栏 和 评论数 时,没有正确处理两者逻辑(因为Ajax是异步的,如果不放在success,可能会在还没有执完评论数更新的时候就开始显示评论,此时新加的评论就显示不出来了)

解决措施

1.使正确的参数书写格式(下实现步骤)

2.在传参时加当前微博的id

3.把 评论显示栏 的函数 commenShow()放 评论数 的success()函数内部

实现步骤

先,在myWeibo.html中对button标注id,onclick之后传递两个参数。此处参数传递书写格式应该注意形式正确(我们在此处传递过程中出现多次参数错误),正确形式如下:

其次,在json中设计attention函数,根据 curId 和 id 判读该登录⽤户访问的⽤户主⻚⾯ 是否是⾃⼰的⽤户主⻚,选择显示标签的格式(已关注 or 关注),并使⽤get请求发送到 /checkAttention,其中携带数据 curId 和 id。

然后,在 UserController 使⽤ @ResponseBody 注解checkAttention函数,使⽤ @RequestParam 获取Ajax发送给后端的参数 curId 和 id,判断该登录⽤户访问的⽤户主⻚⾯ 是否是⾃⼰的⽤户主⻚,然后对应加⼊粉丝⽤户和关注⽤户列表。

最后,控制器将是否当前主⻚为已关注的⽤户的标志返回给前端,在 ajax 中更改 html 的样式。

参考文献

  • 一种Web应用框架的设计与实现(·河北师范大学)
  • JAVA轻量级架构在电子商务系统中的应用与实现(昆明理工大学·张国银)
  • 基于SSH2的轻博客系统的研究与实现(吉林大学·杨雪梅)
  • 基于WEB2.0的教育博客应用与研究(北京化工大学·缪洪霞)
  • 基于.NET的微博设计与实现(电子科技大学·谢治)
  • 基于J2EE的汽车零部件信息发布平台(内蒙古科技大学·王峰)
  • 基于Spring Boot的多用户博客系统的设计研究(青海师范大学·罗涛)
  • 基于MVC模式的Spring框架的应用与研究(大连海事大学·邹存洁)
  • 基于nodejs的微博系统的设计与实现(电子科技大学·王越)
  • 基于SSH框架模式的博客系统的设计与实现(西北师范大学·王刚成)
  • 基于J2EE的汽车零部件信息发布平台(内蒙古科技大学·王峰)
  • 基于SSM的企业网站设计与实现(黑龙江大学·张泷元)
  • 基于Android平台的微博系统设计与开发(燕山大学·周彦超)
  • 基于SSH2的轻博客系统的研究与实现(吉林大学·杨雪梅)
  • 集成WSH架构技术的Web应用研究与实现(西南交通大学·马崇启)

本文内容包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主题。发布者:毕业设计工坊 ,原文地址:https://m.bishedaima.com/yuanma/36009.html

相关推荐

  • 基于SpringBoot框架的医疗挂号管理系统

    这是一套采用Java编程语言,基于SpringBoot框架构建的医疗预约管理系统源代码,项目中融入了Vue技术,开发工具为Idea或Eclipse,此系统适用于毕业设计或课程实践
    2024年05月23日
    2 1 1
  • 基于Python设计的信息检索系统

    基于Python设计的信息检索系统 【实验目的】: 开发一款针对英文文本的信息检索系统,可以实现建立索引表,布尔查询,通配符查询, 短语查询等功能
    2024年05月14日
    4 1 1
  • 基于Python的信息检索课程设计

    基于Python的信息检索课程设计 sdu视点新闻 全站爬虫爬取+索引构建+搜索引擎查询练习程序 爬虫功能使用Python的scrapy库实现
    2024年05月14日
    3 1 1
  • 学生评奖评优管理系统

    这是一个🔥🔥基于SpringBoot框架的学生评奖评优管理系统设计与实现🔥🔥的项目源码,开发语言Java,框架使用的SpringBoot+vue技术,开发环境Idea/Eclipse
    2024年05月23日
    1 1 1
  • 基于Python实现书店销售管理系统

    书店销售管理管理子系统 一,设 计 总 说 明 现在社会随着计算机技术迅速发展与技术的逐渐成熟,信息技术已经使人们的生活发生深刻的变化,生活中的各种服务系统也使人们在生活中的联系日常销售活动方式发生了很大的变化
    2024年05月14日
    6 1 1
  • 网上摄影工作室

    这是一个🔥🔥基于SpringBoot框架的网上摄影工作室设计与实现🔥🔥的项目源码,开发语言Java,框架使用的SpringBoot+vue技术,开发环境Idea/Eclipse
    2024年05月23日
    2 1 1
  • java+swing实现推箱子小游戏课程设计源码

    在计算机科学领域,游戏设计一直是一个备受关注的话题,随着计算机技术的不断发展,人们对于游戏的需求也越来越高,《java+swing实现推箱子小游戏课程设计源码》是一个旨在使用Java语言和Swing框架实现的推箱子小游戏项目
    2024年05月07日
    5 1 1
  • 基于python + dlib实现人脸识别

    python 进行人脸识别 人脸识别的主要算法 其核心算法是 欧式距离算法使用该算法计算两张脸的面部特征差异,一般在 0,6 以下都可以被认为是同一张脸 人脸识别的主要步骤 获得人脸图片 将人脸图片转为 128D 的矩阵(这个也就是人脸特征的一种数字化表现) 保存人脸 128D 的特征到文件中 获取其他人脸转为 128D 特征通过欧式距离算法与我们保存的特征对比
    2024年05月14日
    2 1 1
  • 网上商城系统

    这是一个🔥🔥基于SpringBoot框架的网上商城系统设计与实现🔥🔥的项目源码,开发语言Java,框架使用的SpringBoot+vue技术,开发环境Idea/Eclipse
    2024年05月23日
    1 1 1
  • 基于python实现的CS通信和P2P通信

    基于python实现的CS通信和P2P通信 一,实验要求 C/S通信实现要求 两台计算机分别模拟服务器,客户端 通过编程实现服务器端
    2024年05月14日
    1 1 1

发表回复

登录后才能评论