4.7 KiB
4.7 KiB
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. 后端启动(开发)
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. 前端启动
npm install
npm run dev
前端运行在 http://localhost:5173,会自动代理 /api 请求到后端
3. 服务器部署(一键打包)
在 Windows 上运行打包命令,生成 Linux 和 Windows 两个版本:
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)
# 数据库配置
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)
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 界面修改数据库和存储配置
- 数据预热: 启动时缓存常用数据,提升响应速度