仿 Mac 个人网站开发 ｜项目复盘

一、前言

1.1 灵感来源

早年有幸看到国外大佬做的一个 基于 Web 的 Windows XP 桌面娱乐系统, 那时刚好有搭建一个个人博客的想法, 所以就想是否可以基于 WEB 实现一个仿 Mac UI 的个人博客, 以应用的形式来展示博客各个功能!

1.2 相关链接(求个 Star)

1. 前端开源代码
2. 后端开源代码
3. 组件库(项目开发过程中抽离出独立的组件库)
4. 在线预览(游客权限有限无法查看所有应用)

1.3 效果图如下

二、为什么要写这个项目

1. 将自己所学应用到具体项目, 同时项目所有依赖、框架版本都尽可能保持最新, 以求能够及时掌握最新知识
2. 个人感觉只有不断思考、头脑风暴才能更好的促进成长, 通过在项目对产品、架构、UI、交互、项目部署、需求管理等进行深入思考, 从而扩展自己的能力
3. 体验后端(node)开发, 了解每个功能模块整体运行的流程
4. 将自己的一些奇思妙想, 在具体项目中实现出来, 能够给自己带来满满成就感, 让自己对技术时刻保持着热情
   ……

三 技术栈

3.1 前端

1. 使用 React Hooks 以函数式组件来进行编码, 并使用新版 Antd 来进行开发
2. 使用个人组件库 qyrc 进行项目开发, 并将项目中部分组件封装到 qyrc 并进行发布
3. 使用 Redux 来管理状态, 并使用 redux-saga 解决异步问题
4. 使用 Sass 预处理器来编写样式
5. 使用 Webpack 从零搭建项目, 完成基本的项目配置
6. 使用 Eslint 规范代码语法、风格
7. 使用 husky + commitlint 规范 git commit 提交信息

3.2 后端

1. 使用 Graphql + Koa 构建后端系统
2. 使用 Mongo + mongoose 来存储后端数据
3. 使用 node-rsa 对用户登录密码进行 rsa 加解密
4. 使用 jsonwebtoken 对用户身份进行验证（JWT）
5. 使用 tinify 对上传的图片进行压缩
6. 使用 cron 来管理系统定时任务(目前已实现系统数据的每日定时备份)
7. 使用 nodemailer 实现邮件发送功能(主要用于数据备份, 将备份数据发送指定邮箱)
8. 使用 pm2 来部署后端主项目以及定时任务
9. 使用 boxen + inquirer + ora + shelljs + chalk 来实现交互式 npm 脚本, 可选脚本有: 数据备份、数据恢复、角色授权、创建秘钥、创建临时 Token ……
10. 使用 winston 记录日志, 包括日志文件的生成、终端日志的打印输出、 配合 websocket 将日志在前端进行可视化展示
11. 使用 docker + docker-compose 以容器的方式来部署项目

四、系统截图

4.1 编辑器

用于管理个人文章, 左侧目录就相当于文件 tag
已完成功能: 文章以及目录(tag) 增删改查、文章发布、缩略图设置、预览……

4.2 日记(下图数据为模拟数据)

用于记录每天起居、体重、体脂、饮食、运动、账单
已完成功能: 数据的增删改查、历史收支统计、每日账单统计图、身体体征(体征、体脂)统计图……

4.3 Mac Touchbar 扩展功能(下图数据为模拟数据)

在 Mac Touchbar 上展示每日体重以及本月开销

4.4 图片管理

用于管理系统图片资源, 包括文章插图、缩略图、默认头像、桌面壁纸……
已完成功能: 图片的批量上传、删除、图片压缩(后端实现)

4.5 系统偏好设置

用于对系统的偏好进行设置
以实现功能: 程序坞自动隐藏设置、菜单栏全屏图标显示、菜单栏是否显示星期、自定义菜单栏日期格式

4.6 数据字典管理

用于管理系统数据字段数据
已实现功能: 数据的增、删、改、查……

4.7 系统通知栏

仿 Mac 通知栏, 展示用户信息(包含登出功能)、天气预报……
已实现功能: 用户信息展示(包含登出功能)

4.8 日志监控

用于实时查看后台服务输出的日志信息(websocket 实现)
已实现功能: 日志的获取、展示

五、ToDo List

• 阅读器: 用于博客文章展示、查询、阅读
• 权限管理: 用角色设置权限(目前通过脚本设置)
• 脚本管理: 在线脚本指定的增删改查、可设置定时运行、可通过以聊天窗口方式发送指定来实现
• 音乐播发器: 播放音乐(尝试接入网易云)
• 评论留言模块: 在通知栏添加留言功能、文章添加评论功能、后台添加评论留言回复功能、桌面可开启弹幕(留言)功能
• 图形功能: 在线编辑流程图、思维导图……
• 系统配置: 桌面壁纸设置、动态壁纸实现(canvas、webGL)……
• 系统监控: 日志监控、系统资源监控、前后端埋点……
  ……