【SpringBoot搭建个人博客】- 前端页面展示(一)


博客地址:ONESTARの客栈

源码领取方式一:

  • 关注文末公众号【编程日刊】,后台回复【博客】,即可领取源码

源码领取方式二:

欢迎给star以鼓励(^_−)☆

首先感谢B站视屏:小而美的个人博客(直接搜就能找到),博主在视屏的基础上增加修改了些许功能,开发了两套,一套使用jps为持久层,一套使用Mybatis为持久层,由于使用jpa开发的有视屏讲解,很详细,这里主要讲解使用Mybatis为持久层开发的,会出一系列博客进行讲解,前端我会单独拿出来直接用,不会进行讲解,主要是后端的开发,从框架搭建到所有功能实现以及线上部署,都会有详细的讲解,欢迎持续关注本站。话不多说,先来看看前端页面设计。

一、首页

1.主页页面

首页主要是一些文字描述和个人信息,如果你的显示屏分辨率比较高或者页面缩放的比较小的话,可以看到下面有最新推荐专栏

image

2.博文列表

博文列表主要有博文标题、博文简介、作者、时间、访问量、评论数、博文分类和博文首图

image

3.首页底部

底部就是比较常规的一些功能,显示了博主的微信二维码,最新文章和博客运行时间

image

二、博文详情

1.博文标题及信息

展示了文章首图、标题、等信息

image

2.文末评论

文末有文章转载的信息和评论区域,评论具有盖楼功能,分为普通用户和管理员

image

二、分类页面

显示分类名称,点击可以显示不同的分类文章

image

三、时间轴

采用两边分开的阶梯状按照时间顺序来展示

image

四、音乐盒

音乐盒是使用了一个开源的插件,自己进行了修改,主要功能有显示歌曲、歌词、播放、暂停、上一曲、下一曲、音量调节、播放顺序调节、同步歌词等功能

image

五、留言板

功能和博文评论是一样的

image

六、友人帐(友链)

添加友链要求和显示友链

image

七、照片墙

采用了一个开源的插件,自己进行了修改,可以根据屏幕分辨率的不同来显示,放大缩小图片基本不形变

image

点击一张图片显示如下,有一些图片的基本信息,可以左右切换图片

image

八、关于我

静态页面,一些博主的信息

image

九、后台管理

1. 文章管理

可以对文章进行增加、编辑修改、删除,还可以搜索文章

image

新增文章,使用Markdown语法

image

2. 分类管理

可以对分类进行增加、编辑修改、删除

image

3. 友链管理

可以对友链进行增加、编辑修改、删除

image

4. 相册管理

可以对照片进行增加、编辑修改、删除

image

想要查看更多信息,可以直接访问我的博客:ONESTARの客栈

下一篇将讲述数据库的设计

【点关注,不迷路,欢迎持续关注本站】

image


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM