在校学生课余时间用React肝出一款个人博客系统,前台+后台管理,求指点

本文主要是介绍在校学生课余时间用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肝出一款个人博客系统,前台+后台管理,求指点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806467

相关文章

Linux使用nohup命令在后台运行脚本

《Linux使用nohup命令在后台运行脚本》在Linux或类Unix系统中,后台运行脚本是一项非常实用的技能,尤其适用于需要长时间运行的任务或服务,本文我们来看看如何使用nohup命令在后台... 目录nohup 命令简介基本用法输出重定向& 符号的作用后台进程的特点注意事项实际应用场景长时间运行的任务服

什么是cron? Linux系统下Cron定时任务使用指南

《什么是cron?Linux系统下Cron定时任务使用指南》在日常的Linux系统管理和维护中,定时执行任务是非常常见的需求,你可能需要每天执行备份任务、清理系统日志或运行特定的脚本,而不想每天... 在管理 linux 服务器的过程中,总有一些任务需要我们定期或重复执行。就比如备份任务,通常会选在服务器资

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

SpringBoot使用minio进行文件管理的流程步骤

《SpringBoot使用minio进行文件管理的流程步骤》MinIO是一个高性能的对象存储系统,兼容AmazonS3API,该软件设计用于处理非结构化数据,如图片、视频、日志文件以及备份数据等,本文... 目录一、拉取minio镜像二、创建配置文件和上传文件的目录三、启动容器四、浏览器登录 minio五、

TP-LINK/水星和hasivo交换机怎么选? 三款网管交换机系统功能对比

《TP-LINK/水星和hasivo交换机怎么选?三款网管交换机系统功能对比》今天选了三款都是”8+1″的2.5G网管交换机,分别是TP-LINK水星和hasivo交换机,该怎么选呢?这些交换机功... TP-LINK、水星和hasivo这三台交换机都是”8+1″的2.5G网管交换机,我手里的China编程has

IDEA中的Kafka管理神器详解

《IDEA中的Kafka管理神器详解》这款基于IDEA插件实现的Kafka管理工具,能够在本地IDE环境中直接运行,简化了设置流程,为开发者提供了更加紧密集成、高效且直观的Kafka操作体验... 目录免安装:IDEA中的Kafka管理神器!简介安装必要的插件创建 Kafka 连接第一步:创建连接第二步:选

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

基于Qt实现系统主题感知功能

《基于Qt实现系统主题感知功能》在现代桌面应用程序开发中,系统主题感知是一项重要的功能,它使得应用程序能够根据用户的系统主题设置(如深色模式或浅色模式)自动调整其外观,Qt作为一个跨平台的C++图形用... 目录【正文开始】一、使用效果二、系统主题感知助手类(SystemThemeHelper)三、实现细节