文章目录
这里直接使用课程给出的前端页面,并做了一点小的改变,后期在优化过程中可以不断的美化升级。
详细的设计流程可以仔细观看《Spring Boot开发小而美的个人博客》课程的相关部分。
1. 管理后台
管理后台主要是供博主使用,因此页面设计也较为简单,主要分为以下几类:
- 登录页
- 欢迎页
- 博客类别页
- 博客标签页
- 类别/标签新增页
- 博客编辑页
1.1 登录页
登录页用户接收用户输入的用户名和密码进行校验,判断该用户是否在数据库中存在来允许是否可以登录。为了前端校验的需要,这里还不允许输入空白信息进行登录,当输入框空白时,登录会给出提示信息。
1.2 欢迎页
欢迎页主要是根据登录的用户不同,给出不同的欢迎信息,这里初步只是放置了一张图片。后期会放入博客的统计信息分析的结果,逐步进行优化。
1.3 博客管理页
博客管理页主要分为两大部分:
- 搜索框:可以根据标题和分类的复合信息在数据库中进行模糊查询
- 博客列表:这里的列表主要给出了博客相关的描述信息,例如所属的类别、是否推荐博客、状态是发布还是草稿、更新时间,以及关于博客的相关操作,如编辑、删除和新增
1.4 分类管理页
分类管理页主要是管理已有的类别信息,可以编辑或删除已有的类别,也可以根据需要新增其他的类,但是后端逻辑不允许有相同的类别存在。由于这里使用了分页查询在展示结果,因此当类别数超过了阈值后,就会有上一页和下一页的按钮存在,便于换页查看。
1.5 标签管理页
标签管理页和类别管理页几乎相同,这里不再赘述。
1.6 分类/标签新增页
输入具体的类别或标签提交即可将其添加到相应的列表中。
1.6 博客编辑页
博客编辑页允许博主使用Markdown编辑器进行创作,此外还可以选择博文是原创、翻译还是转载,以及添加博客的描述信息,便于在详情页展示。同时还设置了四个单选框,用于设置是否进行推荐、是否显示转载声明、是否打开赞赏按钮和是否允许评论。另外,如果选择保存,那么博客的状态就是草稿;如果选择发布,那么博客的状态就是发布。
2. 前端展示
前端展示部分主要是用于展示博客列表、博客详情、博客信息和博主信息等,主要分为如下几个部分:
- 博客首页
- 分类统计页
- 标签统计页
- 归档列表页
- 博主信息页
- 博客详情页
2.1 博客首页
博客首页分为三大部分:
- 导航栏:导航栏中有分类、标签、归档和关于我,以及全局的搜索栏
- 中间内容:左面是博客列表,右面包含分类列表、标签列表和推荐列表
- 底部:底部包含五部分内容:
- 联系方式:GitHub、CSDN和Email
- 友情链接
- 博客统计信息
- 博客介绍
- 版权声明
其中导航栏和底部是所有页面公用的。
2.2 博客分类页
上面是已有的类别,以及每个类别下文章的数目,下面是每个类别下具体的文章列表。
2.3 博客标签页
上面是已有的标签,以及每个标签下文章的数目,下面是每个标签下具体的文章列表。
2.4 博客归档页
博客归档页是按照年份进行具体归档,其中具体年份又是按照更新时间正序排列。
2.5 关于我
关于我主要是放置博主的一些介绍性的文字,包括个人介绍、技术栈、爱好等等。
2.6 博客详情页
博客详情页主要包含正文部分、赞赏区、转载声明和评论区,其中赞赏、转载声明和评论是否开启在博客发布时设置。另外,评论区分为两级评论模式,而且博主回复和访客评论是否区别显示的。