164 lines
4.7 KiB
Markdown
164 lines
4.7 KiB
Markdown
# Jnote-ui
|
||
|
||
博客前端 + 后端完整项目
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
jnote-ui/
|
||
├── server/ # Node.js 后端
|
||
│ ├── src/
|
||
│ │ ├── index.js # 入口
|
||
│ │ ├── config/
|
||
│ │ │ ├── cronScheduler.js # 定时任务调度器
|
||
│ │ │ ├── database.js # 数据库连接
|
||
│ │ │ ├── envManager.js # .env 文件管理
|
||
│ │ │ ├── memoryStore.js # 内存后备存储
|
||
│ │ │ ├── rustfs.js # RUSTFS 对象存储
|
||
│ │ │ └── schema.js # 数据库表结构
|
||
│ │ └── routes/
|
||
│ │ ├── about.js # 关于内容
|
||
│ │ ├── config.js # 服务端配置
|
||
│ │ ├── cron.js # 定时任务
|
||
│ │ ├── posts.js # 文章 CRUD
|
||
│ │ └── settings.js # 设置
|
||
│ ├── .env # 环境配置
|
||
│ └── package.json
|
||
│
|
||
└── src/ # Vue 3 前端
|
||
├── components/ # 组件
|
||
├── composables/ # 组合式函数
|
||
├── i18n/ # 国际化
|
||
├── services/
|
||
│ └── api.js # API 调用层
|
||
├── stores/ # Pinia 状态管理
|
||
├── views/ # 页面视图
|
||
├── router/ # 路由配置
|
||
└── App.vue # 根组件
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 1. 后端启动（开发）
|
||
|
||
```sh
|
||
cd server
|
||
npm install
|
||
|
||
# 编辑 .env 填入数据库连接信息（可选，不填则使用内存存储）
|
||
# DB_HOST=localhost
|
||
# DB_PORT=3306
|
||
# DB_USER=root
|
||
# DB_PASSWORD=your_password
|
||
# DB_NAME=jnote
|
||
|
||
# 启动后端（开发模式热重载）
|
||
npm run dev
|
||
|
||
# 或生产模式
|
||
npm start
|
||
```
|
||
|
||
后端运行在 http://localhost:3000
|
||
|
||
### 2. 前端启动
|
||
|
||
```sh
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
前端运行在 http://localhost:5173，会自动代理 `/api` 请求到后端
|
||
|
||
### 3. 服务器部署（一键打包）
|
||
|
||
在 Windows 上运行打包命令，生成 Linux 和 Windows 两个版本：
|
||
|
||
```sh
|
||
cd server
|
||
npm install
|
||
node package.js
|
||
```
|
||
|
||
打包完成后 `release/` 目录包含：
|
||
- `linux/` - Linux 服务器部署包（jnote-api + start.js + .env）
|
||
- `windows/` - Windows 服务器部署包
|
||
|
||
上传到服务器后直接运行 `node start.js` 即可启动。
|
||
|
||
## 功能模块
|
||
|
||
## 功能模块
|
||
|
||
| 路由 | 页面 | 说明 |
|
||
|------|------|------|
|
||
| `/` | HomeView | 文章列表 |
|
||
| `/post/:id` | PostDetail | 文章详情（Markdown 渲染） |
|
||
| `/post/new` | PostEditorView | 新建文章 |
|
||
| `/post/edit/:id` | PostEditorView | 编辑文章 |
|
||
| `/about` | AboutView | 关于页面 |
|
||
| `/cron` | CronView | 定时任务系统 |
|
||
| `/settings` | SettingsView | 设置（背景、语言、图标） |
|
||
| `/server-config` | ServerConfigView | 服务端配置 |
|
||
|
||
## 技术栈
|
||
|
||
**前端**: Vue 3 + Vite + Pinia + Vue Router + marked
|
||
**后端**: Express + mysql2 + dotenv
|
||
**存储**: MariaDB + RUSTFS 对象存储
|
||
|
||
## 环境变量
|
||
|
||
### 后端 (`server/.env`)
|
||
|
||
```env
|
||
# 数据库配置
|
||
DB_HOST=localhost
|
||
DB_PORT=3306
|
||
DB_USER=root
|
||
DB_PASSWORD=your_password
|
||
DB_NAME=jnote
|
||
|
||
# RUSTFS 对象存储配置
|
||
RUSTFS_ENDPOINT=http://localhost:9001
|
||
RUSTFS_BUCKET=setting
|
||
RUSTFS_ACCESS_KEY=your_key
|
||
RUSTFS_SECRET_KEY=your_secret
|
||
|
||
# 服务器配置
|
||
PORT=3000
|
||
```
|
||
|
||
### 前端 (`.env` 或 `.env.local`)
|
||
|
||
```env
|
||
VITE_API_URL=/api # API 地址，默认为 /api（通过 vite 代理）
|
||
```
|
||
|
||
## API 端点
|
||
|
||
| 端点 | 方法 | 说明 |
|
||
|------|------|------|
|
||
| `/api/posts` | GET/POST | 文章列表/创建 |
|
||
| `/api/posts/:id` | GET/PUT/DELETE | 文章详情/更新/删除 |
|
||
| `/api/about` | GET/PUT | 关于内容 |
|
||
| `/api/settings` | GET/PUT | 设置 |
|
||
| `/api/settings/upload-image` | POST | 上传单张图片到 RUSTFS |
|
||
| `/api/settings/upload-images` | POST | 批量上传图片到 RUSTFS |
|
||
| `/api/cron-tasks` | GET/POST | 定时任务列表/创建 |
|
||
| `/api/cron-tasks/:id` | PUT/DELETE | 更新/删除任务 |
|
||
| `/api/cron-tasks/:id/run` | POST | 立即执行任务 |
|
||
| `/api/config` | GET/PUT | 服务端配置 |
|
||
| `/api/config/restart` | POST | 重启后端服务 |
|
||
| `/api/health` | GET | 健康检查 |
|
||
|
||
## 主要特性
|
||
|
||
- **文章管理**: 创建、编辑、删除文章，支持 Markdown
|
||
- **定时任务**: Cron 表达式调度，支持 GET/POST/PUT/PATCH/DELETE 请求
|
||
- **自定义背景**: 纯色或图片背景，可调节透明度
|
||
- **多语言**: 中英文切换
|
||
- **自定义图标**: 上传本地图片作为网站图标
|
||
- **图片存储**: 上传图片到 RUSTFS 对象存储
|
||
- **服务端配置**: Web 界面修改数据库和存储配置
|
||
- **数据预热**: 启动时缓存常用数据，提升响应速度 |