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

一、前言

1.1 灵感来源

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

1.2 相关链接(求个 Star)

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

1.3 效果图如下

image

二、为什么要写这个项目

  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 编辑器

image.png

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

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

image.png

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

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

image.png

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

4.4 图片管理

image.png

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

4.5 系统偏好设置

image.png

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

4.6 数据字典管理

image.png

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

4.7 系统通知栏

image.png

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

4.8 日志监控

image.png

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

五、ToDo List

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/56344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux之实战命令32:chroot应用实例(六十六)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【…

【MySQL】入门篇—SQL基础:SQL语言概述

SQL(Structured Query Language,结构化查询语言)是一种用于管理和操作关系数据库的标准语言。随着信息技术的快速发展,数据成为企业和组织最重要的资产之一。有效地存储、查询和管理数据对于业务决策和运营至关重要。 SQL作为与关…

Java类与对象的分配机制

在Java中,类和对象是不同的概念。 类是一种数据类型,它定义了对象的行为和属性。类可以包含成员变量和方法。 对象是类的实例,它是在程序运行时根据类创建的。每个对象都有自己独立的内存空间,可以访问类中定义的成员变量和方法…

ali 231普通滑块82y版本

有需求可以联系博主 let v Died_in2021

【含开题报告+文档+PPT+源码】基于人脸识别的课堂考勤系统的设计与实现

开题报告 随着科技的不断发展,人脸识别技术已经逐渐渗透到各个领域,包括教育领域。传统的课堂考勤方式通常依赖于学生签到或教师手动记录,这种方式存在着许多不足之处,例如容易出现人为错误、耗费时间和资源等。为了解决这些问题…

诺贝尔经济学奖历史名单数据集(1969-2024年)

2024年诺贝尔经济学奖授予了达龙阿西莫格鲁(Daron Acemoglu)、西蒙约翰逊(Simon Johnson)和詹姆斯A罗宾逊(James A. Robinson),以表彰他们在理解制度如何影响经济发展方面的贡献。(“…

mysql学习教程,从入门到精通,sql序列使用(45)

sql序列使用 在SQL中,序列(Sequence)是一种数据库对象,用于生成唯一的数值,通常用于自动递增的主键。不同的数据库管理系统(DBMS)对序列的支持和语法可能有所不同。以下是一些常见的DBMS&#…

jmeter用csv data set config做参数化

在jmeter中,csv data set config的作用非常强大,用它来做批量测试和参数化非常好用。 csv data set config的常用配置项如下: Variable Names处,写上源文件中的参数名,用于后续接口发送请求时引用 Ignore first line…

泰克MDO3054示波器特性和规格Tektronix MSO3054 500M 四通道

Tektronix MDO3054 示波器,混合域,500 MHz,4 通道,5 GS/s 泰克 MDO3054 混合域示波器是终极 6 合 1 集成示波器,包括可选的集成频谱分析仪、任意函数发生器、逻辑分析仪、协议分析仪和数字电压表/计数器。泰克 MDO305…

python项目实战——下载美女图片

python项目实战——下载美女图片 文章目录 python项目实战——下载美女图片完整代码思路整理实现过程使用xpath语法找图片的链接检查链接是否正确下载图片创建文件夹获取一组图片的链接获取页数 获取目录页的链接 完善代码注意事项 完整代码 import requests import re import…

Java算术运算符 C语言的二维数组初始化

1. //算术运算符 public static void main(String[] args) {System.out.println(3.25.01);//若有小数参与,有可能不精确System.out.println(5-1);System.out.println(5*2);System.out.println(10.0/3);//这里不精确System.out.println(10%2);System.out.println();…

2024.10月16日- Vue.js(1)

一 VUE概述与环境搭建 1.1 Vue概述 1.1.1 简介 Vue (发音为 /vjuː/,类似 view) 是一款轻量级的用于构建用户界面的 渐进式的JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高…

「堆」对顶堆 / LeetCode 295(C++)

目录 概述 思路 算法过程 复杂度 Code 概述 LeetCode 295: 中位数是有序整数列表中的中间值。如果列表的大小是偶数,则没有中间值,中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。例如 arr [2,3] 的中位数是 (2 3) /…

【代码随想录Day44】动态规划Part12

115.不同的子序列 题目链接/文章讲解:代码随想录 视频讲解:动态规划之子序列,为了编辑距离做铺垫 | LeetCode:115.不同的子序列_哔哩哔哩_bilibili class Solution {public int numDistinct(String s, String t) {// 将字符串s和…

Vivado - Aurora 8B/10B IP

目录 1. 简介 2. 设计调试 2.1 Physical Layer 2.2 Link Layer 2.3 Receiver 2.4 IP 接口 2.5 调试过程 2.5.1 Block Design 2.5.2 释放 gt_reset 2.5.3 观察数据 3. 实用技巧 3.1 GT 坐标与布局 3.1.1 选择器件并进行RTL分析 3.1.2 进入平面设计 3.1.3 收发器布…

什么是凸二次规划问题

我们从凸二次规划的基本概念出发,然后解释它与支持向量机的关系。 一、凸二次规划问题的详细介绍 凸二次规划问题是优化问题的一类,目标是最小化一个凸的二次函数,受一组线性约束的限制。凸二次规划是一类特殊的二次规划问题,其…

堆排序(C++实现)

参考: 面试官:请写一个堆排序_哔哩哔哩_bilibiliC实现排序算法_c从小到大排序-CSDN博客 堆的基本概念 堆排实际上是利用堆的性质来进行排序。堆可以看做一颗完全二叉树。 堆分为两类: 最大堆(大顶堆):除根…

Java-IO流使用场景

Java IO 流是Java编程中非常重要的组成部分,用于处理文件读写、网络通信等数据传输任务。 1. 字节流 1.1 读取文件 import java.io.FileInputStream; import java.io.IOException;public class ReadFileExample {public static void main(String[] args) {try (FileInputSt…

Unity实现自定义图集(一)

以下内容是根据Unity 2020.1.0f1版本进行编写的   Unity自带有图集工具,包括旧版的图集(设置PackingTag),以及新版的图集(生成SpriteAtlas)。一般来说,unity自带的图集系统已经够用了,但是实际使用上还是存在一些可优化的地方,例如加载到Canvas上的资源,打图集不能…

解释器模式与栈式机器

一、解释器模式 解释器模式是一种设计模式,用于定义一个语言的语法结构并为其提供解释执行的功能。它最常用于解析和执行语言的表达式,特别是嵌入式语言或自定义语言。在这个例子中,它演示了如何通过解释器模式来处理简单的算术表达式&#…