前言

花了不少时间完成了 39222 个人主页平台项目 的重构与开发。这篇文章来回顾一下整个项目。

项目概览

39222 是一个个人主页平台，用户可以在上面创建和管理自己的个人主页，类似 Linktree 或 Carrd 的概念。

技术栈

  • 前端： HTML + CSS + JavaScript（纯原生，无框架）
  • 后端： Node.js + Express
  • 数据库： 本地存储 / JSON
  • 部署： 本地服务器

项目交付物

前台页面

  • profile.html（39K）— 用户个人主页

    • 三种主题切换（温暖奶油风、新粗野主义、手绘风）
    • 打字机效果、呼吸灯加载动画
    • Hitokoto 随机一言
    • 磨砂玻璃卡片 UI
    • 实时访客计数、Web Vitals 性能指标

  • index.html（5K）— 平台首页

    • 展示平台介绍与已注册用户列表
  • register.html / login.html / 404.html — 注册、登录、404 页面

管理后台

  • user-admin.html（45K）— 用户管理后台

    • 统计面板（趋势图、浏览器分布、Web Vitals、访客地图）
    • 配置管理、技能管理、项目管理的完整 CRUD
    • 三种主题切换

  • super-admin.html（13K）— 超管页面

    • 用户列表与权限管理

后端 API

整套 RESTful API：

接口功能
GET /api/platform平台配置 + 用户列表
GET /api/site/:slug用户公开数据
POST /api/register用户注册
POST /api/login用户登录
GET/PUT /api/me/config个人配置管理
GET/POST/PUT/DELETE /api/me/skills技能 CRUD
GET/POST/PUT/DELETE /api/me/projects项目 CRUD
PUT /api/me/account修改账号
DELETE /api/super/delete超管删除用户

保留的功力

  • 三种精美主题（温暖奶油、粗野主义、手绘风）
  • 打字机效果 + 呼吸灯动画
  • 磨砂玻璃卡片 + Hitokoto 一言
  • 实时访客推送 + Web Vitals 统计

总结

这个项目让我对前端开发的整体流程有了更深的理解。从纯手工写代码到整合各种库，再到后台 API 的设计，每一步都是学习和成长。

路没有尽头，但每写完一段代码，就多了一条可以走的路。

— XiaoQiu, 2026.04.03