web程序设计实验报告

三周前我提交了一个在线简历页面，序设今天打开浏览器检查时，计实发现CSS里一个简单的验报flex布局在Safari上彻底崩了。这不是序设第一次了。每次实验课，计实总有人对着同一份代码在不同浏览器里看到完全不同的验报世界。

这学期web程序设计实验的序设核心任务，是计实完成一个带前后端交互的图书管理系统。我选了Node.js加原生SQLite，验报没碰框架。序设理由很简单——想看看最底层的计实请求和响应到底怎么流动。第一周搭路由时，验报控制台里打印出那个POST请求的序设body，是计实一串urlencoded格式的字符串。那一刻我突然理解了，验报所谓“框架帮你解析参数”究竟做了什么。

实验过程中最折磨人的环节不是写逻辑，而是调试CSS的层叠上下文。一个position: relative的父容器，一个z-index设了9999的子元素，在Chrome里正常显示，换到Firefox就沉到背景图下面去了。查了两天，最后发现是父级没设transform导致渲染层不同。这种问题，教材上不会写，但真实项目里天天碰到。

数据库设计倒是顺利。两张表——books和borrow_records，外键关联，索引建在book_id上。插入测试数据时用了循环语句，一次性生成两百条假记录。查询响应时间从最初的几十毫秒优化到个位数，只因为给WHERE条件里的字段加了索引。性能这东西，不亲自测一遍永远不知道差距这么大。

有个细节让我印象很深。写登录功能时，密码加密我用了bcrypt，salt rounds设成10。注册一个用户，后端处理耗时大约80毫秒。异步函数里await调用，事件循环没被阻塞，页面响应依然流畅。但旁边同学用的是同步加密库，一注册就卡住整个进程。就这一下，我对Node.js单线程模型的理解，比看十篇文章都深刻。

最后一周做响应式适配。用媒体查询在768px和1024px两个断点调整导航栏布局。手机端测试时，触摸事件和点击事件差300毫秒的延迟，这是移动端特有的问题。加了一行touch-action: manipulation，点击立刻响应。这种小知识，实验指导书里根本没提，全靠自己踩坑。

现在回头看，这门课最值钱的部分不是最终的页面效果，而是那些让人挠头的瞬间。浏览器兼容性、异步时序、渲染性能——每一个问题都逼着你翻开文档，去查规范原文，而不是依赖某个框架的封装。实验报告写到这里，我删掉了之前准备好的总结段落。那些“通过本次实验掌握了xxx”的套话，不如一行真实报错记录来得有用。

代码跑通那一刻的爽感倒是真的。但更真实的是，第二天换个浏览器，它又给你颜色看。