已读乱码 002

这是已读乱码的第二期，这周主要在做的事情就是在学习前端和后端的之前不清楚的一些部分，有一些计划和打算构建的玩具项目。

这周基本看完了 Next.js 的基本用法，不过详细的官方文档还没有去看。弄懂了前端的各类组件库的作用，也发现了不少可用用于项目构建的 UI 组件库。

后端方面，对用户认证和授权有了一个初步的印象，大致浏览了一下 Java 9 ~ java 21 新出的特性。

前端部分

Next.js 是我接下来一段时间主要准备学习的前端框架。学习 Next.js 的前提是 HTML，CSS，JavaScript，React，TypeScript。但是这些内容实际上我都是有些一知半解的，所以打算是回炉重造了。接下来有时间会吧 MDN 相关的基础部分详细浏览学习一遍，再看下 TypeScript 的基础语法。基本上就是下面这个路线先走一边。

HTML & CSS & JavaScript
TypeScript
React
Next.js

我做事情总是东一榔头西一棒，对很多不懂的事情都充满了好奇。之前一直不懂 TailwindCSS 是什么，UI 组件库是什么，这周也总算是弄懂了。

TailwindCSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

简单来说，TailwindCSS 工具化为先的 CSS 框架。关键词提取。

工具化为先
CSS 框架

知道了 TailwindCSS 是 CSS 框架之后，就可以了解下下面这些项目了。

上面这些框架都是基于 TailwindCSS 这个 CSS 框架实现的 UI 组件库。并且都是可以用于学习 UI/UX，并且是可以直接上手使用在生产项目中的。

比如 from 表单，shadcn ui 就有现成的 TailwindCSS 代码可用。React Hook Form - shadcn/ui。这些也是我后面构建前端项目的基础。

其他的 UI 组件库

也有不少 UI 组件库是不基于 TailwindCSS 的，国内比较出门的是下面两个 UI 组件库，也涉及到不少 UI/UX 方面的知识，是用来学习很好的资料

蚂蚁团队出品的 UI 组件库。Ant Design - 一套企业级 UI 设计语言和 React 组件库
由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。Semi Design

后端项目

Next.js 虽然是一个全栈的框架，但是我并不打算后端部分全部由 Next.js 实现，如果存在复杂的逻辑，还是由我熟悉的后端技术栈实现比较合适。瞄了一眼 Spring Security，但是实在这周也没有太多时间完整看完，之后再说。

简单浏览了一下 Java 9 ~ Java 21 的新的语言特性，除了底层 GC，虚拟线程之类的优化，我并没有发现太多语言层面的变动，下周梳理下我觉得可以使用语法层面的语言特性。

玩具项目

等学完上面这些部分之后，我可能会想构建一个简单的用户论坛。包含用户认证，发帖，评论。三块主要的功能。实践一下前后端的能力。详细的 PRD 让 AI 帮我输出了一份。

