web前端课程设计总结

这学期的端课前端课设，我做了个校园二手书交易平台。程设不是计总结那种大而全的电商网站，就一个页面，端课能把书挂上去，程设能搜索，计总结能看详情，端课能留言。程设做完那一刻，计总结我盯着浏览器里那个能跑起来的端课页面，第一反应不是程设成就感，是计总结“原来代码真的能变成看得见摸得着的东西”。

写HTML的端课时候觉得简单，div套div，程设p标签一放，计总结内容就出来了。真正开始写CSS才意识到，布局才是前端的深水区。我第一次用flex布局，三个卡片怎么都排不整齐，后来发现是父容器忘了设`display:flex`。这种低级错误我犯了不下五次。每次浏览器打开，样式全乱，我就打开开发者工具，一格一格地查。那种感觉像在玩解密游戏，只是线索全在CSS里。

JavaScript部分，我选了最笨的办法——用数组存数据，然后`render`函数重新渲染DOM。没有框架，没有库，纯手写。搜索功能我做了个简单的事件监听，每次输入就过滤数组。性能不怎么样，但逻辑清晰，我能看懂每一行在干什么。后来同学用Vue写，三行代码搞定我三十行的功能。我没觉得亏，手写一遍反而让我看懂了框架到底在帮我们做什么。

最折磨人的是响应式设计。我一开始只按电脑屏幕写，调好了，很得意。结果拿手机一打开，图片溢出，按钮挤成一团，文字小到要贴到屏幕上才看得清。那天晚上我改到凌晨两点，加了三个媒体查询，终于让它在手机上能正常看。但第二天上课老师一句话点醒我：“你试试横屏。”我当场就懵了。

做完这个项目，我最大的变化是不再怕报错了。以前看到红色报错就慌，现在会先读报错信息，再查代码。有一次控制台报了个`TypeError: Cannot read property 'length' of undefined`，我想了半天，最后发现是数组名拼写错了。这种低级错误很丢人，但丢过一次就记住了。

还有个细节我记得特别清楚。给留言板加时间戳的时候，我用`Date.now()`拿到的是毫秒数，格式化的时候忘了除以1000，结果页面上显示的时间是1970年。那一刻我真实感受到了计算机的“时间观”和人的时间观差了多远。

这学期课设做完，我不敢说自己会前端了，但至少我知道一件事：前端不是把设计稿变成页面那么简单，它是在浏览器这个“容器”里，用代码搭建一个能让人使用的空间。每个像素的偏移，每次点击的反馈，都有人在背后做出选择。那些选择有时候很蠢，但做过了，才懂为什么别人要那么写。

如果让我总结这门课学到什么，我大概会说：学会了看控制台的报错，学会了用开发者工具去“解剖”别人的网站，学会了不厌其烦地刷新页面。前端是个需要耐心和细心的活，但当你看到自己写的页面在手机上顺滑地滑动时，那种满足感，值了。

(责任编辑：探索)