## 前言
![2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png)

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

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



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

## 1. 效果图
### 1.1 前台展示

#### pc 端
![2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ902D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ902D..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ908G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ908G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png)


#### 移动端适配
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png)


### 管理后台
管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png)




## 2. 体验地址

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

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


### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

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

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

环境准备好后，执行启动命令：

```bash
$ 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



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