【ReactPress】React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

ReactPress 是使用React开发的开源发布平台,用户可以在支持React和MySQL数据库的服务器上架设属于自己的博客、网站。也可以把 ReactPress 当作一个内容管理系统(CMS)来使用。

前言

在这里插入图片描述

此项目是用于构建博客网站的,包含前台展示、管理后台和后端。

此项目是基于 React + antd + NestJS + NextJS + MySQL 的,项目已经开源,项目地址在 github 上,喜欢的,欢迎给个 star 。
项目地址:https://github.com/fecommunity/reactpress

  • 前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
  • 后端:https://github.com/fecommunity/reactpress/tree/master/server

1. 效果图

1.1 前台展示

pc 端

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

移动端适配

在这里插入图片描述

管理后台

管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 体验地址

网站首页:https://blog.gaoredu.com/
管理后台:https://blog.gaoredu.com/admin

3. 计划

这次是一个完整的全栈式开发,只要部署了这个项目的代码,是完全可以搭建好博客网站的。

环境准备

$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i

配置文件

项目启动后会加载根目录下的 .env 配置文件,请确保MySQL数据库服务和下面的配置保持一致,并提前创建好 reactpress 数据库

DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库

环境准备好后,执行启动命令:

$ pnpm run dev

打开浏览器访问 http://127.0.0.1:3001

4. 收获与感触

学而不用,基本等于没学,因为最近一直在做自己的个人博客网站,所以好久没更新技术文章了;而且是利用业余时间做的,所以经过差不多两个月的搬砖,现在网站终于都上线了。
开发网站的这段时间里,每天晚上几乎都搬砖到接近 11 点,周末的时间大多也在搬砖,每天写完文章,也快 12 点了,搬砖不易啊,喜欢或者觉得不错的,欢迎到 github 上给个 star,谢谢。

5. 文档教程

  • 项目地址: https://github.com/fecommunity/reactpress
  • next.js 源码:https://github.com/vercel/next.js
  • nest.js 源码:https://github.com/nestjs/nest

ReactPress 系列文章

ReactPress 是什么?:https://blog.csdn.net/m0_37981569/article/details/143495843
ReactPress—基于React的免费开源博客&CMS内容管理系统:https://blog.csdn.net/m0_37981569/article/details/143455403
ReactPress数据库表结构设计全面分析:https://blog.csdn.net/m0_37981569/article/details/143662572
ReactPress 安装指南:从 MySQL 安装到项目启动:https://blog.csdn.net/m0_37981569/article/details/143662086
ReactPress – An Open-Source Publishing Platform Built with React:https://blog.csdn.net/m0_37981569/article/details/143635836
ReactPress:构建高效、灵活、可扩展的开源发布平台:https://blog.csdn.net/m0_37981569/article/details/143635551
ReactPress技术揭秘:https://blog.csdn.net/m0_37981569/article/details/143634709
ReactPress:深入解析技术方案设计与源:https://blog.csdn.net/m0_37981569/article/details/143610300
ReactPress:重塑内容管理的未来:https://blog.csdn.net/m0_37981569/article/details/143610158
ReactPress系列—NestJS 服务端开发流程简介:https://blog.csdn.net/m0_37981569/article/details/143536219
ReactPress系列—Next.js 的动态路由使用介绍:https://blog.csdn.net/m0_37981569/article/details/143535847

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912903.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pycharm远程调试deepspeed!可用!

本人写代码的习惯就是一定是要从别人优秀的代码中调试学习的,直接运行看的话,可能知道了大概的逻辑但是缺无法知道细节的话(参数的含义或者某某数据格式类型),可能对整体代码逻辑的把控不是狠好,所以还是从…

Redis 中 Bitmap 原理和应用

Bitmap Redis中的Bitmap(位图)是一种较为特殊数据类型,它以最小单位bit来存储数据,我们知道一个字节由 8个 bit 组成,和传统数据结构用字节存储相比,这使得它在处理大量二值状态(true、false 或…

基于 STM32 的天气时钟项目中添加天气数据的网络获取功能

基于 STM32 的天气时钟项目中添加天气数据的网络获取功能,您需要确保您的开发环境具备网络连接能力。这里以 ESP8266 Wi-Fi 模块为例,详细说明如何实现网络获取天气数据的功能。 1. 硬件连接 连接 ESP8266 模块 请参考以下连接方式,将 ESP82…

mysql-springboot netty-flink-kafka-spark(paimon)-minio

1、下载spark源码并编译 mkdir -p /home/bigdata && cd /home/bigdata wget https://archive.apache.org/dist/spark/spark-3.4.3/spark-3.4.3.tgz 解压文件 tar -zxf spark-3.4.3.tgz cd spark-3.4.3 wget https://raw.githubusercontent.com/apache/incubator-celeb…

【Spring】体系结构

Spring框架至今集成了多个模块,这些模块分布在数据访问/集成(Data Access/Integration)、Web层、面向切面的编程(Aspect Oriented Programming,AOP)模块、植入(Instrumentation)模块…

软件缺陷等级评定综述

1. 前言 正确评估软件缺陷等级,在项目的生命周期中有着重要的作用: 指导缺陷修复的优先级和资源分配 在软件开发和维护过程中,资源(包括人力、时间和资金)是有限的。通过明确缺陷的危险等级,可以帮助团队合…

Linux:vim命令总结及环境配置

文章目录 前言一、vim的基本概念二、vim模式命令解析1. 命令模式1)命令模式到其他模式的转换:2)光标定位:3)其他命令: 2. 插入模式3. 底行模式4. 替换模式5. 视图模式6. 外部命令 三、vim环境的配置1. 环境…

