简易博客系统

1.1 开始运行

整个项目在Visual Studio Code中完成，先要在该软件的终端启动服务器，其次要打开Windows上的cmd启动mongodb数据库，连接成功后，打开浏览器输入启动端口http://127.0.0.1:3007，进入首页，会展示所有用户发布的文章

在这里插入图片描述

1.2 进行注册登录

1.2.1 注册

点击上图的注册，即可进入注册页面
在这里插入图片描述

用户输入邮箱，同时邮箱格式要正确，然后输入密码并且确认密码，两次密码要一致，否则会出现提示

最后点击注册，会弹出提示框显示注册成功，注册成功之后将邮箱、密码、默认头像、默认昵称，ID等传入数据库，并且用户ID，昵称，头像会保存到本地浏览器

点击确定即可进入首页

1.2.2 登录

如果该用户已经注册，就可以直接登录
在这里插入图片描述

登录填写的邮箱格式密码正确即可进入首页

1.3 平台首页

登录或注册之后进入首页，会显示当前用户的昵称，头像，并且会显示所有用户发布的所有文章，文章列表会显示发布该文章的用户头像昵称以及时间，还有文章的标题及部分内容显示。

在这里插入图片描述

点击文章列表中每一行的内容就可进入该文章的文章详情

在文章详情下面用户可对该文章进行评论，
评论成功之后，会显示文章下面，同时数据库也会添加该评论

在这里插入图片描述

点击个人中心，即可进入个人中心页面
在这里插入图片描述

点击首页的退出即可退出到登录界面

1.4 个人中心

进入个人中心，可以修改自己的个人信息

1.4.1 修改密码

进入个人中心，点击侧导航栏进入修改修改密码页面
在这里插入图片描述

输入想更换的密码，输入不能为空，然后点击确认后会弹出框

点击确定就会退出到登录页面，重新登录，输入新密码会显示登录成功再次进入首页

1.4.2 修改昵称

点击侧导航栏中的修改昵称即进入该页面
在这里插入图片描述

输入新的更改的昵称，点击确认修改即可修改成功，数据库也会更新头像的数据
3.4.3 修改头像
点击侧导航栏中的修改头像即进入该页面

点击右侧圆圈“点击选择头像”，然后会弹出文件夹，用户可从文件夹中更换头像，选择之后会弹出框，表示修改成功。
修改成功之后就可显示出更新后的图像

1.4.4 文章管理

点击侧导航栏中的文章管理即进入该页面
在这里插入图片描述

点击每一行后面的编辑，可进入文章详情的页面，进行修改

可以修改文章标题和文章内容，修改完之后，点击如下图所示的确认或取消
点击确认之后，即可修改成功
点击取消之后，则回到原页面

点击删除会弹出是否要删除的页面，点击删除之后就可从页面删除，同时也会删除该文章下的评论，也会将该文章和评论从数据库中删除

1.4.5 注销账号

点击侧导航栏中的注销账号即进入该页面
在这里插入图片描述

点击确认之后则账号被注销，注销后数据库也会删除该用户

1.5 发布文章

点击顶部导航栏的“发文章”，即可进入写文章界面

在这里插入图片描述

文章的标题，内容完成之后，点击右上角的发布就可以发布成功，发布成功之后直接跳转到首页，首页就显示了此篇文章。此外，文章发布成功之后数据库中也会同时添加进该文章

1.6 后台管理

后台设置有管理员，管理员可直接登录查看数据
管理员权限可以对后台用户、文章、评论进行操作
使用管理员的邮箱密码登录就直接进入后台

1.6.1数据可视化

进入后台显示如下图所示，最上面一行显示所有用户，文章，评论的总数，下面两个图都是对用户，文章，评论的总数利用Echarts进行可视化，可以清晰的显示各类总数
在这里插入图片描述

1.6.2 用户管理

点击右侧导航栏的用户管理进入用户管理页面，显示注册的所有用户，每一行会显示用户的头像，昵称，ID及邮箱
在这里插入图片描述

鼠标到每一行会显示出删除的按钮，点击删除，确认之后会从数据库中删除，并且会删除该用户的文章，评论数据。
最下面的数字是对用户列表进行分页，方便查看。

1.6.3 文章管理

点击右侧导航栏的文章管理进入文章管理页面，显示注册的所有文章，每一行会显示发布该文章的用户的头像，昵称，文章的标题和部分内容，文章ID以及发布该文章的时间
在这里插入图片描述

鼠标到每一行会显示出删除的按钮，点击删除，确认之后会从数据库中删除该文章，该页面也不会显示。
同时也可以进行分页查看。
如果用鼠标点击每一行的文章内容部分就会跳转到前台，查看文章详情

1.6.4 评论管理

点击右侧导航栏的评论管理进入评论管理页面，显示注册的所有评论，每一行会显示该评论的头像，昵称，评论内容及发布评论的时间。

在这里插入图片描述

鼠标到每一行会显示出删除的按钮，点击删除，确认之后会该评论会从数据库中删除。同时也可以进行分页查看。
最后要退出，点击右侧导航的退出即可。