# ReactPress 是什么？


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

## 使用场景

- **文档**

  ReactPress 附带一个专为技术文档设计的默认主题。你现在正在阅读的这个页面就是基于这个系统生成的页面。

- **博客、档案和营销网站**

  ReactPress 支持完全的自定义主题，具有标准 React 应用程序的开发体验。基于 NextJS 构建还意味着可以直接利用其生态系统中丰富的 SSR 能力。此外，ReactPress 提供了灵活的 API 来加载数据(本地或远程)，也可以动态生成路由。

- **CMS 系统**
 ReactPress 内置的 SSR 具有较好的SEO，方便搜索引擎快速收录网页，也非常适合于大型CMS内容管理系统来使用。

## ✨ 特性

- 📦 技术栈：基于 `React` + `NextJS` + `MySQL 5.7` + `NestJS` 构建
- 🌈 组件化：基于 `antd 5.20` 最新版的交互语言和视觉风格
- 🌍 国际化：支持中英文切换，国际化配置管理能力
- 🌞 黑白主题：支持亮色和暗黑模式主题自由切换
- 🖌️ 创作管理：内置 `MarkDown` 编辑器，支持文章写文章、分类目录管理，标签管理
- 📃 页面管理：支持自定义新页面
- 💬 评论管理：支持内容评论管理
- 📷️ 媒体管理：支持文件本地上传和 `OSS` 文件上传
- 📱 移动端：完美适配移动端H5页面
- ...

## 开发体验

ReactPress 旨在使用 Markdown 生成内容时提供出色的开发体验。

- **React 组件化**：对于React开发者十分友好，可以使用组件化的设计模式来开发。


- **NextJS 驱动**：即时服务器启动，始终立即反映 (<100ms) 编辑变化，无需重新加载页面。

- **内置 Markdown 编辑器**：frontmatter、表格、语法高亮……应有尽有。具体来说，VitePress 提供了许多用于处理代码块的高级功能，使其真正成为技术文档的理想选择。

- **增强的 NextJS**：服务端整体基于 NestJS 框架，让熟悉NodeJS/JavaScript的开发者可以快速上手服务端的开发。



## ReactPres 与 VuePress 的区别

VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
ReactPress 是一个动态站点管理系统，内置 MarkDown 编辑器，基于 NextJS 的 SSR 服务端动态渲染能力，可以动态生成静态 HTML 页面。


ReactPress 是什么？


## ⌨️ 本地开发

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

### 文件结构

项目的代码结构如下：

```shell
├─ client // 界面代码
├─ config // 配置文件
├─ locales // 国际化文案
├─ public // 静态资源
├─ scripts // 构建脚本
├─ server // 服务端带吗
└─ package.json
```


### 配置文件

项目启动后会加载根目录下的 `.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


快速开始

# Next.js 的动态路由使用介绍

Next.js 是一个流行的 React 框架，支持服务端渲染、静态站点生成和动态路由等功能，极大地简化了构建现代 Web 应用程序的过程。本文将详细介绍 Next.js 的动态路由功能，并通过简单的代码示例帮助理解。

## 一、动态路由的基本概念

动态路由允许开发者创建灵活的 URL 模式，对于管理不同类型的页面内容尤其有用，例如博客文章、产品页面等，可以根据 ID 或分类来加载相应的内容。

在 Next.js 中，可以通过向页面路径添加方括号 `[param]` 来创建动态路由。例如，`pages/post/[pid].js` 可以匹配 `/post/1`、`/post/abc` 等路由。

## 二、动态路由的使用示例

### 1. 基本动态路由

假设我们有一个博客应用，需要根据文章的 slug 来显示不同的文章详情页。我们可以创建一个 `pages/post/[slug].js` 文件来处理动态路由。

```jsx
// pages/post/[slug].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
      {/* 假设这是从 API 获取数据的部分，实际应用中可能通过 getServerSideProps 或 getStaticProps 实现 */}
    </div>
  );
}
```

在这个例子中，`router.query.slug` 包含了动态路由的参数，即文章的 slug。

### 2. 多个动态路由段

如果我们需要更复杂的路由结构，例如 `/post/abc/comment-123`，可以创建 `pages/post/[slug]/[commentId].js` 文件。

```jsx
// pages/post/[slug]/[commentId].js
import { useRouter } from 'next/router';

