简易博客系统

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

项目地址:简易博客系统

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 评论管理

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

在这里插入图片描述

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

目录
相关文章
|
8月前
|
人工智能 自然语言处理 数据可视化
Agentic Reasoning:推理界RAG诞生!牛津大学框架让LLM学会『组队打怪』:动态调用搜索/代码代理,复杂任务准确率飙升50%
Agentic Reasoning 是牛津大学推出的增强大型语言模型(LLM)推理能力的框架,通过整合外部工具提升多步骤推理、实时信息检索和复杂逻辑关系组织的能力。
305 1
|
Unix Linux
带你快速掌握Linux最常用的命令(图文详解)- 最新版(面试笔试常考)
带你快速掌握Linux最常用的命令(图文详解)- 最新版(面试笔试常考)
167 1
|
弹性计算 运维 安全
万字长文带你了解 CloudOps自动化运维的奥秘,助力云上业务高效稳定运行
阿里云弹性计算团队十三位产品专家和技术专家共同分享云上运维深度实践,详细阐述如何利用CloudOps工具实现运维提效、弹性降本。
424 0
|
数据可视化 网络安全 开发工具
git可视化版本控制工具SourceTree的基本使用
git可视化版本控制工具SourceTree的基本使用
376 0
|
文字识别 算法 计算机视觉
计算机视觉图像常用基本算法(阈值化、形态学变化、模糊)
计算机视觉图像常用基本算法(阈值化、形态学变化、模糊)
404 0
|
消息中间件 存储 前端开发
从0到1 手把手搭建spring cloud alibaba 微服务大型应用框架(十三)rocketmq 篇(1):整体介绍
从0到1 手把手搭建spring cloud alibaba 微服务大型应用框架(十三)rocketmq 篇(1):整体介绍
从0到1 手把手搭建spring cloud alibaba 微服务大型应用框架(十三)rocketmq 篇(1):整体介绍
|
机器学习/深度学习 人工智能 机器人
给AI一个洗衣机,TA会做点啥?斯坦福+FB研究了972种形状,只为教机器人开门
给AI一个洗衣机,TA会做点啥?斯坦福+FB研究了972种形状,只为教机器人开门
197 0
|
C++ 容器
STL容器删除元素的陷阱
今天看Scott Meyers大师的stl的用法,看到了我前段时间犯的一个错误,发现我写的代码和他提到错误代码几乎一模一样,有关stl容器删除元素的问题,错误的代码如下:std::vector mFriendList;.
2041 0