web大作业实验报告

凌晨三点，作业我盯着屏幕上那个死活不肯居中的实验div，差点把键盘摔了。报告margin: 0 auto明明写了，作业父元素宽度也给了，实验它就是报告纹丝不动。后来发现，作业是实验忘了给父元素设宽度——这破问题浪费了我四十分钟。这就是报告我做web大作业的真实起点。

我的作业项目是一个校园二手书交易平台。选这个题目没别的实验原因，图书馆门口天天有人摆摊卖书，报告太麻烦，作业我想让这事儿在线上完成。实验前端用HTML+CSS+原生JS，报告后端用Node.js搭了个简易服务器，数据存在JSON文件里——别笑，这已经是我能驾驭的极限了。

页面结构倒没什么稀奇，顶部导航、商品列表、发布表单、登录弹窗。真正让我头疼的是响应式布局。笔记本上看得好好的三列卡片，一缩到手机宽度就挤成一团。我试了flexwrap，试了grid的auto-fill，最后用媒体查询断点硬调。每个断点值都是拿浏览器开发者工具一点点拖出来的，那种拖拽时页面突然崩掉的感觉，比考试挂科还刺激。

登录功能我做了个假的——前端写死一个账号，密码对了就跳转。但跳转后怎么保持状态？查了半天，用了localStorage存个flag。刷新页面后还得检查这个flag，不然用户直接输URL就能进后台。这里我栽了个跟头：存flag的key名跟另一个页面重了，导致用户登录状态混乱。改成一个带前缀的key名，问题解决。这种细节坑，不踩一次永远记不住。

最耗时的其实是商品图片上传。我用的是base64转码存进localStorage，但localStorage只有5MB空间，传三张照片就满了。后来改成只存图片的URL，让用户手动填图片链接，虽然丑了点，但至少不爆。这让我意识到，真实项目里存储永远是瓶颈，前端能做的优化非常有限。

调试过程里有个小惊喜。我用console.log输出商品数据时，发现有个商品的价格字段是字符串，另一个是数字，导致排序函数直接失效。用typeof一查，原来是发布表单里有个输入框忘了加type="number"。修好那一瞬间，整个列表的排序逻辑瞬间通畅，那种爽感比喝冰可乐还过瘾。

写代码的第三晚，我坐在椅子上发呆，突然想到：这个作业的评分标准是什么？老师看的是功能完整度，还是代码规范？我翻出课程PPT，上面写着“布局合理、交互流畅、代码可读”。于是我又花了一晚上重构CSS类名，把那些"box1"“box2”改成"book-card"“filter-bar”。改完自己看着都舒服，虽然功能没变，但心理上觉得这作业能拿高分了。

最后交上去之前，我把所有页面在Edge和Chrome里各过了一遍，又用手机浏览器试了试。有个页面的滚动条在手机端显示异常，加了overflow-y: scroll才解决。这些兼容性问题没有捷径，就是一个个试。

现在回头看，这作业教给我的不是某个标签怎么用，而是调试的思路：先看控制台报错，再查网络请求，最后检查数据类型。以及一个更朴素的道理——代码写不出来的时候，去睡一觉，明天早上bug自己就没了。至少，那个div第二天真的居中了。

本文地址：http://www.79wt.cn/news/905b0299092.html