简介面向网站前端开发课程期末大作业场景完整实训项目包适合初学者或需要提交课程设计的学生。内容以“熊猫中心”为主题覆盖首页、报名、博客列表、简介、注册等多个典型页面综合运用HTML搭建结构、CSS控制样式、JavaScript实现交互可直观看到前端从布局到效果的完整落地流程。包体共38个文件包含6个HTML页面、7个样式表、18张JPG配图与4张PNG图片并额外提供项目报告DOCX与说明TXT便于对照设计思路和撰写文档压缩包整体仅6.81MB解压即可浏览运行。目前已有98人学习适合直接参考页面组织方式、样式写法与脚本逻辑也可作为课程设计或实训报告的模板替换图文后快速生成自己的作品。1. 把web前端期末大作业当成一次可验收的小型交付期末前两周拿到题目最常见的开局是打开vscode先搜一套现成模板改两行字就交。结果答辩时评委顺着代码问一句“这个布局是用什么实现的”现场就会冷场。一份能拿高分的web前端期末大作业评的不只是页面好不好看而是三个东西源码是不是你自己能讲清楚、说明书能不能让没跑过项目的人照着复现、演示路径是不是顺畅。这其实是把“作业”当成了一次小型项目交付来验收。这篇内容就是围绕“源码大作业说明书”这两个交付物讲一条从页面骨架、交互实现到文档写作都落地的路线适合第一次做完整前端项目的学生也适合需要带新人评审代码的从业者——评审作业和评审代码的边界逻辑是一样的。2. 先立页面骨架用语义化HTML和CSS变量把样式底子打牢2.1 为什么期末大作业不推荐一上来就套框架很多同学的第一反应是引入一套Bootstrap或者Element UI拖几个组件进去页面立刻“看起来像回事”。但这里有个容易被忽视的风险答辩时评委大概率会问“栅格系统是怎么切出来的”或者“这个响应式是怎么实现的”如果代码全是框架生成的你很难讲出属于自己的实现逻辑。我一般会建议用原生HTML CSS JavaScript做两到三个页面。一个页面负责讲清楚布局原理另一个页面带上交互功能已经能撑起一次完整的结课验收。框架可以写在说明书的“技术扩展”小节里作为延伸而不是作为主实现——前者体现视野后者体现基本功。原生实现的另一个好处是“代码量少、控制点明确”你完全清楚每一行选择了什么这直接决定了后面说明书里的技术说明部分好不好写。2.2 一个能直接跑起来的语义化HTML骨架以“课程组队平台”为例这是一个很适合做期末大作业的选题功能边界清晰、CRUD和筛选都能体现、视觉上也有发挥空间。下面是首页骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title课程组队平台/title link relstylesheet hrefcss/style.css /head body header classheader h1课程组队平台/h1 nav classnav a hrefindex.html首页/a a hrefteam.html组队大厅/a a hrefabout.html关于/a /nav /header main classcontainer aside classsidebar p侧边筛选区/p /aside section classcontent p主体内容区/p /section /main footer classfooter p版权信息与联系方式/p /footer script srcjs/main.js/script /body /html这段代码对应了vscode打开HTML文件后在浏览器里看到的基础页面构成header负责顶部导航、main里面用aside划分侧边栏、section放主体内容、footer收尾。用语义化标签而不是清一色的div是为了让页面结构在不看CSS的情况下也能被读出来——这一点说明书里可以直接写“采用了HTML5语义化标签提升可读性和可维护性”是明确的技术得分点。页面之间的跳转用a标签就能完成不需要引入路由库。js/main.js放在body底部是为了保证DOM先渲染完再执行脚本避免拿不到节点——这是很多新手第一次遇到白屏报错的来源。2.3 用CSS变量统一样式主题后期改版不加班样式部分最关键的设计决策是使用CSS变量定义全局主题:root { --primary: #2b7de9; --text-main: #222; --gap: 16px; --radius: 8px; } body { color: var(--text-main); line-height: 1.6; margin: 0; } .container { display: grid; grid-template-columns: 240px 1fr; gap: var(--gap); } media (max-width: 768px) { .container { grid-template-columns: 1fr; } }:root相当于全局作用域里面定义的变量可以在任意选择器里用var(--变量名)调用。这里四个变量分别控制主色调、文字色、间距和圆角后期想换主题只需要改--primary一个值全站色系跟着变。grid-template-columns: 240px 1fr的意思是侧边栏固定在240px宽主内容区占据剩余空间1fr是grid布局的比例单位比写死宽度更适应不同屏幕。media (max-width: 768px)是响应式的断点设置当视口宽度小于768px时两栏布局切换成单栏移动端预览不会挤压变形。断点选择768px是因为这是iPad竖屏的常见宽度再往下就该按手机优化了。2.4 在vscode里边写边看用Live Server和DevTools定位样式问题写CSS时最忌讳“写完一整页再刷新浏览器”出错后连哪一段样式影响的都分不清。常见做法是在vscode里安装Live Server扩展然后在index.html上右键选择“Open with Live Server”浏览器会自动打开页面之后每次保存代码页面都会自动刷新不用手动切窗口按F5。这时候再看页面结构就有抓手了打开浏览器开发者工具快捷键CtrlShiftI或CmdOptionI切到Elements面板鼠标在面板里移动时会高亮页面上的对应区域点开DOM节点就能看到它实际套用了哪些CSS规则。styles面板里可以直接勾选或临时修改样式属性比如把--primary从#2b7de9改成红色页面立刻变色——这个操作在答辩现场演示时非常加分可以边改边解释“这是CSS变量实时生效的效果”。这就是“查看web界面代码构成”最直接的做法不是去读源码而是通过开发者工具反向观察标签结构和样式命中的过程。3. 让页面动起来用原生JavaScript把交互做成讲解素材3.1 用事件委托代替逐个绑定监听页面一动起来就要开始写JavaScript。新手最常见的写法是给每个按钮单独addEventListener比如五个删除按钮就绑五次。问题在于如果这些按钮是动态渲染出来的新增的元素就不会带上监听器。这里我建议用事件委托把监听挂到父容器上利用事件冒泡机制捕获子元素触发的事件document.addEventListener(click, (event) { const target event.target; if (target.classList.contains(delete-btn)) { const id target.dataset.id; removeRecord(id); } });这段代码只绑定了一次之后不管列表里新增多少条带delete-btn类的按钮点击事件都会被捕获。target.dataset.id读取的是按钮上>// 保存 localStorage.setItem(teamRecords, JSON.stringify(records)); // 读取 const saved JSON.parse(localStorage.getItem(teamRecords)) || [];需要注意的是setItem的第二个参数必须是字符串所以对象数组要先用JSON.stringify序列化读取的时候再用JSON.parse解析回来。|| []这一段是兜底逻辑如果getItem返回null表示没存过就默认给一个空数组避免后面执行filter或map时报错。localStorage按域名隔离同一个页面的不同端口之间互相访问不到这一点在做演示时要固定用一个端口打开否则会出现“刚才保存的数据不见了”的现象。它的容量在5MB左右对期末作业的数据量绰绰有余。3.3 一个能完整跑通的交互demo成绩筛选与搜索为了让代码部分更完整这里给一个“成绩查询与筛选”模块的完整核心代码配合上一个语义化页面的骨架就能跑通input typetext idsearchInput placeholder按课程名称过滤 table idscoreTable thead tr th学号/thth姓名/thth课程/thth分数/th /tr /thead tbody/tbody /tableconst scores [ { id: 2024001, name: 张三, course: web前端开发, score: 92 }, { id: 2024002, name: 李四, course: JavaScript, score: 85 } ]; const tbody document.querySelector(#scoreTable tbody); const searchInput document.querySelector(#searchInput); function render(filter ) { tbody.innerHTML ; const filtered scores.filter(item item.course.includes(filter) || item.name.includes(filter) ); filtered.forEach(item { const tr document.createElement(tr); tr.innerHTML td${item.id}/td td${item.name}/td td${item.course}/td td${item.score}/td; tbody.appendChild(tr); }); } searchInput.addEventListener(input, (event) { render(event.target.value.trim()); }); render();render函数承担了“渲染列表”的单一职责参数filter控制筛选条件filter方法遍历数组匹配课程名称或姓名中包含关键字的记录。includes做的是子串匹配只要输入“Java”就能查出“JavaScript”大小写敏感所以输入法状态要留意。trim()去掉首尾空格避免输入一个空格导致筛选结果为空。搜索框用input事件而不是change事件这样每次敲击键盘都会实时触发重渲染体验上接近现在的主流筛选交互。这段代码在答辩时特别好讲因为它聚集了四个知识点数组的filter方法、DOM的createElement动态创建节点、模板字符串赋值innerHTML、事件监听实时刷新。每一个都能展开说一两句不会无话可讲。3.4 答辩前必须会的三个调试动作写交互功能的过程中一定会遇到bug会调试比会写代码更重要。第一招是用console.log(变量名)在关键节点打印数据确认函数执行到哪一步时数据就已经不对了第二招是断点调试在开发者工具的Sources面板里找到JS文件点行号打红点刷新页面后代码会停在断点处鼠标悬停在变量上能看到当前值用F10逐行执行、F11进入函数、F12跳出第三招是看Network面板如果页面资源没加载出来能直接看到哪个请求失败、状态码是什么。这三个动作的价值在于它们不依赖任何框架是浏览器底层的通用能力哪怕项目用到框架也照样生效。期末作业阶段养成这个习惯答辩时被问到“如果页面白屏怎么排查”你能说出具体操作步骤而不是干巴巴地回答“可能是代码错了”。4. 源码交付与目录规范让阅卷人和评委一眼看懂工程结构4.1 一份标准的前端期末作业目录应该长什么样源码不只是“能跑的代码”更是评审了解你思考过程的第一手材料。我建议把交付目录整理成下面这样course-project/ ├── index.html ├── team.html ├── about.html ├── css/ │ ├── style.css │ └── reset.css ├── js/ │ ├── main.js │ └── data.js ├── assets/ │ ├── images/ │ └── fonts/ ├── doc/ │ └── 大作业说明书.md └── README.md每个文件的价值在这个结构里非常清楚css/reset.css做浏览器默认样式清零style.css写业务样式js/data.js放模拟数据main.js放交互逻辑doc目录放说明书README.md写项目简介和启动方式。一共有三个HTML文件对应三个页面比单页结构能展示更多布局能力。需要特别提醒的是不要把node_modules、.vscode配置文件夹、.DS_Store这类系统或依赖文件提交进交付包。期末作业不需要打包工具有node_modules反而说明项目是从什么地方复制来的徒增冗余。4.2 命名规则与注释规范面向答辩的编码习惯命名规则不需要多高级关键是前后一致。文件名全部小写加连字符style.css、main.js变量名用驼峰filteredList常量用全大写下划线MAX_COUNT类名用连字符delete-btn。这套规则做出来代码的“工程感”立刻上一个台阶。注释建议每条函数上方写一行“用途说明 参数含义”少量但精准/** * 渲染成绩列表 * param {string} filter - 课程或姓名关键词空字符串表示显示全部 */ function render(filter ) { // ... }JSDoc风格的注释在vscode里能触发智能提示鼠标悬停就能看到说明写起来也不费事。核心逻辑处加一行“这里为什么用includes而不是indexOf”比堆十行解释业务逻辑的注释更有价值——前者能让评委看出你思考过后者只是在描述代码做了什么代码本身已经表达了。4.3 多页面之间的数据共享怎么选两个页面之间要传数据常见做法有三种URL传参、localStorage、sessionStorage。我在前端期末作业里最常用的是URL传参比如team.html?id3在对应页面用new URLSearchParams(location.search).get(id)读取用法直观刷新也不丢。localStorage适合“一次登录全站生效”的场景语义上接近全局变量sessionStorage和localStorage的API完全一样区别在于关闭浏览器标签页就清空适合“本次访问有效”的临时数据。存储方式生命周期传参路径适用场景URL查询参数页面跳转时携带地址栏可见列表页跳详情页传IDlocalStorage永久保存需手动清除同域名全局共享用户配置、收藏记录sessionStorage关闭标签页后失效同域名全局共享表单草稿、临时状态实际使用时可以一个项目里同时用两种列表到详情传ID用URL参数设置的主题色用localStorage保存。这样“为什么在这个场景选这个方案”就能讲得有理有据而不是凭感觉乱用。5. 大作业说明书怎么写结构、篇幅与代码对应关系5.1 说明书本质是评审的“导航地图”大作业说明书不是给老师凑字数的文档它的真实作用是让一个从来没有运行过你项目的人照着说明书能完整复现你的页面并理解你的设计思路。评审流程通常是先翻说明书再打开源码对照最后跑页面验证。所以说明书写得越有条理评审的安全感越高问题的攻击性也会降低。常见做法是采用目录倒推法先把评分标准里提到的“项目概述、功能需求、技术方案、核心代码说明、运行步骤、总结参考文献”这些点列出来逐一映射到说明书章节。每个章节写之前先列小标题再填内容不要从第一页开始流水账式地写。5.2 说明书章节结构表写什么、写多长、对应什么说明书章节写什么内容篇幅建议对应源码位置一、项目概述做的什么、面向哪些用户、解决什么问题半页README.md二、运行环境浏览器版本、vscode插件、是否需要本地服务三分之一页README.md中的启动步骤三、功能需求分析每个页面有哪些功能用列表说明一页三个HTML文件中的section四、技术方案CSS布局方式、JavaScript交互方案、数据存储方案两页style.css和main.js的关键段落五、核心代码说明贴2到3段核心代码逐行讲解两页对应代码加注释版本六、操作演示步骤加截图带读者走一遍一页跑通的实机截图七、项目总结遇到的问题、如何解决的、还可以怎么改进一页无这个结构里最容易被忽视的是“运行环境”和“操作演示”两章。很多同学默认“老师肯定知道怎么打开HTML文件”但实际阅卷时老师们用的是不同的机器、不同的浏览器如果页面依赖Live Server才能正常加载某种资源说明书里不写就白屏了。操作演示截图更是直接证明“这个项目真的能跑”的核心证据截图数量建议8到12张覆盖每个功能模块。5.3 技术方案章节怎么写才不像抄书写技术方案时不要写成教科书名词解释不要写“HTML是一种超文本标记语言”要写“本项目的XX模块采用了XX方案原因是XX备选方案是XX”。比如“列表渲染采用原生JavaScript模板字符串方式没有引入Vue框架因为项目规模较小原生方式加载更快代码量可控。”这就是在展示决策能力说明你不是只会Copy代码而是能判断方案优劣。“核心代码说明”章节可以引用第3章的成绩筛选demo直接贴原代码加注释再补一句“这段代码中采用事件委托的原因是列表为动态渲染如果不使用事件委托新增节点无法触发监听器”。这种表述把代码和决策关联起来评委在这里最容易给高分。5.4 说明书查重与过度包装的边界说明书还有一个现实问题查重。工程类文档的查重通常看连续重复字段所以“自己写流程描述贴自己的代码”不会重反而是从网上复制大段概念解释容易中招。建议每一段都先写“我做了什么”再写“为什么这么做”最后写“效果如何”全部用第一人称视角基本不会和别人的文本撞车。不要为了显得专业而堆砌过度抽象的概念。比如项目里只用到了localStorage就不要写“本项目采用分布式缓存体系”这属于过度包装答辩的时候会被追问到无法收场。说明书写得朴实但准确比写得华丽但失实更稳妥。6. 答辩前用评审视角跑一遍验收清单与演示路线答辩前一天的验收不要站在“作者视角”自测要站在“第一次拿到这份源码的评审人视角”走一遍。我一般会把下面这张清单打出来逐项核对验收项检查方式不通过时的排查思路页面能否直接打开双击index.html看浏览器显示检查资源路径是否是相对路径不要用C:/Users/...绝对路径所有图片能正常显示逐个页面看确认assets/images里的文件名和代码里的引用完全一致大小写也要一致数据能保存并刷新不丢失操作一遍后按F5刷新看localStorage是否被清理检查代码里有没有重新初始化覆盖说明书的运行步骤照做能复现找室友按说明书走一遍缺哪一步就在说明书补哪一步白屏时Console无红色报错CtrlShiftI打开Console看有报错先看文件名和路径90%是script标签引错了文件样式在缩放窗口时不乱F12打开设备模拟器切不同尺寸确认media query的断点写全了演示顺序上我建议按“背景 → 功能 → 代码 → 心得”四步走。先打开首页花30秒介绍这个项目解决什么问题、面向谁然后进入核心功能页面边操作边讲解这里把成绩筛选和搜索作为重头戏因为它的交互反馈最直观接着切换到vscode源码展示目录结构再定位到最得意的代码段讲一段实现思路最后说一个自己在开发中实际踩过的坑比如“localStorage在隐私模式下会抛异常所以我加了一层try/catch”这个细节比背稿子生动得多。如果现场出现white screen第一反应不是翻代码而是按F12看Console里的红色报错大多数情况下是一个拼写错误或路径错误。样式错乱时先按CtrlShiftR强刷一次页面排除浏览器缓存的干扰这个问题在我带新人的时候出现过很多次演示前强制刷新一次永远是稳妥的第一动作。最后一个小技巧把成绩筛选的输入框做成默认“Java”这样评委一打开页面就能看到表格已经被过滤交互效果在第一时间被感知不需要任何口头解释就能抓住注意力。本文还有配套的精品资源点击获取 Web前端期末大作业实战指南：源码交付、说明书撰写与答辩验收全流程
简介面向网站前端开发课程期末大作业场景完整实训项目包适合初学者或需要提交课程设计的学生。内容以“熊猫中心”为主题覆盖首页、报名、博客列表、简介、注册等多个典型页面综合运用HTML搭建结构、CSS控制样式、JavaScript实现交互可直观看到前端从布局到效果的完整落地流程。包体共38个文件包含6个HTML页面、7个样式表、18张JPG配图与4张PNG图片并额外提供项目报告DOCX与说明TXT便于对照设计思路和撰写文档压缩包整体仅6.81MB解压即可浏览运行。目前已有98人学习适合直接参考页面组织方式、样式写法与脚本逻辑也可作为课程设计或实训报告的模板替换图文后快速生成自己的作品。1. 把web前端期末大作业当成一次可验收的小型交付期末前两周拿到题目最常见的开局是打开vscode先搜一套现成模板改两行字就交。结果答辩时评委顺着代码问一句“这个布局是用什么实现的”现场就会冷场。一份能拿高分的web前端期末大作业评的不只是页面好不好看而是三个东西源码是不是你自己能讲清楚、说明书能不能让没跑过项目的人照着复现、演示路径是不是顺畅。这其实是把“作业”当成了一次小型项目交付来验收。这篇内容就是围绕“源码大作业说明书”这两个交付物讲一条从页面骨架、交互实现到文档写作都落地的路线适合第一次做完整前端项目的学生也适合需要带新人评审代码的从业者——评审作业和评审代码的边界逻辑是一样的。2. 先立页面骨架用语义化HTML和CSS变量把样式底子打牢2.1 为什么期末大作业不推荐一上来就套框架很多同学的第一反应是引入一套Bootstrap或者Element UI拖几个组件进去页面立刻“看起来像回事”。但这里有个容易被忽视的风险答辩时评委大概率会问“栅格系统是怎么切出来的”或者“这个响应式是怎么实现的”如果代码全是框架生成的你很难讲出属于自己的实现逻辑。我一般会建议用原生HTML CSS JavaScript做两到三个页面。一个页面负责讲清楚布局原理另一个页面带上交互功能已经能撑起一次完整的结课验收。框架可以写在说明书的“技术扩展”小节里作为延伸而不是作为主实现——前者体现视野后者体现基本功。原生实现的另一个好处是“代码量少、控制点明确”你完全清楚每一行选择了什么这直接决定了后面说明书里的技术说明部分好不好写。2.2 一个能直接跑起来的语义化HTML骨架以“课程组队平台”为例这是一个很适合做期末大作业的选题功能边界清晰、CRUD和筛选都能体现、视觉上也有发挥空间。下面是首页骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title课程组队平台/title link relstylesheet hrefcss/style.css /head body header classheader h1课程组队平台/h1 nav classnav a hrefindex.html首页/a a hrefteam.html组队大厅/a a hrefabout.html关于/a /nav /header main classcontainer aside classsidebar p侧边筛选区/p /aside section classcontent p主体内容区/p /section /main footer classfooter p版权信息与联系方式/p /footer script srcjs/main.js/script /body /html这段代码对应了vscode打开HTML文件后在浏览器里看到的基础页面构成header负责顶部导航、main里面用aside划分侧边栏、section放主体内容、footer收尾。用语义化标签而不是清一色的div是为了让页面结构在不看CSS的情况下也能被读出来——这一点说明书里可以直接写“采用了HTML5语义化标签提升可读性和可维护性”是明确的技术得分点。页面之间的跳转用a标签就能完成不需要引入路由库。js/main.js放在body底部是为了保证DOM先渲染完再执行脚本避免拿不到节点——这是很多新手第一次遇到白屏报错的来源。2.3 用CSS变量统一样式主题后期改版不加班样式部分最关键的设计决策是使用CSS变量定义全局主题:root { --primary: #2b7de9; --text-main: #222; --gap: 16px; --radius: 8px; } body { color: var(--text-main); line-height: 1.6; margin: 0; } .container { display: grid; grid-template-columns: 240px 1fr; gap: var(--gap); } media (max-width: 768px) { .container { grid-template-columns: 1fr; } }:root相当于全局作用域里面定义的变量可以在任意选择器里用var(--变量名)调用。这里四个变量分别控制主色调、文字色、间距和圆角后期想换主题只需要改--primary一个值全站色系跟着变。grid-template-columns: 240px 1fr的意思是侧边栏固定在240px宽主内容区占据剩余空间1fr是grid布局的比例单位比写死宽度更适应不同屏幕。media (max-width: 768px)是响应式的断点设置当视口宽度小于768px时两栏布局切换成单栏移动端预览不会挤压变形。断点选择768px是因为这是iPad竖屏的常见宽度再往下就该按手机优化了。2.4 在vscode里边写边看用Live Server和DevTools定位样式问题写CSS时最忌讳“写完一整页再刷新浏览器”出错后连哪一段样式影响的都分不清。常见做法是在vscode里安装Live Server扩展然后在index.html上右键选择“Open with Live Server”浏览器会自动打开页面之后每次保存代码页面都会自动刷新不用手动切窗口按F5。这时候再看页面结构就有抓手了打开浏览器开发者工具快捷键CtrlShiftI或CmdOptionI切到Elements面板鼠标在面板里移动时会高亮页面上的对应区域点开DOM节点就能看到它实际套用了哪些CSS规则。styles面板里可以直接勾选或临时修改样式属性比如把--primary从#2b7de9改成红色页面立刻变色——这个操作在答辩现场演示时非常加分可以边改边解释“这是CSS变量实时生效的效果”。这就是“查看web界面代码构成”最直接的做法不是去读源码而是通过开发者工具反向观察标签结构和样式命中的过程。3. 让页面动起来用原生JavaScript把交互做成讲解素材3.1 用事件委托代替逐个绑定监听页面一动起来就要开始写JavaScript。新手最常见的写法是给每个按钮单独addEventListener比如五个删除按钮就绑五次。问题在于如果这些按钮是动态渲染出来的新增的元素就不会带上监听器。这里我建议用事件委托把监听挂到父容器上利用事件冒泡机制捕获子元素触发的事件document.addEventListener(click, (event) { const target event.target; if (target.classList.contains(delete-btn)) { const id target.dataset.id; removeRecord(id); } });这段代码只绑定了一次之后不管列表里新增多少条带delete-btn类的按钮点击事件都会被捕获。target.dataset.id读取的是按钮上>// 保存 localStorage.setItem(teamRecords, JSON.stringify(records)); // 读取 const saved JSON.parse(localStorage.getItem(teamRecords)) || [];需要注意的是setItem的第二个参数必须是字符串所以对象数组要先用JSON.stringify序列化读取的时候再用JSON.parse解析回来。|| []这一段是兜底逻辑如果getItem返回null表示没存过就默认给一个空数组避免后面执行filter或map时报错。localStorage按域名隔离同一个页面的不同端口之间互相访问不到这一点在做演示时要固定用一个端口打开否则会出现“刚才保存的数据不见了”的现象。它的容量在5MB左右对期末作业的数据量绰绰有余。3.3 一个能完整跑通的交互demo成绩筛选与搜索为了让代码部分更完整这里给一个“成绩查询与筛选”模块的完整核心代码配合上一个语义化页面的骨架就能跑通input typetext idsearchInput placeholder按课程名称过滤 table idscoreTable thead tr th学号/thth姓名/thth课程/thth分数/th /tr /thead tbody/tbody /tableconst scores [ { id: 2024001, name: 张三, course: web前端开发, score: 92 }, { id: 2024002, name: 李四, course: JavaScript, score: 85 } ]; const tbody document.querySelector(#scoreTable tbody); const searchInput document.querySelector(#searchInput); function render(filter ) { tbody.innerHTML ; const filtered scores.filter(item item.course.includes(filter) || item.name.includes(filter) ); filtered.forEach(item { const tr document.createElement(tr); tr.innerHTML td${item.id}/td td${item.name}/td td${item.course}/td td${item.score}/td; tbody.appendChild(tr); }); } searchInput.addEventListener(input, (event) { render(event.target.value.trim()); }); render();render函数承担了“渲染列表”的单一职责参数filter控制筛选条件filter方法遍历数组匹配课程名称或姓名中包含关键字的记录。includes做的是子串匹配只要输入“Java”就能查出“JavaScript”大小写敏感所以输入法状态要留意。trim()去掉首尾空格避免输入一个空格导致筛选结果为空。搜索框用input事件而不是change事件这样每次敲击键盘都会实时触发重渲染体验上接近现在的主流筛选交互。这段代码在答辩时特别好讲因为它聚集了四个知识点数组的filter方法、DOM的createElement动态创建节点、模板字符串赋值innerHTML、事件监听实时刷新。每一个都能展开说一两句不会无话可讲。3.4 答辩前必须会的三个调试动作写交互功能的过程中一定会遇到bug会调试比会写代码更重要。第一招是用console.log(变量名)在关键节点打印数据确认函数执行到哪一步时数据就已经不对了第二招是断点调试在开发者工具的Sources面板里找到JS文件点行号打红点刷新页面后代码会停在断点处鼠标悬停在变量上能看到当前值用F10逐行执行、F11进入函数、F12跳出第三招是看Network面板如果页面资源没加载出来能直接看到哪个请求失败、状态码是什么。这三个动作的价值在于它们不依赖任何框架是浏览器底层的通用能力哪怕项目用到框架也照样生效。期末作业阶段养成这个习惯答辩时被问到“如果页面白屏怎么排查”你能说出具体操作步骤而不是干巴巴地回答“可能是代码错了”。4. 源码交付与目录规范让阅卷人和评委一眼看懂工程结构4.1 一份标准的前端期末作业目录应该长什么样源码不只是“能跑的代码”更是评审了解你思考过程的第一手材料。我建议把交付目录整理成下面这样course-project/ ├── index.html ├── team.html ├── about.html ├── css/ │ ├── style.css │ └── reset.css ├── js/ │ ├── main.js │ └── data.js ├── assets/ │ ├── images/ │ └── fonts/ ├── doc/ │ └── 大作业说明书.md └── README.md每个文件的价值在这个结构里非常清楚css/reset.css做浏览器默认样式清零style.css写业务样式js/data.js放模拟数据main.js放交互逻辑doc目录放说明书README.md写项目简介和启动方式。一共有三个HTML文件对应三个页面比单页结构能展示更多布局能力。需要特别提醒的是不要把node_modules、.vscode配置文件夹、.DS_Store这类系统或依赖文件提交进交付包。期末作业不需要打包工具有node_modules反而说明项目是从什么地方复制来的徒增冗余。4.2 命名规则与注释规范面向答辩的编码习惯命名规则不需要多高级关键是前后一致。文件名全部小写加连字符style.css、main.js变量名用驼峰filteredList常量用全大写下划线MAX_COUNT类名用连字符delete-btn。这套规则做出来代码的“工程感”立刻上一个台阶。注释建议每条函数上方写一行“用途说明 参数含义”少量但精准/** * 渲染成绩列表 * param {string} filter - 课程或姓名关键词空字符串表示显示全部 */ function render(filter ) { // ... }JSDoc风格的注释在vscode里能触发智能提示鼠标悬停就能看到说明写起来也不费事。核心逻辑处加一行“这里为什么用includes而不是indexOf”比堆十行解释业务逻辑的注释更有价值——前者能让评委看出你思考过后者只是在描述代码做了什么代码本身已经表达了。4.3 多页面之间的数据共享怎么选两个页面之间要传数据常见做法有三种URL传参、localStorage、sessionStorage。我在前端期末作业里最常用的是URL传参比如team.html?id3在对应页面用new URLSearchParams(location.search).get(id)读取用法直观刷新也不丢。localStorage适合“一次登录全站生效”的场景语义上接近全局变量sessionStorage和localStorage的API完全一样区别在于关闭浏览器标签页就清空适合“本次访问有效”的临时数据。存储方式生命周期传参路径适用场景URL查询参数页面跳转时携带地址栏可见列表页跳详情页传IDlocalStorage永久保存需手动清除同域名全局共享用户配置、收藏记录sessionStorage关闭标签页后失效同域名全局共享表单草稿、临时状态实际使用时可以一个项目里同时用两种列表到详情传ID用URL参数设置的主题色用localStorage保存。这样“为什么在这个场景选这个方案”就能讲得有理有据而不是凭感觉乱用。5. 大作业说明书怎么写结构、篇幅与代码对应关系5.1 说明书本质是评审的“导航地图”大作业说明书不是给老师凑字数的文档它的真实作用是让一个从来没有运行过你项目的人照着说明书能完整复现你的页面并理解你的设计思路。评审流程通常是先翻说明书再打开源码对照最后跑页面验证。所以说明书写得越有条理评审的安全感越高问题的攻击性也会降低。常见做法是采用目录倒推法先把评分标准里提到的“项目概述、功能需求、技术方案、核心代码说明、运行步骤、总结参考文献”这些点列出来逐一映射到说明书章节。每个章节写之前先列小标题再填内容不要从第一页开始流水账式地写。5.2 说明书章节结构表写什么、写多长、对应什么说明书章节写什么内容篇幅建议对应源码位置一、项目概述做的什么、面向哪些用户、解决什么问题半页README.md二、运行环境浏览器版本、vscode插件、是否需要本地服务三分之一页README.md中的启动步骤三、功能需求分析每个页面有哪些功能用列表说明一页三个HTML文件中的section四、技术方案CSS布局方式、JavaScript交互方案、数据存储方案两页style.css和main.js的关键段落五、核心代码说明贴2到3段核心代码逐行讲解两页对应代码加注释版本六、操作演示步骤加截图带读者走一遍一页跑通的实机截图七、项目总结遇到的问题、如何解决的、还可以怎么改进一页无这个结构里最容易被忽视的是“运行环境”和“操作演示”两章。很多同学默认“老师肯定知道怎么打开HTML文件”但实际阅卷时老师们用的是不同的机器、不同的浏览器如果页面依赖Live Server才能正常加载某种资源说明书里不写就白屏了。操作演示截图更是直接证明“这个项目真的能跑”的核心证据截图数量建议8到12张覆盖每个功能模块。5.3 技术方案章节怎么写才不像抄书写技术方案时不要写成教科书名词解释不要写“HTML是一种超文本标记语言”要写“本项目的XX模块采用了XX方案原因是XX备选方案是XX”。比如“列表渲染采用原生JavaScript模板字符串方式没有引入Vue框架因为项目规模较小原生方式加载更快代码量可控。”这就是在展示决策能力说明你不是只会Copy代码而是能判断方案优劣。“核心代码说明”章节可以引用第3章的成绩筛选demo直接贴原代码加注释再补一句“这段代码中采用事件委托的原因是列表为动态渲染如果不使用事件委托新增节点无法触发监听器”。这种表述把代码和决策关联起来评委在这里最容易给高分。5.4 说明书查重与过度包装的边界说明书还有一个现实问题查重。工程类文档的查重通常看连续重复字段所以“自己写流程描述贴自己的代码”不会重反而是从网上复制大段概念解释容易中招。建议每一段都先写“我做了什么”再写“为什么这么做”最后写“效果如何”全部用第一人称视角基本不会和别人的文本撞车。不要为了显得专业而堆砌过度抽象的概念。比如项目里只用到了localStorage就不要写“本项目采用分布式缓存体系”这属于过度包装答辩的时候会被追问到无法收场。说明书写得朴实但准确比写得华丽但失实更稳妥。6. 答辩前用评审视角跑一遍验收清单与演示路线答辩前一天的验收不要站在“作者视角”自测要站在“第一次拿到这份源码的评审人视角”走一遍。我一般会把下面这张清单打出来逐项核对验收项检查方式不通过时的排查思路页面能否直接打开双击index.html看浏览器显示检查资源路径是否是相对路径不要用C:/Users/...绝对路径所有图片能正常显示逐个页面看确认assets/images里的文件名和代码里的引用完全一致大小写也要一致数据能保存并刷新不丢失操作一遍后按F5刷新看localStorage是否被清理检查代码里有没有重新初始化覆盖说明书的运行步骤照做能复现找室友按说明书走一遍缺哪一步就在说明书补哪一步白屏时Console无红色报错CtrlShiftI打开Console看有报错先看文件名和路径90%是script标签引错了文件样式在缩放窗口时不乱F12打开设备模拟器切不同尺寸确认media query的断点写全了演示顺序上我建议按“背景 → 功能 → 代码 → 心得”四步走。先打开首页花30秒介绍这个项目解决什么问题、面向谁然后进入核心功能页面边操作边讲解这里把成绩筛选和搜索作为重头戏因为它的交互反馈最直观接着切换到vscode源码展示目录结构再定位到最得意的代码段讲一段实现思路最后说一个自己在开发中实际踩过的坑比如“localStorage在隐私模式下会抛异常所以我加了一层try/catch”这个细节比背稿子生动得多。如果现场出现white screen第一反应不是翻代码而是按F12看Console里的红色报错大多数情况下是一个拼写错误或路径错误。样式错乱时先按CtrlShiftR强刷一次页面排除浏览器缓存的干扰这个问题在我带新人的时候出现过很多次演示前强制刷新一次永远是稳妥的第一动作。最后一个小技巧把成绩筛选的输入框做成默认“Java”这样评委一打开页面就能看到表格已经被过滤交互效果在第一时间被感知不需要任何口头解释就能抓住注意力。本文还有配套的精品资源点击获取