export default function PostComment() {
  const router = useRouter();
  const { slug, commentId } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
      <p>Comment: {commentId}</p>
    </div>
  );
}
```

在这个例子中，`router.query.slug` 和 `router.query.commentId` 分别包含了文章的 slug 和评论的 ID。

### 3. 捕获所有路由（Catch-all Routes）

有时我们需要匹配任意深度的嵌套路由，例如 `/shop/clothes/tops/t-shirts`。这时可以使用捕获所有路由（Catch-all Routes），通过在方括号内添加省略号 `...` 来实现。

```jsx
// pages/shop/[...slug].js
import { useRouter } from 'next/router';

export default function Shop() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Shop: {slug.join('/')}</h1>
    </div>
  );
}
```

在这个例子中，`router.query.slug` 是一个数组，包含了所有匹配的路由段。通过 `slug.join('/')` 可以将它们拼接成一个完整的路径。

### 4. 可选捕获所有路由（Optional Catch-all Routes）

通过将参数包含在双方括号中 `[[...slug]]`，可以将捕获所有路由设为可选。例如，`pages/shop/[[...slug]].js` 将匹配 `/shop`、`/shop/clothes`、`/shop/clothes/tops` 等。

```jsx
// pages/shop/[[...slug]].js
import { useRouter } from 'next/router';

export default function OptionalShop() {
  const router = useRouter();
  const { slug = [] } = router.query;

  return (
    <div>
      <h1>Optional Shop: {slug.join('/') || 'Home'}</h1>
    </div>
  );
}
```

在这个例子中，如果路由没有参数，`slug` 将默认为一个空数组，页面将显示 "Optional Shop: Home"。

## 三、客户端导航到动态路由

在 Next.js 中，客户端导航到动态路由是通过 `next/link` 组件实现的。

```jsx
// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          <a>Go to Post ABC</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc/comment-123">
          <a>Go to Comment 123 on Post ABC</a>
        </Link>
      </li>
      <li>
        <Link href="/shop/clothes/tops/t-shirts">
          <a>Go to T-shirts in Tops in Clothes</a>
        </Link>
      </li>
    </ul>
  );
}
```

在这个例子中，`Link` 组件用于创建指向动态路由的链接。

## 四、总结

Next.js 的动态路由功能为开发者提供了极大的灵活性，可以轻松地创建复杂的 URL 模式，并根据路由参数加载相应的内容。通过简单的代码示例，本文介绍了基本动态路由、多个动态路由段、捕获所有路由和可选捕获所有路由的使用方法，以及如何在客户端导航到动态路由。希望这些内容能帮助你更好地理解和应用 Next.js 的动态路由功能。

更多关于NextJS动态路由的使用可以参考：https://nextjs.org/docs/app/building-your-application/routing

页面路由

3. 捕获所有路由（Catch-all Routes）

4. 可选捕获所有路由（Optional Catch-all Routes）

# NestJS 服务端开发流程简介

NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。它使用 TypeScript（但也支持纯 JavaScript）并完全基于 Node.js。NestJS 提供了强大的架构支持，允许开发者使用现代 JavaScript 的特性来编写清晰、可维护的代码。本文将介绍 NestJS 服务端开发的基本流程，并通过简单的代码示例来帮助理解。

## 一、安装 NestJS CLI

首先，你需要安装 NestJS 的命令行工具（CLI），这将简化项目的创建和管理过程。

```bash
npm i -g @nestjs/cli
```

安装完成后，你可以使用 `nest` 命令来创建一个新的 NestJS 项目。

```bash
nest new my-nest-project
```

这将创建一个名为 `my-nest-project` 的新文件夹，并在其中初始化一个 NestJS 项目。

## 二、项目结构

NestJS 项目通常具有以下结构：

```
my-nest-project/
├── node_modules/
├── src/
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── ... (其他文件和文件夹)
├── package.json
├── tsconfig.json
└── ... (其他配置文件)
```

`src` 文件夹包含应用程序的源代码。其中，`app.module.ts` 是应用程序的根模块，`app.controller.ts` 和 `app.service.ts` 分别包含控制器和服务的基本示例。

## 三、创建模块和控制器

在 NestJS 中，模块是组织代码的基本单位。每个模块都有一个与之关联的模块类，该类使用 `@Module` 装饰器进行装饰。

### 1. 创建模块

你可以使用 NestJS CLI 来创建一个新模块。例如，创建一个名为 `cats` 的模块：

```bash
nest generate module cats
```

这将在 `src` 文件夹中创建一个 `cats` 文件夹，并在其中生成一个 `cats.module.ts` 文件。

### 2. 创建控制器

控制器负责处理传入的请求并返回响应。你可以使用以下命令来创建一个新的控制器：

```bash
nest generate controller cats
```

这将在 `cats` 文件夹中生成一个 `cats.controller.ts` 文件。

下面是一个简单的控制器示例，它定义了一个 GET 端点来返回所有猫的信息：

```typescript
// src/cats/cats.controller.ts
import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get()
  findAll(): string {
    return 'This action returns all cats';
  }
}
```

### 3. 将控制器添加到模块中

为了使控制器能够响应请求，你需要将它添加到模块的 `controllers` 数组中：

```typescript
// src/cats/cats.module.ts
import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';

