基于Web技术实现多人博客平台

一,需求分析 博客是网络交流的一种重要形式,国内拥有许多专业的博客平台,如 CSDN 等, 为了实现小规模用户之间文章的分享,多人之间的交流互动,熟悉博客平台的开发流程

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

一、需求分析

博客是网络交流的一种重要形式。国内拥有许多专业的博客平台,如 CSDN 等。

为了实现小规模用户之间文章的分享、多人之间的交流互动,熟悉博客平台的开发流程,本团队打算进行一个多人博客项目的开发。

二、概要设计

功能简述如下:

大体分为用户模块、文章模块、搜索模块和交互模块。

2.1 用户模块

  • 包括基本的用户登录注册功能、用户个人信息的修改维护功能。
  • 登陆后用户的个人主界面可以按时间顺序查看到自己历史发布的博客记录。

2.2 文章模块

  • 包括文章的编辑发布、文章的修改、文章分类标签的设计、文章的删除功能
  • 文章分为标题、摘要、标签、主体内容四部分。
  • 使用 Markdown 格式的一个插件,使得用户可以编辑博客主体的内容。
  • 文章发布后,若是文章的拥有者可以随时修改文章的内容,并且可以设置文章是否可以为其他用户所见(即可见性),也可以随时删除文章。

2.3 交互模块

  • 包括点赞、收藏、发表评论、查看他人文章的功能。
  • 用户点赞和收藏过的文章会按时间顺序分别放入到用户个人主页下的我的点赞和我的收藏栏目。
  • 所有的用户都可以在文章下面发表评论,并可无限制地对评论进行再评论。显示用户的评论时间和评论的用户名。

2.4 搜索模块

  • 用户可在博客大厅里的搜索栏里按照用户或者博客的分类,来搜索用户或者博客。
  • 或者直接使用一旁的标签分类直接搜索对应分类的博客。
  • 搜索功能会将所有包含用户搜索的关键字的用户或者博客搜索出来,供用户查看。

三、系统架构

  • 系统采用前后端分离的架构。
  • 前端使用:vue2 + element–ui + axios
  • 后端使用:Spring Boot + MyBatis plus + shrio + Redis + jwt + hibernate validater

目标用户环境为 Google, Fire Fox, Edge 浏览器,建议分辨率 1080p。

四、数据设计

4.1 用户表 m_user

  • 包括以下字段:id,username,avatar,email,password,status,created,last_login。
  • 分别为如下含义:id 号,用户名,头像,邮箱,口令,状态,注册时间,上次登录时间。
  • 主键为 id。
  • username 字段有唯一约束。
  • created,password,字段有非空约束。

4.2 博客表 m_blog

  • 包含以下字段:id,user_id,title,description,content,created,status,praise,label,favorite
  • 分别为如下含义:博客 id 号,对应所属用户的 id,标题,摘要,内容,创建时间,状态,点赞数,标签,收藏者。
  • 主键为 id。
  • user_id,title,description,有非空约束。
  • user_id 为外键,参见用户表 id 字段。

4.3 评论表 comments

  • 包含以下字段:id,user_id,content,blog_id,follow,time
  • 分别为如下含义:评论 id 号,评论者(用户)的 id 号,内容,评论的博客 id,回复的哪条评论,评论时间。
  • 主键为 id。
  • content,user_id,blog_id,follow,time 都不能为空
  • 外键为 user_id,参照用户表 id 字段。
  • 外键为 blog_id,参照博客表 id 字段。

4.4 收藏表 m_favorite

包括以下字段:

Fid 为收藏者 id,fblogid 为收藏的博客 id,ftime 为收藏时间

Fid,fblogs,ftime 有非空约束

4.5 点赞表 m_praise

包括以下字段:

pid 为点赞者 id,pblogid 为点赞的博客 id,ptime 为点赞时间

Pid,pblogid,ptime 有非空约束

4.6 关注表 m_subscription

包括以下字段:

Id 为关注者 id,sid 为被关注者 id,stime 为关注时间

id,sid,stime 有非空约束

五、功能接口

5.1 搜博客

1.根据关键字搜索博客

  • 功能:输入关键字搜索博客
  • 地址:/blog/selectByKey
  • 传入参数:String key

  • 返回:

搜索成功:

搜索失败:

2.根据预定义的标签分类搜索博客

请求地址:

请求参数

c++ { "label": "java" }

返回结果

