WSの小屋

关于我

wsvaio

WS

前端开发工程师 | 全栈开发者 | 技术博主

记录编程旅程的点滴，分享技术探索的心得

联系我:

关于本站

不知是因为程序员健忘，还是健忘的是我。

经常遇到一些似曾相识，却又无从想起的问题。

于是便有了此站，将那些问题无情地记录下来，未来有需要的时候再认真地扒拉出来……

这不仅是一个博客，更是我的数字花园、知识库和成长轨迹。这里记录着从前端到全栈的技术探索，从理论到实践的项目经验，以及从问题到解决方案的思考过程。

✨ 站点特色:

  • 📝 文章管理: 支持 Markdown 编辑、分类标签、评论互动
  • 🎵 音乐播放: 内置在线音乐播放器，支持歌词显示
  • 🌸 Live2D: 可爱的看板娘互动体验
  • 📱 PWA 支持: 离线访问、桌面图标、推送通知
  • 🎨 主题切换: 明暗主题自由切换，个性化配色
  • 🔍 SEO 优化: 完整的 sitemap、robots 协议、百度收录
  • 🎯 响应式设计: 完美适配 PC 和移动端

相关技术

想要完全独立搭建一个网站，只需要三步：

  1. 设计 → 参考优秀主题，融入个人风格
  2. 开发 → 全栈自研，从前端到后端
  3. 部署 → 容器化编排，自动化 CI/CD

项目设计

参考了很多博客主题，包括但不限：butterfly、sakura、cuteen、volantis……

在借鉴的基础上，融入了自己的设计理念和审美偏好，打造了独一无二的个人风格。

前端开发

身为一名前端开发工程师，这相当于本职工作了，不同的是，这次是为自己打工……

基于 Nuxt 4 构建服务端渲染应用，结合 Vue 3.5 Composition API 与 <script setup> 语法糖，使用 Pinia v3 进行状态管理，通过 UnoCSS 实现原子化 CSS 样式，集成 VueUse 组合式工具库提升开发效率。

核心特性:

  • ✨ Vue Macros 响应式语法糖支持
  • 🎨 Google Fonts 自定义字体（ZCOOL KuaiLe）
  • 🔄 页面过渡动画与布局切换效果
  • 📦 组件自动导入，按需加载
  • 🎯 TypeScript 类型安全

核心技术栈

框架与运行时:

  • Nuxt 4.4.2 - 基于 Vue 3 的全栈框架
  • Vue 3.5.30 - 渐进式 JavaScript 框架
  • Vue Router 5.0.3 - 官方路由管理器
  • TypeScript - 类型安全的 JavaScript 超集

UI 与样式:

  • UnoCSS 66.6.7 - 即时原子化 CSS 引擎
  • Less 4.6.4 - CSS 预处理器
  • @iconify/json - 图标库（2.2.451+ 图标）

状态管理与工具:

  • Pinia 3.0.4 - Vue 3 官方状态管理库
  • @vueuse/core 14.2.1 - Vue 组合式工具集
  • @vue-macros/reactivity-transform 3.1.2 - Vue 响应式语法糖

Markdown 与内容渲染:

  • md-editor-v3 6.4.0 - Markdown 编辑器
  • marked 17.0.4 - Markdown 解析器

其他依赖:

  • @wsvaio/utils 1.0.22 - 自定义工具库
  • crypto-es 3.1.3 - 加密算法库
  • colord 2.9.3 - 颜色处理工具
  • ua-parser-js 2.0.9 - UserAgent 解析
  • vue-request 2.0.4 - Vue 请求库

代码质量:

  • Oxlint 1.57.0 - Rust 编写的快速 linter
  • oxfmt 0.42.0 - 代码格式化工具
  • oxlint-tsgolint 0.18.1 - TypeScript 支持
nuxt vite vue vueuse pinia unocss less-dark typescript oxlint

后端开发

不会点后端，都不好意思说自己是前端（bushi）。

基于 Nitro 引擎构建高性能 API 服务（Bun 运行时），使用 Prisma ORM v7.5 管理数据库操作，PostgreSQL 作为主数据库，通过 JWT 实现身份认证，集成 Nodemailer 发送邮件通知。

API 模块:

  • 🔐 用户系统: 注册登录、信息管理、权限控制
  • 📝 文章管理: CRUD 操作、分类标签、评论关联
  • 💬 评论系统: 嵌套回复、邮件通知、审核机制
  • 🏷️ 标签分类: 多维度内容组织
  • 👥 友情链接: 友链申请与管理
  • 🎵 音乐管理: 歌曲上传、歌词同步、封面展示
  • 📁 文件存储: 图片上传、二进制数据管理
  • 👨‍💼 后台管理: 管理员认证、数据统计

