web实验报告

这次实验我选的验报是做一个校园二手交易平台的前端页面。原因很简单，验报宿舍里堆了太多用不上的验报东西，课本、验报台灯、验报滑板，验报扔了可惜，验报挂到闲鱼又嫌麻烦。验报干脆自己写一个，验报哪怕只在自己电脑上跑，验报也算有个交代。验报

环境没什么好说的验报，VS Code 加 Chrome，验报没装任何框架。验报HTML、验报CSS、JavaScript 三件套硬写。刚开始觉得挺轻松，不就是画页面吗？结果光是导航栏的响应式就卡了我一个下午。宽度缩到 600px 以下时，菜单死活不折叠，后来发现是媒体查询写在了样式表最前面，被后面的规则覆盖了。这种坑，书上不会讲，只有自己踩过才记得住。

页面结构

总共四个页面：首页、商品列表、商品详情、发布商品。首页顶部放了一个轮播图，用纯 CSS 的 animation 做的，没上 swiper。效果一般，但胜在轻量。下面接一个卡片网格，展示最新上架的商品。每个卡片包含缩略图、标题、价格和卖家昵称。数据是写死的 JSON，用 fetch 模拟异步加载。这里我故意加了一个 500ms 的延迟，想看看骨架屏的效果。结果骨架屏的闪烁频率没调好，看起来像在抽搐，后来把动画时长从 0.8s 改成 1.5s 才顺眼。

商品列表页加了筛选和排序。筛选按分类走，排序按价格和时间。实现方式很土：每次点击重新渲染整个列表。数据量小的时候没问题，一百条以上就能感觉到卡顿。我知道应该用虚拟列表或者至少做局部更新，但时间有限，先这样。真实项目里肯定不能这么干，这是这次实验最明显的短板。

交互细节

发布商品页的表单验证花了不少心思。标题要求 5 到 30 个字，价格必须是正数且最多两位小数，图片上传限制 3 张、每张不超过 2MB。这些规则用正则和 FileReader 实现。有个细节：用户选完图片后，我立刻生成了缩略图预览，而不是等提交才显示。这个体验提升很明显，自己测试的时候都觉得顺手很多。

另外加了一个小功能：输入价格时，如果超过 500 元，输入框下方会自动出现一行灰色小字——“建议当面交易”。没什么技术含量，但让人觉得这个页面是活的。老师上课讲过，前端不只是把数据摆出来，还要在合适的时机给用户反馈。这句话我这次算是真正理解了。

遇到的问题

跨域是绕不过去的。本来想用 json-server 起一个本地接口，结果 Chrome 一直报 CORS 错误。查了半天，最后在启动命令里加了 --cors 参数才解决。还有一个问题是移动端点击延迟，300ms 那个老毛病。试了 touch-action: manipulation，有效，但不如直接上 fastclick 来得彻底。不过考虑到项目规模，我选了前者，少引入一个库是一个。

样式方面，Flexbox 用得很顺手，Grid 反而有点生疏。商品详情页的图片和文字左右布局，我第一反应是 Flex，后来改成 Grid 发现代码更短。这说明工具的选择要看场景，不能因为熟悉就无脑用。

最后说两句

整个实验做下来，最大的感受是：写页面不难，写好很难。每一个像素的偏差、每一次交互的延迟，用户都能感觉到。我现在的代码里还有很多 !important 和硬编码的宽度值，这些在真实项目里都是隐患。下一步打算把这个页面用 Vue 重写一遍，看看组件化之后代码能清爽多少。实验报告就写到这里，代码已经传到 GitHub 了，有兴趣的可以自己拉下来跑跑看。