c++ { "code": 200, "msg": "获取用户点赞博客成功" , "data": [ { "id": 9, "userId": 1, "title": "真正理解Mysql的四种隔离级别@", "description": "事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做。\n\n事务的结束有两种,当事务中的所以步骤全部成功执行时,事务提交。如果其中一个步骤失败,将发生回滚操作,撤消撤消之前到事务开始时的所以操作。"

陈智伟 15:40:15

python "content": "### 什么是事务 \n\n> 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做。\n> \n> 事务的结束有两种,当事务中的所以步骤全部成功执行时,事务提交。如果其中一个步骤失败,将发生回滚操作,撤消撤消之前到事务开始时的所以操作。\n\n**事务的 ACID**\n\n事务具有四个特征:原子性( Atomicity )、一致性( Consistency )、隔离性( Isolation )和持续性( Durability )。这四个特性简称为 ACID 特性。\n\n> 1 、原子性。事务是数据库的逻辑工作单位,事务中包含的各操作要么都做,要么都不做\n> \n> 2 、一致性。事 务执行的结果必须是使数据库从一个一致性状态变到另一个一致性状态。因此当数据库只包含成功事务提交的结果时,就说数据库处于一致性状态。如果数据库系统 运行中发生故障,有些事务尚未完成就被迫中断,这些未完成事务对数据库所做的修改有一部分已写入物理数据库,这时数据库就处于一种不正确的状态,或者说是 不一致的状态。" "created": "2021-12-10 23:46:10", "status": 0, "praise": 1, "favorite": 0, "label":"[\"java\"]" }, { "id": 23, "userId": 2, "title": "java" , "description": "我真不错啊啊哈哈哈" , "content": "java" , "created": "2021-12-16 01:10:37" , "status": 0, "praise": 1, "favorite": 1, "label": "[\"java\"]" } ] }

5.2 获取所有博客内容

  • 地址:/blogs

  • 传入参数:Integer currentpage

  • 返回:

5.3 维护个人信息

  • 功能:更新个人信息
  • 地址:/userinfo/renewinfo
  • 传入参数:user

返回:

  • 功能:获取个人信息
  • 地址:/userinfo/getinfo
  • 传入参数:Long id

  • 返回:

获取信息成功:

失败:

5.4 博客点赞

  • 功能:返回用户点赞信息
  • 地址:/praise/getpraiseinfo
  • 传入参数:int userid

  • 返回:

c++ { "code": 200, "msg": "获取用户id:2博客点赞信息成功" , "data": [ { "pid": 2, "pblogid": 3, "ptime": "2021-12-06" }, { "pid": 2, "pblogid": 9, "ptime": "2021-12-06" }, ] }

  • 功能:博客点赞信息添加(点赞)
  • 地址:/praise/addpraiseinfo
  • 传入参数:Praise praise
  • 返回:“添加博客点赞信息成功”
  • 功能:博客点赞信息删除(取消点赞)
  • 地址:/praise/delpraiseinfo
  • 传入参数:Praise praise
  • 返回:“删除博客点赞信息成功”
  • 功能:点赞数添加
  • 地址:/blog/addpraisenum
  • 传入参数:Blog blog
  • 返回“添加点赞数成功”
  • 功能:点赞数减少
  • 地址:/blog/addpraisenum
  • 传入参数:Blog blog
  • 返回“减少点赞数成功”
  • 功能:获取用户所有点赞的博客
  • 地址:/blog/getuserpraiseblog
  • 传入参数:int userid

  • 返回:

c++ { "code": 200, "msg": "获取用户点赞博客成功" , "data": [ { "id": 9, "userId": 1, "title": "真正理解Mysql的四种隔离级别@", "description": "事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做。\n\n事务的结束有两种,当事务中的所以步骤全部成功执行时,事务提交。如果其中一个步骤失败,将发生回滚操作,撤消撤消之前到事务开始时的所以操作。",

陈智伟 15:40:15

python "content": "### 什么是事务 \n\n> 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做。\n> \n> 事务的结束有两种,当事务中的所以步骤全部成功执行时,事务提交。如果其中一个步骤失败,将发生回滚操作,撤消撤消之前到事务开始时的所以操作。\n\n**事务的 ACID**\n\n事务具有四个特征:原子性( Atomicity )、一致性( Consistency )、隔离性( Isolation )和持续性( Durability )。这四个特性简称为 ACID 特性。\n\n> 1 、原子性。事务是数据库的逻辑工作单位,事务中包含的各操作要么都做,要么都不做\n> \n> 2 、一致性。事 务执行的结果必须是使数据库从一个一致性状态变到另一个一致性状态。因此当数据库只包含成功事务提交的结果时,就说数据库处于一致性状态。如果数据库系统 运行中发生故障,有些事务尚未完成就被迫中断,这些未完成事务对数据库所做的修改有一部分已写入物理数据库,这时数据库就处于一种不正确的状态,或者说是 不一致的状态。" "created": "2021-12-10 23:46:10", "status": 0, "praise": 1, "favorite": 0, "label":"[\"java\"]" }, { "id": 18, "userId": 2, "title": "最值得学习的博客项目eblog", "description": "视频中所用到的xshell和navicat直接获取哈!去问驱蚊器围墙是", "content": "请1212", "created": "2021-12-10 23:46:14", "status": 0, "praise": 1, "favorite": 0, "label": "[]" }, { "id": 23, "userId": 2, "title": "java", "description": "我真不错啊啊哈哈哈", "content": "java", "created": "2021-12-16 01:10:37", "status": 0, "praise": 1, "favorite": 1, "label": "[\"java\"]" } ] }

