简易博客系统

简介: 整个项目在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 评论管理

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

在这里插入图片描述

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

目录
相关文章
|
4月前
|
Shell Go 开发工具
使用 Hugo 快速搭建一个云博客系统
使用Hugo快速搭建博客,Hugo是基于Go的静态站点生成器,以其简单、高效著称。[官网](https://gohugo.io/) 提供多种主题,如[m10c](https://themes.gohugo.io/themes/hugo-theme-m10c/)等。在Mac上可通过`brew install hugo`安装。创建站点`hugo new site ~/hugo-blog`,
93 0
使用 Hugo 快速搭建一个云博客系统
|
6月前
|
JSON 前端开发 Java
实现博客系统1
实现博客系统
39 0
实现博客系统1
|
5月前
|
缓存 关系型数据库 MySQL
Thinkphp5技术交流分享个人博客网站源码
Thinkphp5技术交流分享个人博客网站源码
84 0
|
6月前
|
数据库
实现博客系统2
实现博客系统
33 0
|
6月前
|
关系型数据库 MySQL PHP
wordpress博客系统详细安装部署教程
wordpress博客系统详细安装部署教程
wordpress博客系统详细安装部署教程
|
6月前
|
搜索推荐 Java 关系型数据库
基于SSM的博客系统【带后台管理】
基于SSM的博客系统【带后台管理】
|
前端开发 JavaScript 数据安全/隐私保护
|
前端开发
博客系统开发日记
2.如何去除Bootstarp栅格系统默认的15px的padding:https://blog.csdn.net/TsuiXh/article/details/93891357
91 0
|
前端开发 JavaScript
JavaWeb博客系统
JavaWeb博客系统
115 0
|
JSON 前端开发 JavaScript
【JavaWeb项目】博客系统
在网络学完HTTP协议,前端学完html,css,js,后端学完Servlet开发后,做一个博客系统,巩固一下所学知识,并将所学知识运用到实际当中,以此来进一步提升对学习编程的兴趣
【JavaWeb项目】博客系统