中间件:

  • JWT 鉴权中间件（部分接口豁免）
  • 全局错误处理
  • 请求日志记录

后端技术栈

运行时与框架:

  • Bun - 高性能 Node.js 替代品
  • Nitro - Nuxt 内置的服务端引擎

数据库与 ORM:

  • Prisma 7.5.0 - 下一代 Node.js ORM
  • @prisma/client 7.5.0 - Prisma 客户端
  • @prisma/adapter-pg 7.5.0 - PostgreSQL 适配器
  • PostgreSQL - 关系型数据库

认证与工具:

  • jsonwebtoken 9.0.3 - JWT 实现
  • nodemailer 8.0.2 - 邮件发送
  • @types/jsonwebtoken 9.0.10 - JWT 类型定义
  • @types/nodemailer 7.0.11 - Nodemailer 类型定义
  • @types/ua-parser-js 0.7.39 - UA 解析类型定义

自定义包:

  • @wsvaio/api - 自定义 API 工具包
  • @wsvaio/pinia-plugin-persist 1.0.3 - Pinia 持久化插件
bun pnpm nitro prisma postgresql jwt

运维部署

看似遥不可及，实际一点都不接近。目的很存粹，能跑就行（笑）。

全站采用容器化部署，所有服务打包成 Docker 镜像，通过 Kubernetes 编排管理，使用 GitHub Actions 实现完整的 CI/CD 流程。从代码提交到自动构建、测试、部署，全程无需人工干预。

部署流程:

  1. 💻 本地开发 → pnpm dev 热更新调试
  2. 🔧 代码提交 → Git push 触发 GitHub Actions
  3. 🏗️ 自动构建 → Docker Buildx 多架构镜像
  4. 📦 镜像推送 → 阿里云容器镜像仓库
  5. 🚀 滚动更新 → K8s 自动重启 Deployment
  6. 🌐 域名解析 → Nginx 反向代理

Docker 配置:

  • 多阶段构建优化镜像体积
  • Prisma migration 自动执行
  • Bun 运行时降低资源占用
  • 端口映射：7100

全站容器化部署，所有服务打包成 Docker 镜像，通过 Kubernetes 编排管理，使用 GitHub Actions 实现完整的 CI/CD 流程。从代码提交到自动构建、测试、部署，全程无需人工干预。

DevOps 工具链

开发与构建:

  • Git - 版本控制
  • GitHub - 代码托管与协作
  • pnpm - 高效包管理器（legacy-peer-deps=true）
  • Node.js LTS - JavaScript 运行时

CI/CD:

  • GitHub Actions - 自动化工作流
    • deployment.yml: 构建镜像 + K8s 部署
  • Docker Buildx - 多平台镜像构建
  • QEMU - 跨架构模拟

容器与编排:

  • Docker - 容器化技术
  • Kubernetes (k8s) v1.29.2 - 容器编排
    • Deployment: blog
    • Namespace: blog
  • kubectl - K8s 命令行工具

网络与服务器:

  • Nginx - 反向代理与负载均衡
  • Ubuntu Server - Linux 操作系统

镜像仓库:

  • 阿里云容器镜像服务（杭州）
  • 镜像地址：registry.cn-hangzhou.aliyuncs.com/wsvaio/blog
git github github docker kubernetes nginx ubuntu pnpm

🚀 快速开始

环境要求

  • Node.js: LTS 版本（推荐 20+）
  • pnpm: 8.0+
  • PostgreSQL: 14+
  • Docker: 20+ （可选，用于容器化部署）

安装依赖

bash 复制代码 
pnpm install

配置环境变量

复制 .env.example 为 .env，并修改数据库连接等配置：

bash 复制代码 
cp .env.example .env

数据库迁移

bash 复制代码 
# 生成 Prisma 客户端
pnpm prisma generate

# 执行数据库迁移
pnpm prisma migrate deploy

启动开发服务器

bash 复制代码 
pnpm dev

访问 http://localhost:3000

生产构建

bash 复制代码 
# 构建
pnpm build

# 预览
pnpm preview

Docker 部署

bash 复制代码 
# 构建镜像
docker build --build-arg DATABASE_URL=your_database_url -t blog:latest .

# 运行容器
docker run -d -p 7100:7100 blog:latest

📂 项目结构

