# blog_common

**Repository Path**: ngmuma/blog_common

## Basic Information

- **Project Name**: blog_common
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-24
- **Last Updated**: 2025-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Nestjs, React

## README

# 简记博客系统（NestJS + React）

一个基于 NestJS（后端）与 React（前端）的简洁博客/创作平台。支持注册、登录、发布、编辑、浏览博客等功能，并使用 JWT 进行认证。

## 目录结构

```
nestjs_sys/
├── backend/   # NestJS 服务
└── frontend/  # React 前端
```

## 环境要求

- Node.js ≥ 18（建议 20+）
- npm ≥ 8
- Windows/PowerShell 或 Git Bash（命令示例以 PowerShell 为主）

## 快速开始

### 1. 安装依赖

```powershell
# 后端
cd backend
npm install

# 前端
cd ../frontend
npm install
```

### 2. 配置环境变量

后端 `.env`（已存在示例）：

```
# JWT 配置
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
JWT_EXPIRES_IN=7d

# 应用端口
PORT=3001
NODE_ENV=development
```

说明：
- 当前后端数据库使用 `sqljs`，开发环境会在 `backend/dev.sqlite` 文件中保存数据，无需配置 MySQL。
- 若需要改端口，修改 `backend/.env` 的 `PORT`。

前端 API 地址（可选）：默认指向 `http://localhost:3001`，如需覆盖可在 `frontend/.env` 中设置：

```
REACT_APP_API_URL=http://localhost:3001
# 如需改端口（CRA）：PORT=3002
```

### 3. 启动服务

```powershell
# 启动后端（端口 3001）
cd backend
npm start

# 启动前端（默认端口 3000）
cd ../frontend
npm start
```

> 如需在 PowerShell 指定前端端口：
>
> ```powershell
> $env:PORT=3002; npm start
> ```
>
> 在 Git Bash：
>
> ```bash
> PORT=3002 npm start
> ```

访问：
- 前端：http://localhost:3000/（或你指定的端口）
- 后端：http://localhost:3001/

## 主要功能

- 用户注册/登录，JWT 认证
- 发布、编辑、删除、点赞博客
- 首页博客列表与详情页

## 接口摘要

- `POST /auth/register` 注册
- `POST /auth/login` 登录（返回 `{ token, user }`）
- `GET /auth/profile` 获取个人信息（需 JWT）
- `PUT /auth/profile` 更新个人信息（需 JWT）
- `POST /blog` 发布博客（需 JWT）
- `GET /blog` 获取博客列表
- `GET /blog/:id` 获取博客详情
- `PUT /blog/:id` 编辑博客（需 JWT）
- `DELETE /blog/:id` 删除博客（需 JWT）
- `POST /blog/:id/like` 点赞

## 前端说明

- 技术栈：React + React Router + Styled Components + React Hook Form
- 认证：`localStorage` 保存 `token` 与 `user`，`src/contexts/AuthContext.tsx` 管理登录状态
- 请求封装：`src/services/api.ts` 使用 Axios，自动带上 `Authorization: Bearer <token>`
- API 地址：默认 `http://localhost:3001`，可用 `REACT_APP_API_URL` 覆盖

## 后端说明

- 框架：NestJS
- 认证：JWT（`JWT_SECRET`、`JWT_EXPIRES_IN`）
- 数据库：`sqljs`，数据保存在 `backend/dev.sqlite`，开发环境自动同步
- CORS：默认允许 `http://localhost:3000`、`3001`、`3002`、`5173`

## 常用脚本

```powershell
# 后端
npm run start       # 启动
npm run start:dev   # 监听模式
npm run build       # 构建
npm run test        # 测试

# 前端
npm start           # 开发模式
npm run build       # 生产构建
npm test            # 测试
```

## 常见问题

- 端口占用：修改 `.env` 或用环境变量指定前端 `PORT`。
- 注册报错：
  - "邮箱已被注册"：换一个未使用邮箱。
  - 跨域问题：确保前端端口在后端 CORS 白名单；后端 `main.ts` 已包含 `3000/3001/3002/5173`。
- 401 未授权：token 过期或未登录，前端会自动跳转到登录页。

## 开发建议

- 保留 `package-lock.json` 以保证依赖一致性。
- 如需新增接口，请在后端加 `DTO` + `ValidationPipe` 校验。
- 前端路由跳转使用 `useNavigate`，避免 `window.location.href` 造成全量刷新。