内容摘要：web课程设计报告总结 真正让我意识到自己会写网页的瞬间，不是按下F12看到零报错的那一刻，而是室友凑过来问“这页面是你自己写的？”——我点头时，他眼里那种“你居然会这个”的惊讶。这学期web课程设计

web课程设计报告总结

真正让我意识到自己会写网页的程设瞬间，不是计报结按下F12看到零报错的那一刻，而是告总室友凑过来问“这页面是你自己写的？”——我点头时，他眼里那种“你居然会这个”的程设惊讶。这学期web课程设计，计报结我做的告总选题是一个校园二手书交易平台。不算复杂，程设但足以让我把HTML、计报结CSS、告总JavaScript、程设jQuery、计报结PHP和MySQL全揉进去，告总像做一道需要多次翻炒的程设菜。

页面结构从草图开始。计报结我在纸上画了七八个版本，告总最后定下的是顶部导航栏、左侧分类栏、中间商品卡片区、右侧悬浮购物车。用HTML搭建骨架时，最大的坑是语义化标签。以前习惯div一把梭，这次强迫自己用header、nav、main、section、aside、footer。代码确实清晰了，但浏览器默认样式也把我坑惨——ul自带padding，button默认边框，这些细节浪费了我半天时间。最后索性在CSS开头写了个简单的reset，把margin、padding清零，才舒服了。

CSS部分是我比较有感觉的。选了蓝白配色，因为二手书交易需要信任感，冷色调合适。商品卡片用了flex布局，每个卡片hover时加了个轻微的box-shadow和translateY，模拟“浮起来”的效果。这个细节是看淘宝时想到的——鼠标悬停时卡片微微上移，比平面更有交互感。我还在导航栏加了个吸顶效果，用position: sticky，滚动时导航不跑。代码量不大，但视觉反馈明显。

JavaScript是重头戏。搜索框的实时过滤功能，我用了input事件，遍历商品数组，匹配标题关键词。一开始写的是全等匹配，结果搜“计算机”搜不到“计算机基础”，改成includes后顺畅了。购物车逻辑是最头疼的部分——加减数量、计算总价、清空、结算。我用了一个数组对象存储商品，每次操作都重绘DOM。性能上有点浪费，但数据量小，无所谓了。真正让我卡住的是结算按钮：点击后要跳转到一个模拟支付页面，但数据要通过URL参数传递。中文乱码问题折腾了我半小时，最后用encodeURIComponent解决，算是个小教训。

后端部分，PHP负责接收前端传来的表单数据，写入MySQL数据库。我之前没写过PHP，现学现卖，用了最简单的mysqli面向对象写法。发布书籍的页面有个图片上传功能，我一开始没限制文件类型，结果传了个.exe上去，页面直接报错。后来加了后缀名白名单和文件大小检查，才算稳了。数据库设计也犯过傻——用户表和订单表之间忘了设置外键，导致删除用户时订单表里残留孤立数据。后来补了外键约束，删用户时级联删除订单，逻辑才通。

调试过程里，最让我崩溃的是跨域问题。前端跑在localhost:8080，后端在localhost:3000，ajax请求直接报错。查了半天，才知道要配置CORS头。在PHP文件开头加了一行header("Access-Control-Allow-Origin: *")，问题解决。这种“就差一行代码”的挫败感，经历过的人才懂。

这次课程设计，我最大的收获不是技术栈本身，而是“拆解问题”的能力。以前遇到报错就慌，现在会先看控制台，复制错误信息去查，再定位到具体代码行，最后用console.log逐段排查。这种流程走多了，心里就有底了。另一个体会是，写代码和写文章一样，需要“读者意识”——网页的读者是用户，你得想清楚他们怎么操作、在什么场景下用、会犯什么错。比如我把搜索框放在页面最显眼位置，因为用户进网站第一件事就是找书；把购物车做成悬浮窗，因为用户可能一边浏览一边加购，不想来回滚动。

页面最终效果说不上惊艳，但功能完整，交互流畅。我把它部署到自己的云服务器上，用ip访问，那一刻有种“作品上线”的仪式感。虽然只有几个朋友点过，但看着访问日志里那几条记录，心里还是满足的。写代码这事，就像拼乐高——图纸是需求，零件是语法，拼错了就拆了重来。拼完那一刻，你看着自己搭出来的东西，哪怕歪歪扭扭，也觉得挺酷。