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 界面修改数据库和存储配置
• 数据预热: 启动时缓存常用数据，提升响应速度