在校学生课余时间用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

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限:所有者读写js,其他

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

linux系统中java的cacerts的优先级详解

《linux系统中java的cacerts的优先级详解》文章讲解了Java信任库(cacerts)的优先级与管理方式,指出JDK自带的cacerts默认优先级更高,系统级cacerts需手动同步或显式... 目录Java 默认使用哪个?如何检查当前使用的信任库?简要了解Java的信任库总结了解 Java 信

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引