1
这段时间我开始着手搭一个个人网站。目标并不复杂，也不是一开始就想着"上线即成品"，而是希望它能成为一个长期生长的东西：能展示项目、能写技术文章，也能承载一些真实的前后端交互，而不是只停留在静态页面。
所以第一步，我给自己定了一个很明确、也很克制的目标：先把前端和后端真正跑通一次。
前端我用的是 Vue 3 + Vite。这个选择本身没什么好说的，开发体验足够顺，构建工具也足够现代，适合做一个结构清晰、可扩展的个人站。后端则选择了 FastAPI，主要原因也很直接：启动快、结构简单、非常适合做"小而完整"的 API 服务。
在功能选择上，我刻意避开了登录、权限、复杂表单之类的东西。那些功能一旦开始做，很容易把注意力全部拖进细节里，反而偏离"练前后端交互"的初衷。最后选定的第一个功能是访问计数。
这是一个看起来很简单的需求：
页面打开一次，后端记录一次访问量，前端把结果展示出来。
但它刚好完整覆盖了一条真实的交互链路：
前端页面加载 → 发起请求 → 后端处理状态 → 返回结果 → 前端根据结果更新 UI。
后端这边，我在最外层的 main.py 里写了一个最小的接口 /api/visit。先不做持久化，只用内存里的变量来累计访问次数，每请求一次就加一，然后返回当前的计数值。这样做的好处是逻辑非常直观，问题也一眼能看出来，适合现在这个阶段。
为了避免以后端口混乱，我一开始就把端口约定死了：
后端固定跑在 64000，前端固定跑在 51000。
FastAPI 这边通过 CORS 只允许来自 51000 的请求，这样前后端边界非常清楚，也能尽早暴露配置问题。
前端这边的改动其实不多。我在 App.vue 里加了一段很独立的逻辑：
页面 onMounted 时，请求 /api/visit，维护 loading / error / success 三种状态，然后把访问次数显示在页面右下角，用一个 position: fixed 的小浮层，不干扰任何已有布局。
它让我确认了几件事：
-- 前端请求时机是正确的
-- 接口返回的数据结构是稳定的
-- 跨域配置是生效的
-- 前端的状态变化是可控、可预期的
在这个过程中也踩到了一些很现实的小坑。比如 Vite 默认端口是 5173，如果不显式配置，怎么重启都不会变；再比如构建时 CSS 的 :global(html, body) 写法在生产构建里会有警告，需要拆开写。这些都不是"大问题"，但如果不在一开始处理好，后面会反复出现。
到这一步为止，这个网站还远远谈不上"功能完整"，但我反而觉得这是一个很好的起点。因为它已经不是"只有页面的前端项目"，也不是"孤立跑着的后端服务"，而是一个真正开始有"系统感"的东西。
接下来要做的事情也很清晰：
把访问计数从内存换成持久化存储；
考虑按页面区分统计；
再逐步把文章列表、项目数据从静态内容迁移成接口数据。
不急着上线，也不急着堆功能。
先把每一条前后端链路走扎实，比什么都重要