把一个项目部署上线，并不容易...
项目地址校园墙在线体验 前端仓库 · 后端仓库 准备服务器、装运行环境、启动后端、配置 Nginx、处理域名备案，最后把手动上传改成 GitHub Actions 自动部署。 网站是怎么运行的项目的分工如下： 部分 技术与职责 前端 React、TypeScript、Vite，构建后生成静态文件 后端 Node.js、Express、TypeScript，提供 API 实时通信 Socket.IO，支持聊天和画板同步 数据库 PostgreSQL 16，通过 Prisma 访问 网站入口 Nginx，提供静态文件、转发 API 和 Socket.IO 进程管理 systemd，管理后端启动、异常重启和开机启动 HTTPS Let’s Encrypt 证书，通过 Certbot 续期 自动发布 GitHub Actions，前后端各有一个工作流 请求大致这样流转： 12345678910浏览器 │ HTTPS ▼Nginx ├─ 页面、JS、CSS ──────────→ 前端构建产物 ├─ /api/ ───────────...
暑假
暑假很久没有写博客了，因为一直没有写点什么的冲动。但是此刻我很想记录当下的状态。 暑假主要做的事就是写我的校园墙的项目，还有学吉他。然后就是看番，看书，打游戏，偶尔和朋友出去玩。可能几年后我会怀念此刻的时光…我一定会怀念的。 开学下个学期开学我就大二了，大三大四应该已经出去实习了。想到大学生活过得这么快，就会有点难过。 下个学期的课看上去又多又难，期末周再学应该够呛…大一下学期的期末突击很痛苦。真心希望可以平衡学业、工作室项目、我的项目、准备实习、出去玩。不，出去玩还是往后放放吧，除非别的事已经付出很多时间了。还有一个和朋友一起想到的idea下个学期开始试着做，要是能把它做好…TT 好想念玄武湖…玄武湖包容了我许多的压力、烦躁和苦闷，而我已经两个月没有去了——其实才一个多月。 一些计划 完善/吃透已经完成的一个项目，总结技术难点、突破点 选择合适的方向做一个 agent 项目 刷 leetcode, 练习手撕 刷面经/八股
古法一个五子棋
项目地址一个基于 WebSocket + canvas + react 的五子棋联机游戏 为什么想做一个 AI 五分钟就能写出的程序，我断断续续写了4，5天。作为 AI 时代的原住民，我之前的理念一直是“AI 能完成好的，绝不手写。”虽然是这么想，但是心里会一直有种不安感。AI 写的黑箱代码不仅难维护、有技术隐患，而且经常没有结构意识、逻辑混乱。最主要的是，我实在太依赖 AI 了——貌似一万年没有手写一个项目了。于是，在朋友的启发下，我萌生出做小游戏的想法。我认为写这样一个简单的项目可以熟悉语法，熟悉 react ，增强古法的能力。 而且，用自己写的代码和朋友玩联机游戏，真的超级有成就感的说！ 技术栈WebSocketWebSocket 建立浏览器之间的连接，监听和广播消息。WebSocket 通常发送字符串，发送时需要用JSON.stringify(...)把对象转为字符串，收到后再用JSON.parse(...)转为对象。 主要消息类型： board_state连接时/刷新页面后/重置游戏后发送。 1234567socket.send(JSON.strin...
Web API（JS语法笔记）
作用：使用JS操作html和浏览器分类：DOM（文档对象模型），BOM（浏览器对象模型） DOM 定义：与HTML或XML文档交互的API，是浏览器提供的一种专门用来操作网页内容的功能，通过JS让网页元素发生变化（操作标签，让标签滚动；鼠标经过显示，离开隐藏等网页内容特效、交互效果） DOM树：将HTML文档以树状结构直观地表现出来，显示出标签与标签之间的关系 html中的所有标签，在JS DOM中都叫做对象。DOM对象就是浏览器根据html标签生成的JS对象 核心思想：把网页内容当作对象处理 页面最大的对象：document 网页所有内容都在document中 获取DOM元素一、根据CSS选择器获取DOM元素 1.选择匹配的第一个元素1document.querySelector('css选择器') 返回值：CSS选择器匹配的第一个元素 12const p = document.querySelector('#nav')p.style.color = 'red' 2.选择匹配的多个元素1document.queryS...
昨天还一无所知的事物
近期最近在看赤发白雪姬，里面有一句台词是：“昨天还一无所知的事物，若能在今天有所了解……” 三月初结束了携程大项目，对这句话产生了很深的共鸣。答辩的时候有很多问题我没有回答出来。这个名词好像听过，那个概念我看到过…然后几天后我开始看八股面经的时候发现那些问题都很基础。下一次遇到应该可以答上来。整个大作业环节很愉快，我认为很成功。队友都是很认真的人，几乎都没有前端大项目开发经验的人最终一起做出了一个还不错的系统，完成即是胜利。 还有7号8号的南大黑客松。这个比赛的团队我是中途加入，当时项目主题乃至基本关卡框架都已经搭好了，其实这次并不是我想象的、期待的黑客松形式。我喜欢从零开始参与构建 idea，然后慢慢把它发展成一个产品。项目框架虽然说是 vibe coding 的，但是我也希望有那种掌控感，知道我在做什么，接下来的方向是什么。而不是机械地执行某个被分配到的“任务”。 南大游园会现场有很多收获，其中一个印象深刻的是某个大佬上台发言分享辍学经历，鼓励所有大学生辍学创业。看到了各种 idea，认识了好多人。向别人介绍我们的产品的过程很有趣…说实话我在向别人宣传的时候才发现了很多这个项...
根本学不完
今天开始学爬虫、写脚本。在这之前我连 Python 的语法都看不懂啊。。 边学（爬虫）边学（Python）。。 还想学手搓 agent ，openclaw。。 还要准备携程前端训练营的项目，要写说明文档，准备答辩 力扣一题没做过，八股也不会。。 二编，openclaw 跑通了。但是我突然暂时不想写脚本和什么 agent 了。。还是再搞一下 React，然后准备项目吧。。 2026.2.22真的好累。好不容易过了一遍项目，写了说明文档，我的 limebot 去上网又遇到了问题，怎么调都不对。 :(
AI 简历编辑器的输出结构化问题
项目地址Github库 在线体验 它是做什么的？你可以把它当成普通的简历模板，直接编辑，非常方便。但是它特别的亮点是可以用 AI 润色你的语言表达——点击“AI 美化”按钮直接提取字段，自动润色。如：用户在“专业技能”部分写“git”,则 AI 会将其自动美化为类似“掌握基于 Git 的开发流程，能够规范地进行分支管理代码提交与合并”的语句。同样地，只要在相应区域简述你的工作经历、项目经历，AI 也会帮你润色。 技术栈Next.js；React；TypeScript；Tailwind CSS 开发难点—— AI 输出结构化为什么一定要结构化？AI 拿到的是字段，返回的也是字段。我们需要的是：姓名、邮箱、技能、项目列表……这类“字段”，所以必须要求 AI 输出 JSON，把它的回答强行变成严格的 JSON 表格——而且，如果它写坏了，我们要能自动修好，保证系统永远有一个可用结果。 结构化的步骤是什么？首先，在代码里定义严格的 schema（结构规则），即这张“表格”长什么样。ResumeSchema 规定简历的结构: 12345678910111213141516171819202...
新的开始
为什么做博客？我时常想，一个人在这个世界上总该留下点什么。比如，一个作品，一些想法，一些经历。也许一些想法能和别人形成共鸣，也许我的经历能为别人带来启发，这些对于我来说，是很有意义的事，大概和我喜欢做开源、做贡献是一样的。 关于我的博客这个网站是我的个人网站，基于hexo搭建，由butterfly项目魔改而成。它只是一个纯前端静态网站，也许以后我会接入后端服务。