创建一个用户论坛的产品需求文档（PRD）是一个复杂的过程，需要考虑多个方面，包括功能需求、用户体验、技术实现等。以下是一份详细的用户论坛的PRD概要：
-
用户论坛产品需求文档（PRD）
1.引言
1.1 目的
本文档旨在详细描述用户论坛产品的功能和性能需求，为开发、测试和项目管理提供依据。
1.2 背景
随着互联网技术的发展，用户对于在线交流和信息共享的需求日益增长。用户论坛作为一个在线平台，允许用户发布帖子、评论和互动，是满足这一需求的有效工具。
1.3 定义
• 用户认证（Authentication）：验证用户身份的过程。
• 授权（Authorization）：确定用户是否有权限执行特定操作的过程。
• 帖子（Post）：用户在论坛上发表的主题内容。
• 评论（Comment）：用户对帖子的回复或讨论。
2.总体描述
2.1 产品视角
用户论坛将提供一个平台，让用户能够创建账户、发布帖子、评论他人帖子，并与其他用户互动。
2.2 产品功能
• 用户注册与登录
• 帖子发布与管理
• 评论发布与管理
• 用户个人资料管理
• 论坛管理与版主功能
2.3 用户类和特征
• 普通用户：需要注册、登录、发帖、评论和查看论坛内容。
• 版主：除了普通用户的功能外，还需要管理帖子和评论，如删除不当内容。
2.4 操作环境
• 技术栈：Spring Boot（后端），React/Vue（前端），PostgreSQL（数据库）。
• 支持的浏览器：最新版本的Chrome、Firefox、Safari。
• 支持的设备：桌面和移动设备。
2.5 设计和实现约束
• 系统应支持至少1000个并发用户。
• 数据应每24小时备份一次。
2.6 用户文档
提供用户手册和在线帮助文档。
3.具体需求
3.1 用户认证
• 3.1.1 注册
• 用户可以通过电子邮件注册账户。
• 必须验证电子邮件地址。
• 3.1.2 登录
• 用户可以通过用户名和密码登录。
• 提供忘记密码功能。
3.2 帖子管理
• 3.2.1 发帖
• 用户可以创建新帖子。
• 帖子应包含标题和内容。
• 3.2.2 查看帖子
• 用户可以查看所有帖子列表。
• 用户可以查看单个帖子的详细内容。
• 3.2.3 编辑和删除帖子
• 用户可以编辑和删除自己的帖子。
3.3 评论管理
• 3.3.1 发布评论
• 用户可以在帖子下发布评论。
• 评论应包含内容。
• 3.3.2 查看评论
• 用户可以查看帖子的所有评论。
• 3.3.3 编辑和删除评论
• 用户可以编辑和删除自己的评论。
3.4 用户个人资料
• 3.4.1 个人资料编辑
• 用户可以编辑自己的个人资料。
• 包括头像、昵称、个人简介等。
3.5 论坛管理
• 3.5.1 帖子和评论审核
• 版主可以删除不当的帖子和评论。
• 版主可以锁定帖子，禁止进一步评论。
3.6 性能需求
• 3.6.1 响应时间
• 页面加载时间不超过2秒。
• 帖子和评论提交响应时间不超过1秒。
3.7 安全需求
• 3.7.1 数据加密
• 用户密码必须加密存储。
• 敏感数据传输必须使用HTTPS。
3.8 国际化和本地化
• 3.8.1 多语言支持
• 论坛界面应支持至少英语和中文。
4.文档和培训
4.1 用户文档
提供在线帮助文档和FAQ。
4.2 培训
为版主提供在线培训材料。
5.交付和部署
5.1 交付
• 交付内容包括源代码、数据库脚本、配置文件和部署指南。
5.2 部署
• 提供详细的部署指南，包括环境设置、依赖安装和启动服务。
6.质量保证
6.1 测试
• 包括单元测试、集成测试和性能测试。
6.2 验证
• 确保所有功能按预期工作，并满足性能需求。
-
请注意，这只是一个概要，每个部分都需要根据实际项目需求进一步细化。实际的PRD可能需要包含更多的细节，如界面设计、数据模型、API规范等。此外，PRD应该是一个活文档，随着项目进展可能需要更新和修改。

这方面，AI 还是比较有优势的。至于说 AI 代码编辑器，比如 Cursor 和 Windsurf，之后可能也会尝试一下效果。一方面会想实践一个玩具项目，测试一下工程的能力。另一方面会想使用 AI 构建类似的项目，测试下 AI 构建项目的能力。

服务部署

Next.js 是 Vercel 推出的 React 框架，在此之上，还提供了完整的网站托管的能力。如果完全不想部署自己的服务，是可以通过 Vercel 的免费流量，先部署一个可用的项目的。

此外，如果后端能力想要私有化部署，可以尝试下 supabase。一个 Firebase 的开源替代产品。

我按照官网 docker compose 搭建了一下，比较成功。之后再尝试 supabase 提供的能力吧。

题外话

我有看到 pigsty 这个项目，包装了不少 postgres 的扩展能力，并且也提供的 supabase 的部署教程，尝试跟着教程在云服务商 vultr 提供的虚拟机上部署了一下，很花费时间，至少一个小时起步吧。最终也没能在 8000 端口看到启动成功的 supabase 控制台。

另外，后面尝试使用官方的 docker compose。我原本是通过 colima 安装的 docker 和 docker compose，但是在创建外部 volume 时会报错，权限拒绝。

Error response from daemon: error while creating mount source path 'path' : chown path : permission denied

切换到 podman 也同样存在问题，猜测的原因是 colima 和 podman 都是通过虚拟机启动，所以存在上面的问题。参考链接 Docker compose error while creating mount source path - Stack Overflow Snap 安装的 docker 存在同样的问题。

最后，切换到官方提供的 docker macOS Desktop 解决了这个问题。非常浪费时间，今天的几个小时都浪费在这个上面了。

并且在国内拉取 docker 镜像，网络环境实在是太差了。

Roadmap.sh

Frontend Developer Roadmap: What is Frontend Development?

这个项目我在几年前就已经有看到过了，当时简单看了一下，并没有很在意，现在再看，还是很成熟的，前后端路线图确实可以实际操作。

如何删除一个文件里的所有空行

通过 VS Code 的 RegExp 的替换功能就可以。^$\n

Visual Studio Code - Remove blank lines from code - Stack Overflow

结语

这周做的事情非常杂乱，这里看一点，那里学一点。什么都懂一点，什么都没有精通。

微信公众号排版工具，在没有找到好用的工具之前，在线工具凑合用着。

在线markdown编辑器_微信公众号markdown排版工具