您现在的位置是：烟消火灭网 > 百科
web程序设计实验总结
烟消火灭网2026-10-17 07:48:04【百科】0人已围观
简介这学期Web程序设计实验课一共做了六个实验，从HTML基础到最后的综合项目，踩过的坑比预想的多得多。第一节课老师让我们写一个最简单的个人主页，我心想这有什么难的，打开VSCode噼里啪啦敲了几十行，浏
这学期Web程序设计实验课一共做了六个实验，序设从HTML基础到最后的计实结综合项目，踩过的验总坑比预想的多得多。第一节课老师让我们写一个最简单的序设个人主页，我心想这有什么难的计实结，打开VSCode噼里啪啦敲了几十行，验总浏览器一刷新——页面倒是序设出来了，但导航栏的计实结链接全部挤在一起，点哪个都没反应。验总后来才发现是序设``标签的`href`属性写成了`herf`，一个字母的计实结顺序错误让整个页面变成了死链接。这件事让我记住了一个道理：前端代码不会报错，验总它只会默默不工作。序设
CSS布局是计实结绕不过去的坎。实验三要求用Flexbox实现一个三栏布局，验总左右固定宽度，中间自适应。我按照教程写了`display: flex`，给左右两侧设了`width: 200px`，中间写了`flex: 1`。结果在浏览器里左右两栏确实固定了，但中间内容一多就把容器撑破了。查了半天MDN文档才搞明白，Flex子项默认的`min-width`是`auto`，内容超长时不会收缩。加上`min-width: 0`之后问题解决。这种细节教程里通常不讲，只有真正动手写才会撞上。
JavaScript那部分实验让我印象最深的是事件委托。实验四要做一个动态待办列表，每个条目后面有个删除按钮。最开始我给每个按钮单独绑定了`click`事件，代码写了一大堆`querySelectorAll`加循环。功能是能跑，但新增条目时新按钮没有事件监听，删不掉。后来改成在父容器上监听`click`，用`event.target`判断点击的是不是删除按钮，代码从二十多行缩到了五六行。这个模式后来在综合项目里反复用到，算是这学期最实用的收获之一。
后端部分我们用的是Node.js加Express。实验五要求实现一个简单的用户登录接口，前端用`fetch`发POST请求，后端验证后返回JSON。我卡在跨域问题上整整一个下午。浏览器控制台一直报CORS错误，我以为是请求头写错了，改了又改。实际上后端根本没引入`cors`中间件，浏览器的同源策略直接把请求拦了。装上`cors`包，一行`app.use(cors())`解决问题。跨域这个东西，没遇到的时候觉得概念很虚，遇到一次就再也不会忘。
最后的综合项目我做了一个简易的图书管理页面，前端用原生JS操作DOM，后端用Express提供RESTful接口，数据存在内存里。写的过程中发现一个现象：当接口返回的数据结构和前端渲染逻辑耦合太紧时，改一个字段名要同时动两三个文件。后来我把接口返回格式统一成`{ code, data, message }`，前端只认这个结构，字段变化只改后端映射层。这个习惯在以后做更大的项目时应该能省不少事。
回头看这六个实验，真正让我进步的不是那些一次就跑通的代码，而是那些报错、白屏、控制台红字。每解决一个bug，对浏览器怎么解析HTML、CSS怎么计算布局、JS事件怎么冒泡捕获的理解就深一层。Web程序设计这门课，实验比理论重要得多，光看书不写代码，永远不知道`z-index`为什么不起作用，也不知道`async`函数忘了`await`会返回一个Promise而不是数据。这些坑，踩过才算数。
很赞哦!（9322）
