又到了交第一次web作业的季节。我这些年陆续看过几百份新人提交的第一个web项目，从纯静态的HTML页面，到挂着Spring Boot的增删改查都有。一个很有意思的现象是：拿高分的不一定是代码量最大的，而是那种你打开工程目录、顺着代码读下来，几分钟就能知道他做了什么、为什么这样做的项目。这篇就围绕"第一次web作业"这件事，把从拿到题目到最终演示的完整链路拆开讲一遍，包括环境搭建、工程结构、常见翻车点，以及怎么在基础分之上做出亮点。适合正在赶作业的学生，也适合带新人的朋友参考。
1. 拿到题别急着敲代码：先想清楚这三件事
1.1 需求没读懂，后面全是白干
大部分人的第一反应是打开IDEA就开始写。写代码当然是最有成就感的部分，读需求是最无聊的部分，但第一次web作业最大的翻车点恰恰是需求理解偏差。老师布置一个"个人主页"，你能做出一个餐厅点餐页面；老师要求"带登录功能"，你交了一个纯静态展示页。这不是能力问题，是动手之前没有把需求钉死。
我的建议特别朴素：动手之前，用一页纸把需求写清楚，哪怕手写都行。这个作业到底需要几个页面？每个页面的核心功能是什么？哪些数据是写死的静态内容，哪些必须从后端或者数据库来？是否需要登录？在什么浏览器上打开？这一页纸不需要格式规范，但你必须能答上来。
写不出来也没关系，那就说明题目本身模糊。这时候去问老师、问同学，甚至自己定义一个最小可用范围（MVP）都行。我见过很多学生在需求模糊的情况下，凭感觉把功能越做越大，最后交上来一个半成品——每个按钮都能点，但每个功能都只做了一半。与其这样，不如一开始就明确"我这版只做三件事"，把三件事做扎实，比做十件半吊子事得分高得多。
1.2 技术栈选自己能闭环的
新手常见的毛病是技术选型"贪多"。一问就是"我要用Vue.js + Spring Boot + MySQL + Redis"，还打算上Docker部署。说实话，第一次作业真的不需要这些。技术栈选得越多，出问题时你越不知道锅在谁身上。
我反复和学生强调一个词：能闭环。什么意思？就是你能完整地演示一条数据从"用户操作"到"页面展示"的链路。比如你写一个静态页面，页面上有个表单，提交之后能通过后端接口存进数据，再从数据查出来渲染到页面上——这就是一个闭环。哪怕后端没有数据库，用内存数组代替也行。
如果你选了Vue.js，道理也一样：前端必须去调用真实的Web API，而不是用mock.js把假数据写死在前端。我见过不少学生页面做得很好看，点开Network面板发现一个真实请求都没有，全是本地造假数据。这种作业演示时碰巧没什么问题，但只要验收的人稍微改一下输入，立刻就露馅。工具是为你服务的，不是拿来凑简历字数的。
1.3 验收标准要提前问清楚
这里说的验收标准不是期末评分细则，而是"这个作业最后是怎么被评价的"。我见过两种典型的评分方式：一种是按页面效果打分，看重视觉完成度；另一种是按功能打分，看重业务流程是否贯通。这两种导向下，你的精力分配完全不一样。
还有一个容易被忽略的问题：代码需不需要在别人的机器上跑起来？如果需要，你就不能只在自己的电脑上能运行。我遇到过一个真实案例，学生用了一个需要特殊配置的本地服务，老师在他的电脑上怎么都起不来，最后只能对着截图打分。这种教训一次就够了。条件允许的话，尽量保证项目在干净环境里能启动，或者至少提供完整的环境说明和启动脚本。
2. 工程骨架立起来，作业就成功了一半
2.1 想用IDEA 2024创建Web项目，这几个细节先确认
如果你的方向是Java，我比较推荐直接用IntelliJ IDEA 2024创建web项目。过程本身不复杂：新建项目时选Spring Initializr，选好JDK版本，勾上Web相关的依赖，等Maven把依赖拉下来。新手在这里最常见的坑是依赖下载慢，卡在进度条上十几分钟，然后开始怀疑人生。解决办法也很常规：把Maven仓库换成国内镜像，你的时间不应该浪费在等待上。
第一次用框架的时候，我还建议搞清楚一个概念：Maven或者Gradle引入的"项目结构"到底意味着什么。很多新人直接用IDEA的向导生成工程，目录结构是什么样完全不关心，反正能跑就行。但恰恰是这个目录结构，决定了你后面加功能、修Bug的时候是"按图索骥"还是"大海捞针"。标准结构的好处在于约定俗成：哪里放页面，哪里放接口，哪里放配置，全都有规律。
如果你是Python方向，Django本身就是一个"开箱即用"的完整方案，很多人就是靠《Django Web应用开发实战》这类书入的门。我不评判哪个语言更好，只强调一点：选定一条路线，一路走到能演示的程度。环境搭建花两三天还可以接受，花一周以上就不是环境问题了，是你还没想清楚自己要做什么。
2.2 Spring Boot项目结构目录，其实是在替你管理混乱
说到Java作业，目前最常见的就是Spring Boot。我简单拆一下标准的springboot web项目结构目录，你对照一下自己的工程：
- src/main/java：存放Java源码，一般按controller、service、mapper（或者repository）分包。
- src/main/resources/static：存放静态资源，HTML、CSS、JS都放这里。
- src/main/resources/templates：存放服务端模板页面（如果用Thymeleaf之类的话）。
- src/main/resources/application.yml：项目配置文件，端口、数据库连接、各种开关都在这。
很多学生觉得"我的项目这么小，分这么多层没必要"。但分层不是给大项目准备的，是给你自己准备的。你写了一个接口，要找它对应的页面文件，如果所有东西都堆在一两个文件里，找起来就是灾难。我有一次帮一个学生看作业，他把HTML、Controller、数据库连接串全写在一个Java文件里，大概八百行。功能是跑通了，但我想帮他加一个字段，得在同一坨代码里翻半天。这样的代码即使得了高分，你也学不到东西，因为你根本没有组织代码的经验。
所以我的建议是：第一次作业哪怕逻辑很简单，也至少把"页面"和"逻辑"分开。静态页面放static，Java代码按层分包。这个习惯不需要花额外时间，但会让你的代码从"能跑"变成"能读"。
2.3 就算是一次作业，也请开个Git仓库
这一条我几乎每次都会唠叨，但每次都有学生不放在心上。开Git仓库的理由就三条：第一，安全。你删错文件、改坏代码，随时可以回退。第二，对比。程序昨天还好好的，今天怎么坏了？Git diff能告诉你改了哪里。第三，痕迹。面试的时候人家问"你项目怎么做的"，你能把提交记录拉出来讲，比干巴巴说"我做过一个网站"有说服力得多。
实际操作非常简单：在项目根目录执行 git init，然后 add 和 commit。不需要会什么高级用法，会这三个命令就够了。如果愿意注册一个私有远程仓库，那更好，等于多了一个自动备份。我记得有个学生交作业时忘记把本机文件拷贝到U盘，临时借同学电脑重新写了两个小时——这种痛苦本来一个commit就能避免。
3. 本地跑通不算本事，能演示能交付才算
3.1 浏览器里的"检查"面板，是你最好的老师
很多新人在本地把页面跑起来就觉得自己完工了，完全没意识到"自己能看到"和"别人能打开"是两回事。在部署之前，我强烈建议你养成一个习惯：按F12打开浏览器的开发者工具，看Network面板。
这个面板能告诉你每一个请求的状态码：200是正常，404是路径错了，500是后端崩了。你说页面白屏，原因可能有一百种，但Network面板会直接告诉你哪一个资源加载失败。还有Fiddler这类抓包工具，也是Web调试的经典工具，遇到请求细节问题时比浏览器自带面板更能看清全貌。我不是让你把所有工具都学一遍，而是建议你形成一种思路：出问题时，先问"这个请求到底发到哪去了、服务器回了什么、浏览器拿到了什么"。大部分Web新手的Bug，本质上都是"位置"问题——资源路径、接口路径、跳转路径，三者常常搞混。
顺便说一个我见过的有趣案例：有个作业要求实现"文本首字母大写"，学生写了一段JS想把中文变成首字母大写。这里有个基础概念需要搞清楚：CSS的text-transform: capitalize只对拉丁字母有效，中文根本没有大小写之分。如果需求写的是"首字母大写"，恰好处理的是中文，那你要先想清楚需求到底要什么。这个例子看起来很小，但能反映你是否在理解浏览器行为，而不是在堆代码。
3.2 免费Web服务器能用，但别把它当万能
作业需要"在线访问"的时候，很多人第一个想到的是找免费Web服务器网站。这类平台确实方便：传上去就能得到一个链接，发给老师就能看。但我对免费资源的建议一直是"能用，但要想清楚代价"。
免费服务器的常见问题有几个：可能会在你的页面上插入广告；服务器不稳定，演示到一半挂了；有些免费服务会定期清理数据，你的项目数据说没就没；还有一些平台会要求你放弃部分内容权益，你没细看条款就点了同意。如果你决定用，至少选择知名度高的平台，认真读一下条款，不要把任何真实个人信息或者项目机密传上去。
说实话，对于第一次作业，一个本地可运行的项目加上一份录屏演示，往往比一个摇摇欲坠的在线链接更靠谱。在线部署是你的加分项，而不是必需品。如果你实在想展示在线效果，也要保证本地版本同样能跑起来，两条腿走路。
3.3 演示材料清单：最容易被扣分的"最后一公里"
我每次布置作业都会强调：代码本身可能只占一部分分数，演示和交付说明占另一部分。很多学生项目做得不错，结果README写得乱七八糟，老师根本不知道怎么启动。这不是小问题。
一份合格的作业交付包至少包含这些内容：
- README：项目是什么、环境要求、启动步骤、默认账号密码。
- 数据库脚本：如果用了数据库，必须提供建表和初始化数据的SQL。
- 演示录屏：把核心操作流程录下来，三五分钟就够了。
- 截图：页面效果图，方便老师不启动项目也能快速了解。
还有一个经常出现的需求是"web页面pdf打印"。课程作业里经常要求把网页内容打印或导成PDF上交，很多人的做法是直接截图拼接，表格一长就断头断尾。正确做法是用打印样式：写@media print，把导航栏隐藏掉，给表格设置page-break相关规则，让打印出来的PDF干净、完整。这个细节投入时间很少，但能明显看出你是否理解Web开发中"为不同媒体设计"的思想。
4. 每一届都在踩的五个坑
4.1 中文乱码：根因往往不是"编码"两个字
中文乱码可能是Web新手遇到最多的玄学问题。现象很一致：本地编辑器里看着好好的，打开页面全成了"锟斤拷"。原因其实不复杂，就是编码不一致。可能出在几个位置：源代码文件的保存编码是GBK但页面声明是UTF-8；后端响应头没设置charset=UTF-8；数据库连接串没加characterEncoding参数；数据库表本身的字符集不对。
排查思路也很固定：先看浏览器端接收到的实际内容，再倒推是哪个环节变了编码。预防方法更简单：开发过程中统一使用UTF-8。IDE的文件编码设成UTF-8，项目编码设成UTF-8，数据库连接串带上characterEncoding=utf8，数据库和表的字符集也统一成utf8mb4。把这个规则记下来，比遇到乱码再查半天效率高得多。
4.2 资源404：静态文件放错地方
第二个高频问题和编码几乎并列。表现形式是：页面能打开，但图片不显示、CSS样式丢失、JS不加载。打开Network一看，全是红色404。
原因基本就两类。一类是把静态资源放在了Spring Boot不会扫描的位置。有些学生习惯把HTML直接放在项目的根目录下，结果Spring Boot根本不会把根目录当成静态资源目录，文件放在src/main/resources/static下面才能被正确访问。另一类是路径写错了，用了绝对路径而没有考虑应用部署的上下文路径，部署到带前缀的环境下就404。
排查这种问题，我教学生的方法很笨但有效：在Network面板里找到那个404的请求，把完整的请求URL复制出来，手动在浏览器里打开。如果单独打开也是404，说明路径或位置错了；如果单独打开能打开，说明是页面引用方式的问题。两步一测，马上就能定位。
4.3 假联调：页面好看，点击就垮
这一条值得单独拿出来说。我知道学校作业有很多"只要求前端页面"的情况，但如果你的作业允许你做一个完整的请求链路，就不要只做表面功夫。我见过不少作业，页面精美得像设计稿，但实际上每一个数据都是硬编码在前端里的。
我理解为什么会有这种现象：前端写好之后，后端的东西不会，或者懒得搞，就用假数据糊弄。但这样做的结果是，你根本没经历过Web开发最核心的那一步——前后端怎么通信。我建议哪怕作业没有强制要求，也至少写一个真实的接口：一个最简单的GET请求，后端返回一段JSON，前端通过fetch或者axios拿到并渲染出来。就这一步，会让你对HTTP、请求响应、数据格式这些东西有非常直观的认识。如果你用了Vue.js，更应该把组件里的mock数据换成真实Web API调用，否则组件写再多也是空中楼阁。
4.4 Web安全不是大厂专利
很多学生觉得Web安全是"企业级"话题，跟课程作业没关系。这个观念得改。我见过第一次作业里就出现这些操作：数据库密码直接硬编码在代码里然后推到公开仓库；接口地址暴露内部结构；SQL语句用字符串拼接而不做参数化处理；部署到服务器之后保持默认端口和默认口令。
我不是让你第一次作业就掌握什么高深的安全技术，而是强调几条底线：第一，任何密码、密钥都不要写进代码，放到配置文件并加入忽略列表。第二，访问数据库时用参数化查询或者干脆用ORM，不要做SQL拼接。第三，部署到公网时，至少把默认端口改掉、把不用的服务关掉。这些习惯现在不建立，以后进团队的时候就是拖后腿的人。
另外，想了解Web漏洞但又不确定该怎么练的，有两个建议：一是上面说的这些基本防御做好；二是去专门的web靶场练习平台做实验，而不是拿真实网站动手。安全意识的起点是"知道边界在哪里"，这一点从第一次作业就应该有。
4.5 隐私和数据边界，要早于代码能力
现在的Web开发里，"用户数据"是个很敏感的东西。新闻里常听到"web一键获取手机号"之类的说法，这种能力在真实业务中涉及严格的权限和合规要求，不是作业里应该随手实现的功能。如果你的作业恰好涉及表单收集用户信息，我建议统一使用假数据，不要真的填自己的手机号、身份证号，更不要把收集到的信息往不可信的服务上传。
还有一个隐蔽问题：有些第三方SDK或在线字体、统计脚本会在后台发送数据。作业里尽量少引这类东西，一方面减少数据外泄风险，另一方面也让页面更干净。隐私意识这种东西，不是等到工作之后才开始养成的，从第一次作业开始就要有"哪些数据能碰、哪些数据不能碰"的直觉。
5. 做完基础分之后，还有哪些加分方向
5.1 把打印和适配做好，页面完成度立刻不一样
很多第一次作业的页面只在电脑端、Chrome浏览器下打开过，完全没考虑打印和手机访问。这两个点恰恰是低成本高回报的加分项。
打印方向，我在前面提到过@media print样式。这一招可以用在很多课程要求"网页转PDF"的场景里，让老师收到的文档干净整洁。适配方向就更简单了：用浏览器开发者工具切换到手机模式的视图，看看页面在窄屏下是不是惨不忍睹。如果连基本的响应式都没有，加一个viewport设置和几个媒体查询，就能让页面在手机上可读。顺带说一句，很多公司的日常工作里，"页面能不能正常打印"和"页面在手机上好不好用"就是真实需求，你在作业里练的这些不是无用功。
5.2 用一次作业串起一个知识面
第一次作业是一个特别好的"入口"，因为你有一个明确的目标，这个目标能牵引你去学周边概念。我建议做完基础功能之后，挑一个方向往下深挖一点：
- 企业级Web开发的理念：把配置外置，区分开发环境和生产环境配置，加日志输出。这些听起来很"大厂"，但你的作业完全可以先用上最基础的部分。
- 缓存是怎么回事：为什么改了代码，刷新浏览器看到的还是旧页面？这就是缓存。理解浏览器缓存，再往后就会接触到Nginx这类服务的Linux web缓存概念，都是同一个知识链。
- 实时更新怎么做：如果你的页面数据需要自动刷新，先试试定时轮询，再了解WebSocket和SSE，这就为将来做web端实时视频、消息推送这类功能打了地基。
- 简单的推荐逻辑：视频首页的那种推荐算法，背后是从简单到复杂的一系列规则。你可以在作业里做一个"根据浏览量排序的推荐列表"，这就成了你对推荐算法的第一个实践。
- 有意思的小工具：比如用rembg这个库提取图片前景、去掉背景，然后把它包成一个Web应用。这种"前因后果非常清晰"的迷你项目，反而是很好的全栈练手。再比如想和AI搜索开放平台这类Web service结合，做一个带联网搜索的页面，也是很有话题性的方向。
我不建议你把这些方向全做一遍，挑一个你真正感兴趣的，把它做深，比浅尝辄止更值。
5.3 交作业前的复盘清单
最后，给你一份我这些年一直用的检查清单，交作业之前逐条过一遍：
- 代码里有没有本地绝对路径？比如"C:\Users..."，全部要换成相对路径或者配置项。
- 有没有把备份文件、临时文件、带密码的配置文件一起提交？有就删掉。
- 能不能按照README的步骤，在一个干净环境下把项目跑起来？建议自己先试一遍。
- README里有没有写清楚测试账号和初始数据？
- 演示录屏和截图是否齐全？页面的打印样式是否正确？
把这些都过完，你的作业至少不会因为"老师打不开"这种原因丢分。
带过这么多批第一次作业，我最大的体会是：作业本身的价值不是那个分数，而是你有没有建立起"遇到错误能定位、能解释、能修复"的闭环。第一次web作业能帮你建立这个闭环，后面所有web工程都是在这个基础上做加法。我见过太多人急着追新技术，却连自己写的页面为什么出现一个404都解释不清楚。所以，第一份作业不追求完美，追求的是你能把自己的每一行代码、每一次报错都讲明白。能做到这一点，这份作业就已经超出大多数人了。