5.5 博客收藏

  • 功能:博客收藏信息增加
  • 地址:/favorite/addfavoriteinfo
  • 传入参数:Favorite favorite
  • 返回:添加博客收藏信息成功
  • 功能:博客收藏信息删除
  • 地址:/favorite/delfavoriteinfo
  • 传入参数:Favorite favorite
  • 返回:删除博客收藏信息成功
  • 功能:获取博客收藏信息
  • 地址:/favorite/getfavoriteinfo
  • 传入参数:int id
  • 返回:

{ "code": 200, "msg": "获取用户id:2博客收藏信息成功", "data": [ { "fid": 2, "fblogid": 3, "ftime": "2021-12-06 07:54:20" }, { "fid": 2, "fblogid": 16, "ftime": "2021-12-06 07:55:29" }, ] }

5.6 博客关注

  • 功能:博客添加关注信息
  • 地址:/subscribe/addsubscribe
  • 传入参数:Subscription subscription
  • 返回:添加关注信息成功
  • 功能:删除博客关注信息
  • 地址:/subscribe/delsubscribe
  • 传入参数:Subscription subscription
  • 返回:删除关注信息成功
  • 功能:获取博客关注信息
  • 地址:/subscribe/getsubscribe
  • 传入参数:int id
  • 返回:获取关注信息成功

c++ { "code": 200, "msg": "获取用户id:2关注信息成功", "data": [ { "id": 1, "username": "markerhub", "avatar": "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg", "email": null, "password": "96e79218965eb72c92a549dd5a330112", "status": 0, "created": "2020-04-20 10:44:01", "lastLogin": null }, ] }

  • 功能:获取所有用户被关注信息
  • 地址:/subscribe/getAllsubscribe
  • 传入参数:Subscription subscription
  • 返回:获取所有用户被关注信息成功
  • 功能:获取该用户所有用户被关注数
  • 地址:/subscribe/get1usersubscribe
  • 传入参数:Subscription subscription
  • 返回:获取该用户所有用户被关注数成功

5.7 登录注册基本功能接口

地址:/login

请求参数:

返回参数:

登陆成功返回:

否则:

5.8 博客发布修改接口

请求地址:/blog/edit

请求参数:

返回参数:

5.9 修改密码接口

请求地址:/user/editPassword

请求参数:

返回参数:

5.10 用户搜索接口

(1)根据用户名模糊查询所有相似用户

  • 请求地址:/user/search

  • 请求参数:

c++ { "username": "lize" }

  • 返回参数:

  • 返回参数:

c++ { "code": 200, "msg": "操作成功", "data": [ { "id": 2, "username": "lizeyu", "avatar": null, "email": "2869036143@qq.com", "password": "96e79218965eb72c92a549dd5a330112", "status": 0, "created": null, "lastLogin": null }, { "id": 3, "username": "lizeyu1", "avatar": null, "email": "2869036143@qq.com", "password": "96e79218965eb72c92a549dd5a330112", "status": 0, "created": null, "lastLogin": null } ] }

(2)根据用户名搜索用户博客接口(准确匹配)

  • 请求地址:/search

  • 请求参数:

c++ { "username": "markerhub" }

  • 用户存在返回结果:

