📝 学习日记

最近花了两周时间，把自己之前用 Vue 2 Options API 写的博客后台管理系统，全面迁移到了 Vue 3 + TypeScript + Composition API。这个过程虽然踩了不少坑，但回过头来看，<script setup> 语法糖带来的开发体验提升是实实在在的。

最直观的感受就是逻辑复用的方式发生了质的改变。以前在 Options API 里，我们依赖 mixins 来抽离公共逻辑，但 mixins 的命名冲突和来源不清晰的问题一直让人头疼。现在用自定义 Hook（Composables），比如我把表单校验逻辑抽成了一个 useFormValidation.ts：

// composables/useFormValidation.ts
                        import { ref, computed } from 'vue'

                        export function useFormValidation() {
                        const errors = ref<Record<string, string>>({})
                        const isValid = computed(() => Object.keys(errors.value).length === 0)
                        const validate = (field: string, value: string) => {
                        if (!value.trim()) errors.value[field] = '此项不能为空'
                        else delete errors.value[field]
                    }
                    return { errors, isValid, validate }
                }

这样一来，任何组件都可以按需引入这个 Hook，逻辑清晰、类型安全，而且完全避免了命名冲突。配合 TypeScript 的类型推导，写代码时 IDE 的智能提示简直是一种享受。接下来还计划把项目里的 API 请求层也封装成 Composable，让整个项目结构更加模块化。

在做鲸鱼日记这个博客项目时，遇到了一个典型的布局需求：整体页面采用三栏结构（侧边栏 | 主内容 | 右侧栏），而在主内容区内部，文章卡片又需要灵活的流式排列。如果只用 Flexbox 或只用 Grid，总感觉差那么一点意思。最终我选择了 Grid 做宏观布局 + Flexbox 做微观排列 的组合方案。

外层容器使用 display: grid; grid-template-columns: 240px 1fr 280px; 来锁定三栏比例，这样即使浏览器缩放，三栏的宽度关系始终稳定。而在文章卡片区域，我用 display: flex; flex-wrap: wrap; gap: 20px; 让卡片自然换行。这种组合兼顾了 Grid 的二维精确控制和 Flexbox 的弹性自适应，代码量反而比纯用一种方案更少。另外还学到了 minmax() 函数在 Grid 中的妙用——设置最小列宽防止内容被挤压变形，非常实用。

前端学了一段时间后，越来越觉得不理解后端就无法真正做好一个完整的Web项目。于是这周开始啃 Node.js 和 Express，目标是给博客系统搭建一套简单的 RESTful API。

从初始化 npm init 开始，安装 Express、mysql2、cors 等依赖，再到设计数据库表结构（用户表、文章表、评论表），整个过程比想象中要顺利。比较让我印象深刻的是中间件的概念——app.use(express.json()) 解析请求体、app.use(cors()) 解决跨域问题，这些中间件的链式调用让请求处理流程变得非常清晰。目前已经实现了用户注册登录（JWT 鉴权）、文章的 CRUD 操作，还顺便用 Postman 做了接口测试。下一步打算学习文件上传和图片处理，把封面图功能也加上去。

回顾自己刚学前端的时候，面对回调地狱（Callback Hell）的恐惧还历历在目。后来接触到 Promise，再到现在的 Async/Await，JavaScript 的异步处理方式真的是越来越人性化了。最近在项目中大量使用 async/await，总结了一些实用的技巧。

比如并行请求优化：当多个接口之间没有依赖关系时，用 Promise.all() 配合 await 可以显著减少加载时间。还有错误处理方面，比起传统的 .catch()，我现在更习惯用 try...catch 包裹 await 语句，代码的可读性提升了不少。另外 for...of 循环配合 await 处理串行异步任务也非常顺手。这些技巧在实际开发中帮我少写了很多样板代码，也更容易排查问题。

在重构鲸鱼日记博客时，我重新审视了自己的 HTML 结构。之前为了图方便，大量使用 <div> 嵌套，虽然视觉效果没问题，但代码可读性差，屏幕阅读器也无法正确理解页面结构。这次我系统地用上了 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等语义化标签。

改完之后最明显的变化是：不看 CSS 也能大致理解页面结构，代码审查时一目了然。而且 Lighthouse 的 Accessibility 评分从 72 分提升到了 96 分。对于博客类网站来说，语义化的 HTML 还能让搜索引擎更好地理解内容层次，对 SEO 也有实实在在的帮助。这件事让我意识到，扎实的 HTML 基本功远比追各种新框架重要得多。