@Module({
  controllers: [CatsController],
})
export class CatsModule {}
```

## 四、创建服务

服务通常用于封装业务逻辑。你可以使用以下命令来创建一个新的服务：

```bash
nest generate service cats
```

这将在 `cats` 文件夹中生成一个 `cats.service.ts` 文件。

下面是一个简单的服务示例，它提供了一个方法来获取所有猫的信息：

```typescript
// src/cats/cats.service.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class CatsService {
  findAll(): string[] {
    return ['cat1', 'cat2', 'cat3'];
  }
}
```

然后，你可以将服务注入到控制器中，并使用它来处理请求：

```typescript
// src/cats/cats.controller.ts
import { Controller, Get, Inject } from '@nestjs/common';
import { CatsService } from './cats.service';

@Controller('cats')
export class CatsController {
  constructor(private readonly catsService: CatsService) {}

  @Get()
  findAll(): string[] {
    return this.catsService.findAll();
  }
}
```

不要忘记在模块中将服务添加到 `providers` 数组中：

```typescript
// src/cats/cats.module.ts
import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
  controllers: [CatsController],
  providers: [CatsService],
})
export class CatsModule {}
```

## 五、将模块添加到根模块中

最后，你需要将新创建的 `CatsModule` 添加到应用程序的根模块中，以便 NestJS 能够识别和加载它。

```typescript
// src/app.module.ts
import { Module } from '@nestjs/common';
import { CatsModule } from './cats/cats.module';

@Module({
  imports: [CatsModule],
})
export class AppModule {}
```

## 六、启动应用程序

现在，你可以启动 NestJS 应用程序了。在项目根目录中运行以下命令：

```bash
npm run start
```

应用程序启动后，你可以打开浏览器并访问 `http://localhost:3000/cats`，你应该会看到返回的所有猫的信息。

## 七、总结

本文介绍了 NestJS 服务端开发的基本流程，包括安装 NestJS CLI、创建项目、创建模块和控制器、创建服务以及将模块添加到根模块中。通过简单的代码示例，希望能够帮助你快速上手 NestJS 并构建自己的服务器端应用程序。


更多关于NestJS的服务端开发流程可以参考：https://docs.nestjs.com/



服务端开发

## 访问站点
本地启动后，可以直接访问：http://localhost:3001

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

## 登录页面

登录之前，需要先注册一个账号，注册成功后登录账号：

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

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

## 进入后台
可以直接访问：http://localhost:3001/admin

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

## 新建文章

可以通过左侧的目录直接选择“新建文章”选项：
![QQ_1730649280585.png](https://api.gaoredu.com/public/uploads/2024-11-03/QQ_1730649280585.png)

## 发布文章
点击右上角的“发布”按钮完成内容发布：
![QQ_1730649303524.png](https://api.gaoredu.com/public/uploads/2024-11-03/QQ_1730649303524.png)


至此，你的第一篇文章就创作好了。

如何创建第一篇博客？


### 环境准备
```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 build
```


### 启动服务
```bash
$ pnpm run pm2
```

至此，ReactPress 服务就启动成功了。

### 代码更新启动
当ReactPress代码更新后，可以按照如下Shell重新启动服务：
```js
# 更新代码
git checkout master
git pull

# 安装依赖&构建
pnpm install
pnpm run build

# 启动进程
pm2 delete @reactpress/server
pm2 delete @reactpress/client
pnpm run pm2

# 开机启动
pm2 startup
pm2 save

```

以上就是ReactPress生成环境的完整部署流程。

ReactPress 生产环境部署流程

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