```c++ { "code": 200, "msg": "操作成功", "data": [ { "id": 1, "userId": 1, "title": "title", "description": "des", "content": "content", "created": "2021-11-29", "status": 0, "praise": null },

    {
        "id": 7,
        "userId": 1,
        "title": "你真的会写单例模式吗?",
        "description": "单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好、用对单例模式,还真得费一番脑筋。本文对 Java 中常见的单例模式写法做了一个总结,如有错漏之处,恳请读者指正。",
        "content": "> 作者:吃桔子的攻城狮 来源:http://www.tekbroaden.com/singleton-java.html\n\n\n单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好、用对单例模式,还真得费一番脑筋。本文对 Java 中常见的单例模式写法做了一个总结,如有错漏之处,恳请读者指正。\n\n饿汉法\n===\n\n顾名思义,饿汉法就是在第一次引用该类的时候就创建对象实例,而不管实际是否需要创建。代码如下:\n\n```\npublic class Singleton {  \n    private static Singleton = new Singleton();\n    private Singleton() {}\n    public static getSignleton(){\n        return singleton;\n    }\n}\n\n```\n\n这样做的好处是编写简单,但是无法做到延迟创建对象。但是我们很多时候都希望对象可以尽可能地延迟加载,从而减小负载,所以就需要下面的懒汉法:\n",
        "created": "2020-05-22",
        "status": 0,
        "praise": null
    },
    {
        "id": 15,
        "userId": 1,
        "title": "title",
        "description": "description",
        "content": "content",
        "created": "2021-11-24",
        "status": 0,
        "praise": null
    }
]

} 否则: { "code": 400, "msg": "failed", "data": null }

```

注:查询结果为 用户名(字符串)中包含传递的参数的用户。

5.11 评论功能接口

(1)获取评论接口

  • 请求地址:/comment/get
  • 请求参数:如下图

  • 返回结果:

c++ { "code": 200, "msg": "操作成功", "data": [ [ { "id": 6, "userId": 6, "blogId": 1, "content": "用户6评论博客1", "follow": 0, "username": "6号用户", "time": "2021-12-10 13:33:45" } ], [ { "id": 1, "userId": 2, "blogId": 1, "content": "用户2评论博客1", "follow": 0, "username": "2号用户", "time": "2021-12-10 13:33:45" }, { "id": 2, "userId": 4, "blogId": 1, "content": "用户4回复用户2对博客1的评论", "follow": 1, "username": "4号用户", "time": "2021-12-10 13:33:45" }, { "id": 3, "userId": 3, "blogId": 1, "content": "用户3回复用户4对用户2对博客1的评论的评论", "follow": 2, "username": "3号用户", "time": "2021-12-10 13:33:45" }, { "id": 8, "userId": 6, "blogId": 1, "content": "用户6回复用户3对用户4对用户2对博客1的评论的评论的评论", "follow": 3, "username": "6号用户", "time": "2021-12-10 13:33:45" }, { "id": 5, "userId": 1, "blogId": 1, "content": "用户1(博主)回复用户2对自己的博客1的评论", "follow": 1, "username": "markerhub", "time": "2021-12-10 13:33:45" } ] ] }

(2)发表评论接口

  • 请求地址:/comment/save

  • 请求参数:

c++ { "userId": 1, "blogId": 2, "content": "content" , "follow": 0 }

  • 返回结果:

c++ { "code": 200, "msg": "操作成功" , "data": "success" }

(3)删除评论接口

  • 请求地址:/comment/delete
  • 请求参数:/blogs/getByClass

c++ { "userId": 1, "commentId": 9 }

  • 返回结果

c++ //请求成功返回结果 { "code": 200, "msg": "操作成功", "data": "success" } //请求失败返回结果 { "code": 400, "msg": "只能删除自己的评论。", "data": null }

六、界面说明

6.1 登录界面

登录界面使用动态插件 vue-particles,自定义过渡色背景色,其中粒子特效可以实现自动连接运动,还可以与鼠标进行互动。(动态 GIF 图与该报告一起打包在文件夹中)

  • 判空

  • 如果用户在本地保存密码,可以显示用户已保存的密码

  • 用户不存在、密码错误等情况的判断

(密码在输入时设置了具体数字不可见的保密功能,保证登录的安全性)

  • 登录成功

弹出登录成功的提示框并将输入框加动画浮出,显示登录的账户名称后,进入界面(gif 有演示)

6.2 浏览、管理博客相关功能

  • 浏览博客并实现点赞、收藏、关注作者等功能

博客界面采用鼠标感应动态展示的显示方式,博客卡片可以根据鼠标的移动方向进行旋转,当鼠标悬浮在卡片之上时,博客标题上移,显示出博客内容(具体实现动态 GIF 图与该报告一同打包与文件夹中)主界面的分页按钮样式进行修改匹配风格

A、点击博客卡片下方的收藏或点赞按钮实现收藏和点赞功能,若已收藏或已点赞,再点击则取消点赞或收藏,同时按钮上会动态显示当前该博客的点赞收藏数。

(点赞前后)

B、点击卡片进入博客具体界面

如果该博客为其他用户发布,当前账号可关注该作者

  • 评论功能

发表后:

若为该博客作者发表评论,评论有相应的作者标记:

回复评论(可以实现多用户交叉评论):

