★ FEATURED ARTICLE 如果让我给第一次接触 WEB 大作业的同学一个建议我不会先甩给你一堆框架教程链接而是让你先想清楚这个大作业到底是“做个页面交差”还是“完整走一遍 web 项目的开发流程”。这两个目标对应的工作量完全不一样。我自己第一次做 web 大作业时选了一个“健康饮食推荐系统”的题目从零搭了一个带登录、数据列表、增删改查和推荐逻辑的小项目前端页面、后端接口、数据库、部署演示全走了一遍中间踩了不少坑。今天把完整的思路、选型、实现步骤和避坑记录整理出来希望能让正在赶这个 web 项目的你少走点弯路。这篇文章适合两类读者一类是被课程要求压着、需要尽快完成第一个 web 任务的新手另一类是虽然代码写过不少、但还没完整跑通过一个真项目的自学者。1. 大作业的核心不是代码量而是“能不能跑通”1.1 先拆解验收标准再动手每年大作业季群里总有人说“我的项目代码写了 3000 行老师会不会给高分”。说实话大部分第一次做 web 大作业的同学问题不是代码少而是根本不知道验收到底看什么。常见评分维度其实很固定我列过一次之后就一直在用验收维度具体观察点功能完整性核心功能是否全部可用有没有做了一半的入口界面与交互布局是否合理跳转是否清晰表单能否正常提交数据存取提交的数据刷新后还在不在数据库是否真实落盘运行稳定性是否有明显报错异常操作是否会导致页面崩溃演示流畅性从启动到走完一条完整流程是否能在几分钟内顺畅演示我第一次做这个项目时没有先列清单上来就写代码结果做到一半发现登录和推荐逻辑纠缠在一起改起来非常痛苦。后来我养成了一个习惯先拿一张纸把“必须有的功能”和“选做的功能”分两栏。比如我选的健康饮食推荐系统必须功能只有四个用户注册登录、菜品列表展示、菜品详情查看、收藏菜品。再加一个简单的推荐逻辑——根据用户收藏的分类筛选对应菜品。这个范围对于一个第一次做 web 大作业的新手来说刚刚好既不假大空也不会复杂到做不完。时间上也要做个粗略分配。我见过很多人的进度是前两周慢慢悠悠搭页面最后三天熬夜写后端。正确的节奏应该反过来先把主流程研究明白前一周解决数据库和核心接口第二周再做页面美化。因为页面好不好看不会导致项目崩溃后端跑不起来才会。这听起来像废话但每年都有同学在页面样式上抠了两天后端却只写了个空壳。1.2 为什么推荐先做“能演示”而不是“很复杂”第二个常见的坑是贪大。我第一次做大作业时一开始想加购物车、订单结算、后台管理、数据统计结果写了两周前端乱成一团后端接口也没通几个最后只能熬夜删功能才勉强提交。后来我带学弟学妹做项目一律建议他们先做一条最完整的主线流程用户注册 - 登录 - 浏览列表 - 查看详情 - 提交一条收藏或评价。这条链路只要全走通整个项目骨架就成立了剩下的功能全是往骨架上加肉。这和写代码的思路其实是一致的先打通主链路再处理分支和边界。很多人担心功能少会被扣分实际上把主流程做扎实、没有运行时错误通常比堆一屏点不亮的按钮更靠谱。因为老师验收时最反感的场景就是演示到一个功能时页面突然报错然后你说“这个我还没写完我们看下一个”。这话说出口印象分基本就没了。我还想提醒一句第一次做项目不要追求“原创性”。很多同学非要自己杜撰一个奇怪的业务场景结果逻辑漏洞百出。选一个你熟悉的小场景比如课程表管理、图书借阅、健康饮食推荐把需求确定清楚反而是最好的起点。业务理解清楚了代码自然顺。2. 技术栈选型第一次作业真的需要 Spring Boot 吗2.1 三条常见路线的优缺点对比很多同学一搜“web 项目 大作业”立刻被 Spring Boot 教程淹没然后越看越慌。先给结论第一次做 web 大作业不是不能用 Spring Boot而是你得先搞清楚自己手里有多少时间和基础再决定要不要上。纯静态 HTML/CSS/JavaScript写起来最快适合前几章的小练习但严格说只能叫“网页”没有后端数据交互。如果题目明确要求“数据存取”“动态展示”这条路就不够用。Servlet JSP JDBC学校课程里最常见的路线搭配 Tomcat 和 MySQL能把请求响应、Session、数据库交互完整跑一遍概念直白适合第一次接触后端的人。Spring Boot Thymeleaf/Vue企业级开发的主流路线开发效率高但牵扯 Maven 依赖、自动配置、注解扫描、内嵌容器等一堆前置知识新手很容易卡在环境搭建上。三条路线我都实际走过。如果目标是快速稳定完成大作业我的建议是第二条Servlet JSP MySQL。它虽然不是当下最时髦的技术但能实实在在考察你是否理解一次 HTTP 请求从浏览器到数据库的完整流转过程。我第一次做完这个项目后对“后端到底在做什么”的理解比看十遍教程都深。2.2 一套稳妥的组合和环境准备我当时用的是JDK 8、Maven 管理依赖、IntelliJ IDEA 写代码、Tomcat 9 运行、MySQL 5.7 存数据。前后端没有分离JSP 负责渲染页面Servlet 负责接收请求。这套组合的好处是每个环节都有唯一职责出了问题你很容易顺着链路查浏览器请求 - Servlet - Service - DAO - 数据库。环境准备上最容易翻车的点是 Tomcat 和 JDK 版本不匹配。Tomcat 9 需要 JDK 8 及以上Tomcat 10 之后把包名从 javax 换成了 jakarta很多老教程里的 import javax.servlet 会直接编译失败。如果你第一次用建议直接选 Tomcat 9 JDK 8教程多、坑少、教室机器也大概率兼容。关于 IDE我个人推荐 IntelliJ IDEA社区版就够用。Eclipse 也能做但配置 Tomcat 和 Maven 的步骤相对繁琐对新手不算友好。IDEA 里带一个比较方便的代码提示你可以更快看到哪些引包写错了、哪些类型不匹配。反正第一次做项目把更多精力留给业务别花在跟编辑器较劲上。2.3 如果你非要上 Spring Boot至少这样起步我不是反对 Spring Boot反而认为它是值得学习的方向。但第一次大作业时我带过的学生里凡是强行上框架的大多时间都花在理解SpringBootApplication扫描了什么、为什么包路径不对就 404、为什么 localhost:8080 访问不到静态资源上。等到环境问题解决完已经没有多少时间留给核心业务了。如果你确实想借大作业练一下 Spring Boot我给你一个最小可行路径创建一个空项目加 Web 依赖把 JSP 放在 src/main/webapp 下配置好前缀后缀先跑通一个 hello 页面再开始写业务。不要一上来就接 MyBatis Plus、Redis、JWT 那一堆东西第一次作业不需要也容易把你拖进泥潭。spring.mvc.view.prefix/WEB-INF/jsp/ spring.mvc.view.suffix.jsp这段配置先放进 application.properties然后写一个简单的 Controller 返回一个字符串看能不能对应到 JSP 页面。这步通了你才有信心继续往下写。如果连这个最小路径都跑了一天才通那就果断退回 Servlet JSP别丢人。3. 前端页面先把骨架做出来再考虑好看3.1 页面规划与导航设计不管题目是什么一个完整 web 前端基本都包含这些模块顶部导航、内容区、表单区、列表区。以健康饮食推荐系统为例我当时的页面规划是这样的首页展示推荐语和分类入口给一个热销菜品列表登录/注册页独立表单页提交到后端并保持会话状态菜品列表页从数据库读数据按分类筛选显示基础信息菜品详情页展示完整信息提供收藏按钮我的收藏页显示我收藏过的菜品支持取消收藏页面之间不要用一堆散落的链接乱跳最好顶部导航固定当前栏目高亮。这个细节很小但演示时一眼就能看出你有没有全局规划能力。实现起来也很简单把导航部分抽成一个公共片段让每个页面都 include 进来。我当时因为偷懒复制粘贴导航代码结果改一个链接要改三个页面后来才学会用 jsp:include 统一管理。jsp:include pageheader.jsp /header.jsp 里放着统一的导航和样式引用页面主体内容放在 include 之后。这样改一次导航所有页面同步生效。第一次做项目的人往往会忽略这种复用思维但“不要重复自己”在 web 开发里真的很重要它会让你的代码从第一周开始就保持整洁。3.2 样式与交互原生 CSS 起步表单校验做两层第一次做前端我建议不要上来就引 Bootstrap虽然页面会立刻漂亮很多但你很难解释每个 class 为什么生效。更合理的方式是先用原生 CSS 定好整体风格比如主色、字体、间距、卡片圆角再看是否需要组件库帮忙。你先手写过一遍按钮和卡片后面用框架时才知道它们到底帮你省了什么。举例来说一个按钮的 hover 效果原生 CSS 就是几行.btn-primary { background-color: #2d8cf0; color: #fff; padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; } .btn-primary:hover { background-color: #1f6fd0; }你亲手写过这类样式之后再去看组件库就会理解它生成的 class 到底在做什么。表单校验一定要做两层。前端用 JavaScript 做必填和格式提示比如用户名不能为空、邮箱格式要对后端用 Java 再做一次同样的校验。为什么后端还要做因为前端校验只对浏览器诚实别人跳过页面直接拼请求后端没有防护就会被写入脏数据。我见过同学大作业里只写了前端 alert后端什么都不查虽然老师不一定会抓包但这是习惯问题。你在第一次作业里养成“服务端永远不信任前端输入”的意识比多写一个页面有用得多。这也是理解 web 服务器安全的第一步。3.3 JSP 里那几个容易被忽略的细节JSP 页面有两点我特别想提。一是 head 区一定要设置页面编码否则中文全部变乱码二是表单提交方式GET 和 POST 的区别要分清查询列表可以用 GET改数据一律用 POST。我在第一次大作业时闹过一个笑话登录用 GET 提交结果密码直接在浏览器地址栏里显示出来了。虽然后端代码没错但演示时特别尴尬。从那以后我写接口都有意识地按语义选择请求方法这也是后面做企业级 web 开发时很基础但很重要的习惯。还有一个小细节是页面标题。很多同学把所有页面都命名为“首页”或“列表”演示起来没有层次。我给每个页面都写了不同的 title用户一眼能看出自己当前在哪个功能模块。这种细节不会单独给你加分但会让老师觉得你是认真做完了整套东西而不是零散拼凑。4. 后端与数据库把数据真正“跑”起来4.1 数据库建模与建表 SQL第一次做大作业数据库设计最容易犯的错就是随便建一张大表所有字段塞在一起。以健康饮食推荐系统为例我建了三张表user用户 id、用户名、密码、注册时间dish菜品 id、名称、分类、热量、食材、做法favorite收藏 id、用户 id、菜品 id、收藏时间收藏表为什么要单独建因为用户和菜品是多对多关系一个用户能收藏多道菜一道菜也能被多个用户收藏。用一张关联表存这两个 id是最清晰、扩展性最好的做法。这样后面写“推荐逻辑”也简单根据用户收藏过的菜品分类统计分类出现次数然后把出现次数最多的分类下其他菜品推荐出来。建表语句我当时的简化版是CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE dish ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, category VARCHAR(50) NOT NULL, calories INT DEFAULT 0, ingredients VARCHAR(500), description TEXT ); CREATE TABLE favorite ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, dish_id INT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES user(id), FOREIGN KEY (dish_id) REFERENCES dish(id) );密码千万不要明文存。第一次作业可以先用简单哈希比如 SHA-256等以后接触 Spring Security 再改成 BCrypt。这个细节老师如果细看表结构会很加分因为说明你考虑了最基本的账号安全。4.2 JDBC 连接与最易踩的坑JDBC 连接看起来简单实际坑很多。我把数据库地址、用户名、密码抽到一个 jdbc.properties 配置文件里代码中通过资源加载。连接字符串里统一加上characterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai这样中文乱码、SSL 警告、时区报错这三个问题会少很多。一个简单的工具类大概是这样的public class DBUtil { private static String url; private static String username; private static String password; static { try (InputStream in DBUtil.class.getClassLoader() .getResourceAsStream(jdbc.properties)) { Properties props new Properties(); props.load(in); Class.forName(com.mysql.cj.jdbc.Driver); url props.getProperty(jdbc.url); username props.getProperty(jdbc.username); password props.getProperty(jdbc.password); } catch (Exception e) { throw new ExceptionInInitializerError(e); } } public static Connection getConnection() throws SQLException { return DriverManager.getConnection(url, username, password); } }每次用完后连接、语句、结果集要在 finally 里关闭。我早期因为不关连接Tomcat 跑几天后连接数被耗尽整个应用卡死。当时我还以为是代码循环递归的问题排查了半天最后发现是连接泄漏。从那时起我就养成了“谁打开谁关闭”的习惯。如果你是手动 new 的数据库连接这句提醒能用得上。代码风格上顺便提一句不要在 DAO 里拼接 SQL 时直接塞用户输入否则很容易破坏 SQL 结构。用 PreparedStatement 的占位符是更安全的选择这也是一种基本功。我见过很多人图省事用字符串拼接最后查出来的数据总是对不上就是因为引号和特殊字符没处理好。4.3 Servlet 的职责划分与 Session 处理后端代码里我最想强调的一句是不要让一个 Servlet 什么都干。很多人喜欢写一个UserServlet里面用 if 判断 action 参数一会儿查用户一会儿存收藏最后这个类变成几百行的怪物。我当时的做法是每个功能模块一个 ServletLoginServlet 只处理登录FavoriteServlet 只管收藏。这样代码清晰出问题时定位也快。一个登录 Servlet 的骨架大概长这样WebServlet(/login) public class LoginServlet extends HttpServlet { Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding(UTF-8); String username req.getParameter(username); String password req.getParameter(password); User user userService.login(username, password); if (user ! null) { HttpSession session req.getSession(); session.setAttribute(userId, user.getId()); resp.sendRedirect(dishList); } else { req.setAttribute(error, 用户名或密码错误); req.getRequestDispatcher(login.jsp).forward(req, resp); } } }登录之后要记录会话状态用 HttpSession 即可。登录成功把用户 id 放进去后续页面判断 session 是否存在不存在就跳回登录页。这比每次请求都重新查一遍数据库效率要高也是 web 会话管理的基础逻辑。你也可以顺手做一个过滤器统一拦截未登录请求虽然代码量不多但会让项目结构更接近真实企业级开发的样子。5. 联调、演示与部署大作业的“最后一公里”5.1 本地跑通与局域网演示代码写得再完整最后跑不起来一切都等于零。提交前我强烈建议你把整个流程至少完整跑三遍第一次用一个新账号注册第二次用已有账号登录第三次操作新增和收藏再刷新页面确认数据还在。每次跑完都要看一眼 Tomcat 日志确认没有异常堆栈。如果需要在机房局域网里演示Tomcat 默认端口 8080 很容易冲突。可以打开 conf/server.xml找到 Connector 配置把 port 改成 8088 或其他不容易撞的端口改完重启 Tomcat。还要确认电脑防火墙允许这个端口被局域网访问。这不是什么高深操作但每年都有同学在演示当天因为端口被占或防火墙拦截而翻车。这里必须多说一句能跑起来和“安全地跑起来”是两回事。哪怕是大作业也别图方便把 Tomcat 管理后台的默认密码留着更不要把数据库密码写在页面源码里。如果你要开放给其他人访问至少要设置强密码、限制可访问端口。这是我在项目中反复向新人强调的一点web 服务器安全管理不是只有企业才需要从第一个项目开始就该有意识。5.2 可选的加分扩展PDF 打印、WebSocket、实时数据如果主流程已经稳定还想加点亮点我见过的低成本高收益方案有三个。第一个是“把内容导出成 PDF 打印”。最简单的方式是给详情页加一个打印按钮用浏览器自带的打印能力配合 CSS 的 media print 隐藏无关的导航和按钮只保留核心内容区。我当时的简化写法是media print { .navbar, .btn-print, .footer { display: none; } .content { width: 100%; } }比在后端生成 PDF 文件省事得多而且效果不差。很多管理后台都有这种“打印报表”的需求你在大作业里先做一次会很有手感。第二个是用 WebSocket 做一个简单的实时通知。比如有人收藏了菜品管理页面能立刻看到一条新记录。如果你用的是 Spring Boot可以通过 WebSocket 配置类注册一个端点再在 application.yml 里配置端点路径和相关参数。但如果你用的是原生 Servlet我建议不要自己造 WebSocket 轮子容易陷入底层细节影响主流程状态。第三个是在列表页加真实的数据筛选和排序。别小看这个很多同学做的是假筛选前端用 JS 过滤当前页数据一刷新就丢。真正把筛选条件拼进 SQL再刷新页面依然生效这才是可靠的交互。这三个方向都可以在主线完整后按兴趣选一个做不用全都上。6. 常见问题速查与避坑清单6.1 高频报错对照速查表为了让你提交前不慌我把第一次做 web 大作业最高频的一批问题整理成一张速查表你在验收前一天逐条对照检查。现象最可能原因解决思路页面中文乱码请求或响应编码没设置JSP 顶部设置 UTF-8Servlet 里对 request、response 都设置 characterEncoding数据库连不上MySQL 服务没启动或连接地址错误先用命令行客户端连接排除参数问题后再看代码404 找不到页面URL 与 Servlet 映射路径不一致核对注解或 web.xml 里的路径注意项目上下文路径500 报错Java 空指针或 SQL 语句异常打开 Tomcat 的 catalina 日志定位具体行号表单提交无反应表单控件没有 name或 action 地址错误打开浏览器 F12 的 Network 面板看看请求是否发出登录后刷新就掉线Session 有效期或浏览器 cookie 问题确认登录成功时 session 是否写入页面间是否沿用同一 session6.2 一个真实的 404 排查过程记录这里说一个我记忆很深的排查过程。有个同学写了一个注册功能浏览器请求地址是http://localhost:8088/myapp/register但是一直 404。他检查了 RegisterServlet 的注解是WebServlet(/register)看起来没问题项目也已经部署成功。后来我发现他的项目上下问路径不是默认值IDEA 里部署时设置的 Application context 是/myapp所以完整访问路径确实应该是/myapp/register。他直接访问/registerTomcat 找不到对应的 Servlet自然 404。解决方式很简单要么把 IDE 里的上下文路径改成/要么所有页面里的提交地址都带上/myapp前缀。这个坑在第一次做项目时特别常见因为你以为你访问的是/register实际 Tomcat 看到的是/myapp/register。这类问题用浏览器开发工具就能快速定位。点开 F12切到 Network看请求的完整 URL 和你预期差多少一眼就能看出来。很多人一遇到 404 就在代码里翻半天其实应该先确认“请求到底发到了哪里”。6.3 提交前的验收自检清单最后给你一份通用的检查清单我在每个项目提交前都会过一遍用无痕浏览器窗口走一遍注册流程确认新账号能登录。用错误密码登录一次确认不会跳到 500 页面。新增一条数据刷新页面确认数据依然存在。直接访问一个不存在的 URL确认返回的是合理提示而不是乱码堆栈。查看一遍 Tomcat 日志确认没有未捕获的异常。把所有页面点一遍确认没有多余的死链和未完成的按钮。这份清单看起来平平无奇但绝大多数第一次做的项目都有一两条过不了。我第一次大作业就是在第 4 条上翻的车访问一个不存在的路径Tomcat 返回一大段英文堆栈演示时被老师当场指出来那感觉真的不好受。我做这个项目时最深的体会是大作业给分往往不看你堆了多少技术亮点而是看你有没有把一个完整闭环做通、做稳。你第一次做完一个能注册、能登录、能操作数据、重新打开页面数据还在的 web 项目就算技术朴素也真正开始理解 web 开发了。剩下的 Spring Boot、前后端分离、微服务都是在这个闭环基础上长出来的东西。这套从需求拆解到部署演示的流程才是大作业真正留给你的资产。
阅读完成 · 觉得有帮助？