复制代码 
.
├── app/                      # 前端应用目录
│   ├── assets/              # 静态资源（CSS、图片）
│   ├── components/          # Vue 组件
│   ├── composables/         # 组合式函数
│   ├── layouts/             # 布局组件
│   ├── middleware/          # 路由中间件
│   ├── pages/               # 页面组件
│   ├── plugins/             # 插件
│   ├── stores/              # Pinia 状态管理
│   └── utils/               # 工具函数
├── server/                  # 后端服务目录
│   ├── api/                 # API 路由
│   ├── middleware/          # 服务端中间件
│   ├── plugins/             # 服务端插件
│   └── utils/               # 服务端工具
├── prisma/                  # 数据库相关
│   ├── migrations/          # 数据库迁移文件
│   └── schema.prisma        # Prisma Schema
├── public/                  # 公共静态资源
├── .github/workflows/       # GitHub Actions
├── Dockerfile               # Docker 配置
├── nuxt.config.ts           # Nuxt 配置
├── uno.config.ts            # UnoCSS 配置
└── tsconfig.json            # TypeScript 配置

🛠️ 开发规范

代码命令

bash 复制代码 
# 代码检查
pnpm lint

# 自动修复
pnpm lint:fix

# 代码格式化
pnpm fmt

# 检查格式
pnpm fmt:check

Git 提交规范

遵循 Conventional Commits 规范：

  • feat: 新功能
  • fix: 修复 bug
  • docs: 文档更新
  • style: 代码格式调整
  • refactor: 重构
  • test: 测试相关
  • chore: 构建/工具链变更

示例：

bash 复制代码 
git commit -m "feat: 添加文章搜索功能"
git commit -m "fix: 修复评论列表分页错误"

📄 功能模块

前端功能

  • ✅ 文章列表与分页
  • ✅ 文章详情与目录导航
  • ✅ Markdown 渲染与代码高亮
  • ✅ 标签与分类筛选
  • ✅ 评论系统（嵌套回复）
  • ✅ 用户中心
  • ✅ 音乐播放器
  • ✅ Live2D 互动
  • ✅ 主题切换
  • ✅ PWA 离线访问
  • ✅ 响应式布局

后台管理

  • ✅ 管理员登录（JWT 认证）
  • ✅ 文章管理（CRUD）
  • ✅ 评论管理
  • ✅ 标签/分类管理
  • ✅ 友情链接管理
  • ✅ 音乐管理
  • ✅ 文件上传
  • ✅ 用户管理

API 接口

完整 RESTful API 文档（开发中...）

🔧 技术亮点

1. Nuxt 4 新特性

  • 使用最新的 Nuxt 4 框架
  • 改进的 TypeScript 支持
  • 优化的构建性能
  • 更小的打包体积

2. Bun 运行时

  • 相比 Node.js 更快的启动速度
  • 更低的内存占用
  • 原生支持 TypeScript
  • 内置测试工具和打包器

3. Prisma ORM

  • 类型安全的数据库操作
  • 自动生成的 TypeScript 类型
  • 直观的 Schema 定义
  • 强大的迁移工具

4. UnoCSS 原子化

  • 按需生成的 CSS
  • 极快的构建速度
  • 高度可定制的主题
  • 支持 Attributify 模式

5. K8s 自动化部署

  • 滚动更新零停机
  • 自动故障恢复
  • 弹性伸缩能力
  • 完整的 CI/CD 流程

📊 数据库设计

核心表结构

  • article: 文章表
  • type: 分类表
  • tag: 标签表
  • comment: 评论表
  • user: 用户表
  • admin: 管理员表
  • friend: 友链表
  • music: 音乐表
  • file: 文件表

详细 Schema 请查看 prisma/schema.prisma

🎨 界面预览

首页

展示最新文章、热门文章、时间线等

文章页

Markdown 渲染、目录导航、评论互动

音乐播放器

在线播放、歌词同步、歌手信息

个人中心

用户信息管理、发表文章、查看评论

📝 开发计划

  • 文章搜索功能优化
  • 评论邮件通知
  • 后台管理面板
  • 数据统计与分析
  • SEO 进一步优化
  • 移动端体验优化
  • 更多主题皮肤
  • API 文档完善

🤝 贡献指南

欢迎提出 Issue 和 Pull Request！

  1. Fork 本项目
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 开启 Pull Request

📄 开源协议

MIT License

🙏 致谢

感谢以下开源项目：

以及所有为此项目做出贡献的开源作者！

📮 联系方式

如果觉得项目不错，请给个 ⭐ Star 支持一下吧！

Made with ❤️ by WS

Comments | 0条评论