(任何发布的博客或是评论都会显示发布时间)

  • 管理博客功能

1.发布博客

判空功能:

如果未输入必要信息会给出相应提示

可选择相关标签用于博客发表后的分区搜索:

进行博客内容的编辑:

设置了字体加粗、倾斜、增添下划线、向左对齐、居中对齐、添加连接、添加图片等功能

创建成功:

2.作者发布博客后,仍然可以对博客内容进行修改:

3.设计博客的可见性或是删除

6.3 搜索博客或是用户的功能

A、分区检索(采用标签)

上面在发表博客时,我们可以为博客设置标签,接下来可以通过标签搜索:

下图为各种分区(标签)

以 c/c++ 区为例:

下图为该分区的所有博客

B、关键字搜索

1.博客搜索

2.用户搜索

该功能支持反复搜索

(也可以在搜索出的界面点击博客卡片进入博客,点击用户卡片进入用户的个人界面,或是实现点赞收藏关注的功能)

6.4 用户个人界面

A、用户自己的界面

在右方的的个人资料卡片中,可以展示用户的个人信息,如昵称、邮箱、粉丝数、关注数。

主体部分主要有以下四部分组成:

1、我的动态:根据时间线显示用户发布的博客

2、我的收藏:根据收藏的先后顺序显示收藏内容

3、我的关注:显示关注的用户,并可通过点击进入对方名片

4、点赞过:显示点赞过的博客

B、其他用户的个人界面

可以通过点击搜索功能搜索出来的名片或者关注的用户的名片进入对方个人界面,出于安全与保密考虑,仅显示部分个人信息

6.5 游客模式(未登录模式)

游客模式下仍可浏览博客内容,但是无法进行点赞收藏关注等功能,也无法查看个人界面、评论、写博客。

无法关注

无法评论

无法点赞

无法收藏

无法写博客

6.6 注册新账号

判空功能:

不能重名:

判断邮箱格式是否正确:

判断两次密码是否输入一致:

注册成功,有动画效果:

6.7 其他功能

利用 localstorage,对当前登录的用户的登录状态进行保持,即使在关闭页面之后,为账号主人提供了便利。用户如果在不能保证安全的情况下退出时,可点击退出登录来关闭当前状态,清除缓存。

并通过路由等实现刷新数据不消失的功能 。

七、安全设计

口令采用 SecureUtil.md5()方式加密。

账号采用基于 token 的身份验证。

八、部署说明

环境需求:按照 100 用户量估算,需要 1 台服务器,每台 4 核、1GB 内存。初始存储 0.5GB,每年扩充多少 1GB。网络带宽 50MB。

部署方法:

  • 要求 win10 系统、DB 版本 mysql8.0.23

  • 创建 DB blog,创建 DB 用户 root 密码 965288QQczw,执行 blog.sql 脚本。

  • 后端 JAR 运行方式 Java -jar vueblog-0.0.1-SNAPSHOTr.jar。

  • 后端使用 8081 端口,建数据库时为 3306 端口

参考文献

  • 在线音乐试听新闻浏览网站的设计与实现(大连理工大学·刘炳东)
  • 基于需求语义描述的多平台统一框架的研究与实现(中国海洋大学·辛灿灿)
  • 基于SSH架构的个人空间交友网站的设计与实现(北京邮电大学·隋昕航)
  • 基于SSH框架的企业内博客系统的设计与实现(山东大学·柳青)
  • 基于互联网应用服务的SNS设计与开发(电子科技大学·徐小茹)
  • 基于SSH架构的个人空间交友网站的设计与实现(北京邮电大学·隋昕航)
  • 基于Web的信息发布与信息交流平台的设计与实现(吉林大学·许昭霞)
  • 基于SSH2的轻博客系统的研究与实现(吉林大学·杨雪梅)
  • 基于SSH框架模式的博客系统的设计与实现(西北师范大学·王刚成)
  • 基于SSH2的轻博客系统的研究与实现(吉林大学·杨雪梅)
  • 基于web的信息共享系统的设计与实现(华中科技大学·保罗)
  • 基于Spring Boot的多用户博客系统的设计研究(青海师范大学·罗涛)
  • 基于MD5改进算法的安全教师博客系统设计及开发(湖南大学·刘曼春)
  • 基于SSH框架的博客用户分享平台的设计与实现(河北工业大学·刘磊)
  • 在线音乐试听新闻浏览网站的设计与实现(大连理工大学·刘炳东)

本文内容包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主题。发布者:代码小屋 ,原文地址:https://bishedaima.com/yuanma/35994.html

相关推荐

发表回复

登录后才能评论