Obsidian的Git插件设置配置全流程 -- 简单的电脑端多平台同步方案及常见问题

Obsidian的Git插件设置配置全流程 -- 简单的电脑端多平台同步方案及常见问题 参考文章引言1. git 介绍及安装2. git 本地配置及远程仓库链接3. obsidian 的 git 插件4. 常用的使用场景和对应的命令4.1. 本地仓库已推送到远端,如何在另一个电脑上第一次同步4.2 多端同…

【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美

文章目录 C 位运算详解:基础题解与思维分析前言第一章:位运算基础应用1.1 判断字符是否唯一(easy)解法(位图的思想)C 代码实现易错点提示时间复杂度和空间复杂度 1.2 丢失的数字(easy&#xff0…

Redis(3):持久化

一、Redis高可用概述 在介绍Redis高可用之前,先说明一下在Redis的语境中高可用的含义。   我们知道,在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常服务(99.9%、99.99%、9…

高亚科技签约酸动力,助力研发管理数字化升级

近日,中国企业管理软件资深服务商高亚科技与广东酸动力生物科技有限公司(以下简称“酸动力”)正式签署合作协议。借助高亚科技的8Manage PM项目管理软件,酸动力将进一步优化项目过程跟踪与节点监控,提升研发成果的高效…

大模型领域最值得看的 9 本新书,找到了

在人工智能革命的浪潮中,程序员们正站在技术变革的最前沿。本书单精选了关于人工智能在各行业应用的最新著作,从医疗诊断到金融风控,从智能制造到智慧城市,全面展现AI如何重塑行业生态,推动社会进步。通过阅读这些书籍…

加入GitHub Spark需要申请

目录 加入GitHub Spark需要申请 GitHub Spark 一、产品定位与特点 二、核心组件与功能 三、支持的AI模型 四、应用场景与示例 五、未来展望 六、申请体验 加入GitHub Spark需要申请 GitHub Spark 是微软旗下GitHub在2024年10月30日的GitHub Universe大会上推出的一款革…

Rust移动开发:Rust在iOS端集成使用介绍

iOS调用Rust 上篇介绍了 Rust移动开发:Rust在Android端集成使用介绍, 这篇主要看下iOS上如何使用Rust,Rust可以给移动端开发提供跨平台,通用组件支持。 该篇适合对iOS、Rust了解,想知道如何整合调用和编译的,如果想要…

【月之暗面kimi-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞 …

2024 CSS保姆级教程四

CSS中的动画 CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块​ 即指元素从一种样式逐渐过渡为另一种样式的过程​ 常见的动画效果有很多,如平移、旋转、缩放等等&#…

[C++11] Lambda 表达式

lambda 表达式(Lambda Expressions)作为一种匿名函数,为开发者提供了简洁、灵活的函数定义方式。相比传统的函数指针和仿函数,lambda 表达式在简化代码结构、提升代码可读性和编程效率方面表现出色。 Lambda 表达式的基本语法 在…

AI4SCIENSE(鄂维南院士:再谈AI for Science)

鄂维南院士:再谈AI for Science_哔哩哔哩_bilibili 以往处理高维问题 量子力学:单变量乘积 统计学:旋转 AI4S 处理数据 蛋白质折叠? 不是纯粹的数据驱动 物理学等学科基本原理 例:分子动力学 数据模型 流程图 这…

接收nVisual中rabbitmq数据不成功问题排查

rabbitmq服务部署成功的情况下,消息对接不成功一般原因为消息发送失败,发送失败大多数可能为global_settings表配置错误。下面从两个方面解决消息对接不成功问题。 1.数据是否成功发送 检查global_settings表中rabbitmq发送消息配置信息是否正确 #MQS…

SpringBoot框架学习总结 及 整合 JDBC Mybatis-plus JPA Redis 我的学习笔记

SpringBoot框架学习总结 及 整合 JDBC Mybatis-plus JPA Redis 我的学习笔记 一、SpringBoot概述二、创建SpringBoot程序1. 使用maven方式创构建2. 使用Spring Initializr构建3. SpringBoot热部署4. SpringBoot的跨域处理 三、基础配置1.配置文件的作用2.配置文件格式2.yaml3.S…