本文主要是介绍在校学生课余时间用React肝出一款个人博客系统,前台+后台管理,求指点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1. 前言
之前我使用hexo
搭建过个人博客。hexo
很强大,渲染页面速度快,支持markdown
语法,可以一键部署,还可以扩展各种插件。
但hexo
搭建的是静态页面,每次更新文章,都要重新生成静态页面,再部署页面。hexo
也没有后台管理,想要修改发布的文章,只能修改源代码,再重新生成页面。所以很早之前就想写一个自己的博客系统,由博客展示页面和后台管理页面构成,通过后台管理页面,可以实时更新、发布文章,非常方便。但在当时还没有能力写出这样一个系统,就一直没有去做。
后来学习了React
之后,想尝试下写自己的博客,就每天课余时间写一点,最后写出来了 😅😅😅。
由于之前有搭建过hexo
博客,所以就按照之前自己hexo
博客的功能来写,基本的功能有文章管理、文章搜索、分类/标签、图库、说说、留言板/评论、友链、小作品页面、建站日志时间轴、关于页面等。但是很多功能还不完善,不具有通用性,只适用于本博客,以后会慢慢改进 🧐🧐🧐!
2. 仓库地址
1. 博客展示页面
演示地址:「飞鸟小站」
仓库地址:「GitHub」
2. 后台管理页面
演示地址:「飞鸟小站后台」
点击
游客
按钮即可使用游客身份浏览!
仓库地址:「GitHub」
3. 用到的技术/工具
🔖 博客主要使用到的技术如下:
前端(博客页面+后台管理):
React
脚手架Create-React-App
- 状态集中管理工具
Redux
- 前端路由
React-Router
AntD
组件库- 今日诗词提供首页的诗句
- 时间格式化工具moment
markdown
格式渲染工具marked- 代码高亮渲染工具highlight.js
- 其他第三方包
后端:
后端使用腾讯云CloudBase
云端一体化后端云服务,包括:
- 用户管理:管理员登录、访客匿名用户登录
- 数据库:存放管理员的博客数据
- 网站托管:托管后台管理页面
其他:
- 评论回复的邮箱提醒
API
,使用Node.js
编写,运行在自己的阿里云服务器上 - 已配置SSL 证书,开启HTTPS访问
- 博客展示页面托管于腾讯云开发静态文件托管
- 图床使用阿里云OSS
Webify
:应用托管,自动部署后台管理页面
4. 主要功能
1. 博客展示页面
- 首页预览所有文章
- 查看文章评论、发布评论、评论回复
- 搜索文章:根据关键字搜索、分类搜索、标签搜索
- 查看相册
- 查看说说
- 查看留言板留言、发布留言、留言回复
- 查看友链、访问友链
- 查看小作品
- 查看建站日志时间轴
- 查看关于本站/关于我
- 进入后台管理页面
2. 后台管理页面
管理是指:对数据的增、删、改、查。
-
首页预览博客基本数据(文章数、草稿数、友链数等),管理分类、标签
-
文章管理、草稿管理
-
相册管理
-
说说管理
-
查看留言、评论,删除留言、评论
-
友链管理
-
小作品管理
-
关于页面文字管理
-
建站日志管理
5. 不断改进
由于时间有限、本人能力有限,博客系统还有很多不足之处,会在学习新知识的同时不断改进博客。
也请各路大佬多多指点 😆😆😆!
📘📘欢迎在我的博客上访问:
https://lzxjack.top/
这篇关于在校学生课余时间用React肝出一款个人博客系统,前台+后台管理,求指点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!