本文还有配套的精品资源点击获取简介一套开箱即用的JavaWeb在线教育网站前端页面资源包含首页index.html、课程展示页show.html、用户登录与注册页、报告查看页reports.html等核心界面文件。所有页面采用标准HTML结构无框架依赖可直接集成到Servlet/JSP或Spring Boot后端项目中。配套图片素材齐全涵盖首页背景图homepage-bg.png、容器标题图container-title-2.png、启动引导按钮图bootcamp-start.png / bootcamp-start-click.png、教师形象图bootcamp-teacher.png、结业证书图bootcamp-certificate.png、评论模块图bootcamp-comment.png以及多张课程缩略图ncn1.jpg、ncn11.jpg、ncn23.jpg、ncn30.jpg。资源包目录清晰含img、fonts、bootcamp、courses等子文件夹支持快速部署教学演示、课程设计作业或轻量级原型开发。静态页面兼容主流浏览器无需额外构建步骤适合初学者理解前后端衔接逻辑。1. 这不是模板是能跑通的“教学级前端骨架”我带过六届JavaWeb课程设计每年都有学生卡在“前端页面怎么和Servlet连上”这个坎上。他们翻遍B站教程抄完代码一运行——404、空白页、CSS不生效、图片路径全错。最后交作业时首页勉强能看登录页表单提交后跳转到错误路径课程列表里图片全是红叉。问题不在Java代码而在于前端资源组织本身就不具备可集成性路径写死、结构混乱、命名随意、缺少上下文语义。这套前端页面集合就是我从真实教学场景里反复打磨出来的“最小可行前端骨架”。它不炫技不堆框架但每一张HTML、每一个img标签、每一处CSS类名都经过Servlet容器Tomcat 9和Spring Boot嵌入式Tomcat双环境实测。关键词里的JavaWeb、在线教育、前端页面、登录注册、课程展示不是标签而是五个必须被真实验证过的功能锚点。首页index.html能正确加载homepage-bg.png背景图show.html里的ncn1.jpg能通过相对路径被courses/目录下的Servlet定位login.html提交后能自然跳转到/login.do而非/login.jsp造成404reports.html中的bootcamp-certificate.png在部署到/edu/上下文路径下仍能显示。它解决的不是“怎么写HTML”而是“怎么让HTML在JavaWeb项目里真正活起来”。适合刚学完JSP基础、正要动手做课程设计的大三学生也适合需要快速搭建演示原型的助教——你不用改一行HTML只要把整个edu文件夹扔进你的Spring Boot项目的src/main/resources/static/或者复制到传统WebContent目录下就能立刻看到一个有血有肉的在线教育界面。这不是静态原型它是前后端衔接逻辑的实体化教材。2. 页面结构与资源组织为什么这样放比放哪里更重要2.1 目录结构不是随便排的是按Servlet容器加载逻辑设计的很多初学者解压资源包第一反应是“这目录怎么这么乱”点开一看有zaixianjiaoyupingtai、app、bootcamp、developer……其实这是刻意为之的“教学痕迹”。真正的生产环境会扁平化但教学环境必须暴露路径依赖的真实代价。我们来看核心目录edu/这是整个前端资源的根容器。它不是随便起的名字而是对应典型JavaWeb项目的上下文路径Context Path。比如你用Spring Boot默认打包成war部署到Tomcat访问地址是http://localhost:8080/edu/如果用传统Servlet项目web.xml里context-param配置的路径也常设为/edu。所有HTML页面的base href/edu/都指向这里确保内部链接绝对可靠。img/存放所有图片素材的统一入口。注意它不是images/或assets/img/而是最朴素的img/。因为img srcimg/homepage-bg.png在index.html中能直接解析无需额外配置。我试过把图片放在bootcamp/img/下结果show.html里引用bootcamp/img/ncn1.jpg一旦Servlet转发到show.jsp路径就变成/edu/bootcamp/show.jsp相对路径计算就失效了。所以img/必须是edu/下的直接子目录。courses/这个目录名直指业务模块。它里面没有HTML只有图片ncn1.jpg等但它的存在意义重大——它模拟了后端Servlet的映射路径。比如/courses/list这个URL对应的Servlet会返回show.html内容同时把课程图片路径拼成/img/courses/ncn1.jpg。所以courses/目录和img/courses/是镜像关系这是前后端约定的关键契约。bootcamp/专用于训练营Bootcamp模块的静态资源。里面的bootcamp-start.png和bootcamp-start-click.png是同一按钮的两种状态图用于JS实现hover效果。它们不放在img/下是因为业务隔离——训练营模块可能独立部署或未来用不同CDN域名。bootcamp/teacher.png和certificate.png同理属于高价值静态资产单独归档便于权限管理。提示.gitignore和.inscode文件的存在说明这个包曾被用于Git协作和某款IDE可能是IntelliJ IDEA的InsCode插件。它们不是冗余而是提醒你真实开发中前端资源也要纳入版本控制且需排除IDE生成的临时文件。别删掉它们这是工程规范的第一课。2.2 HTML页面的“无框架”设计哲学从语义到可维护性所有页面都是纯HTML5 CSS3 原生JavaScript零框架依赖。这不是为了复古而是教学刚需。学生要理解form action/login methodpost背后是Servlet的doPost()方法而不是Vue的submit.prevent。我们拆解index.html的关键设计header classsite-header不是div classheader。class名带site-前缀明确作用域避免与第三方组件冲突。header内部导航栏的a href/edu/courses/list课程中心/ahref值是完整上下文路径确保无论从哪个页面点击都能正确跳转。main classsite-main包裹所有主体内容。它用Flex布局实现响应式栅格但CSS写在style标签内而非外部文件——因为教学演示时学生需要一眼看到样式如何影响结构。比如.course-card { display: flex; flex-direction: column; }旁边紧跟着div classcourse-card所见即所得。footer classsite-footer版权信息里写的是© 2024 在线教育平台教学版而非© 2024 Company Inc.。这是刻意弱化商业感强化教学属性。footer里有一个隐藏的script块只做一件事检测当前页面是否在/edu/路径下如果不是自动重定向。这是防止学生把HTML直接双击打开导致图片路径失效的兜底方案。注意reports.html里的表格不是用Bootstrap的.table类而是手写.report-table { border-collapse: collapse; width: 100%; }。因为学生要学的是CSS盒模型和border属性而不是框架类名。表格每一行tr都有data-report-idr001这样的自定义属性为后续用原生JS绑定点击事件留接口——这是教DOM操作的天然案例。2.3 图片素材的命名与用途每一张图都在讲一个前端集成故事图片不是装饰品是前端与后端协同的信标。我们逐个解析图片文件名存放路径典型使用场景教学意义homepage-bg.pngimg/body { background: url(img/homepage-bg.png); }教会学生区分背景图CSS和内容图HTML img标签理解url()路径解析规则container-title-2.pngimg/img srcimg/container-title-2.png alt课程分类展示替代文本alt的重要性当图片加载失败时文字描述仍能传达信息bootcamp-start.png/bootcamp-start-click.pngbootcamp/buttonimg srcbootcamp/bootcamp-start.png>head base href/edu/ link relstylesheet hrefcss/style.css /head没有这行hrefcss/style.css会解析成http://localhost:8080/css/style.css而实际路径是http://localhost:8080/edu/css/style.css。我见过太多学生删掉base然后疯狂改CSS里的background-image路径最后发现是base没设对。base是JavaWeb前端的生命线。第二轮播图的数据驱动雏形首页有个课程轮播区HTML结构是div classcarousel div classcarousel-item active img srcimg/courses/ncn1.jpg altJava编程入门 div classcarousel-captionJava编程入门/div /div !-- 更多item -- /div看起来是静态的但carousel-item的active类名是留给后端注入的。在Spring Boot中你可以用Thymeleafdiv classcarousel-item th:classappend${status.first} ? active : img th:src{/img/courses/{id}.jpg(id${course.id})} th:alt${course.title} div classcarousel-caption th:text${course.title}/div /div教学版保留静态结构是为了让学生先理解DOM结构再叠加模板引擎。第三搜索框的表单动作设计form action/edu/search methodget input typetext namekeyword placeholder搜索课程... button typesubmit/button /formaction/edu/search是硬编码的上下文路径。后端必须有一个GetMapping(/search)的Controller接收keyword参数并返回show.html视图。这里故意不用AJAX因为初学者要先掌握HTTP GET请求的完整生命周期浏览器发请求→Servlet接收→业务处理→返回HTML→浏览器渲染。3.2 课程展示页show.html静态页面如何承载动态数据show.html是教学难点集中营。它必须既能当静态页面直接打开用于预览又能被Servlet当作视图模板用于数据填充。解决方案是“双重结构”结构层语义化HTML骨架main classcourse-list section classcourse-category h2热门课程/h2 div classcourse-grid idhot-courses !-- 动态插入区域 -- /div /section section classcourse-category h2新上线课程/h2 div classcourse-grid idnew-courses !-- 动态插入区域 -- /div /section /main数据层JSON模拟数据块教学用script idmock-data typeapplication/json { hotCourses: [ {id: c001, title: Java编程入门, img: ncn1.jpg, price: ¥199}, {id: c002, title: Spring Boot实战, img: ncn11.jpg, price: ¥299} ], newCourses: [ {id: c003, title: 前端工程化, img: ncn23.jpg, price: ¥249}, {id: c004, title: 数据库设计, img: ncn30.jpg, price: ¥179} ] } /script渲染层原生JS模板引擎document.addEventListener(DOMContentLoaded, () { const mockData JSON.parse(document.getElementById(mock-data).textContent); // 渲染热门课程 const hotContainer document.getElementById(hot-courses); mockData.hotCourses.forEach(course { const card document.createElement(div); card.className course-card; card.innerHTML img srcimg/courses/${course.img} alt${course.title} h3${course.title}/h3 p classprice${course.price}/p a href/edu/course/detail?id${course.id} classbtn查看详情/a ; hotContainer.appendChild(card); }); });这个设计教会学生三件事1HTML是结构JS是行为JSON是数据三者分离2href/edu/course/detail?id${course.id}里的路径必须与后端GetMapping(/course/detail)完全匹配3图片路径img/courses/${course.img}是硬编码的因为教学版不引入构建工具所有路径必须人工保证一致性。3.3 登录注册页表单验证与后端路由的精确咬合login.html和register.html共享一套表单验证逻辑这是教学重点。我们以login.html为例表单结构与后端契约form idlogin-form action/edu/login methodpost div classform-group label forusername用户名/label input typetext idusername nameusername required /div div classform-group label forpassword密码/label input typepassword idpassword namepassword required /div button typesubmit登录/button /form注意nameusername和namepassword——这决定了Servlet中request.getParameter(username)能否取到值。很多学生写成nameuser后端却用getParameter(username)结果永远取不到。客户端验证的边界document.getElementById(login-form).addEventListener(submit, function(e) { const username document.getElementById(username).value.trim(); const password document.getElementById(password).value; if (!username || username.length 3) { alert(用户名至少3位); e.preventDefault(); return; } if (password.length 6) { alert(密码至少6位); e.preventDefault(); return; } });这里只做基础验证绝不做密码强度校验如大小写字母数字。因为教学目标是理解前后端分工前端防误操作后端防恶意攻击。密码加密、账号锁定等必须由Servlet完成。错误提示的优雅降级当登录失败时后端Servlet会重定向回/edu/login?error1login.html用以下逻辑显示错误% if (request.getParameter(error) ! null) { % div classalert alert-error用户名或密码错误/div % } %教学版保留了JSP片段注释掉但实际运行时用纯HTMLJS模拟if (window.location.search.includes(error1)) { ... }。这是为了让学生看到“错误状态如何从后端传递到前端”的完整链条。3.4 报告查看页reports.html静态表格的动态灵魂reports.html展示学习报告核心是表格。但教学版的表格有“活”的设计语义化表格结构table classreport-table thead tr th scopecol课程名称/th th scopecol完成进度/th th scopecol最后学习时间/th th scopecol操作/th /tr /thead tbody idreport-body !-- 数据将被JS注入 -- /tbody /tablescopecol告诉屏幕阅读器这是列标题idreport-body是JS操作入口。没有用tbody包裹静态数据因为教学目标是让学生学会动态渲染。数据注入与交互// 模拟从后端获取的JSON数据 const reportData [ { course: Java编程入门, progress: 85%, lastTime: 2024-03-15 14:30, id: r001 }, { course: Spring Boot实战, progress: 42%, lastTime: 2024-03-14 09:15, id: r002 } ]; reportData.forEach(item { const row document.createElement(tr); row.innerHTML td${item.course}/td tddiv classprogress-bardiv classprogress-fill stylewidth:${item.progress}/div/div/td td${item.lastTime}/td tda href/edu/report/detail?id${item.id} classbtn-sm查看详情/a/td ; document.getElementById(report-body).appendChild(row); });这里href/edu/report/detail?id${item.id}再次强调路径契约。.progress-bar的CSS是.progress-bar { height: 8px; background: #e0e0e0; border-radius: 4px; } .progress-fill { height: 100%; background: #4CAF50; border-radius: 4px; }用纯CSS实现进度条不依赖任何UI库——因为学生要理解height、background、border-radius如何组合出视觉效果。4. 实操部署与常见问题排查从本地测试到Tomcat上线4.1 本地双模式测试Chrome直接打开 vs Tomcat部署教学中最常见的误区是学生只在Chrome里双击打开HTML看到页面正常就以为成功了。实际上这是“假成功”。我们必须进行两种测试模式一Chrome直接打开file://协议- 优点秒开适合检查HTML/CSS基础渲染- 缺点img srcimg/homepage-bg.png会变成file:///.../img/homepage-bg.png但浏览器安全策略可能阻止本地图片加载尤其Chrome- 解决方案用Live Server插件VS Code启动本地HTTP服务地址变为http://127.0.0.1:5500/edu/index.html此时路径解析与Tomcat一致模式二Tomcat部署http://localhost:8080/edu/- 步骤将edu/文件夹复制到Tomcat的webapps/目录 → 启动Tomcat → 访问http://localhost:8080/edu/- 关键检查点1. 浏览器开发者工具Network标签页看所有资源HTML、CSS、JS、图片状态码是否为2002. 点击“课程中心”链接地址栏是否变为http://localhost:8080/edu/courses/list3. 查看Console确认无404错误如GET http://localhost:8080/edu/css/style.css net::ERR_ABORTED提示如果图片显示红叉右键“检查元素”看img标签的src属性值再对比Network里实际请求的URL。90%的问题是路径少写了/edu/前缀。4.2 Spring Boot集成static目录下的静默魔法Spring Boot项目集成最简单但也最容易踩坑。步骤如下将整个edu/文件夹含所有子目录复制到src/main/resources/static/确保application.properties中没有禁用静态资源properties # 必须存在且不能设为false spring.web.resources.static-locationsclasspath:/static/,classpath:/public/,classpath:/resources/启动应用访问http://localhost:8080/edu/index.html为什么是/edu/因为Spring Boot默认将static/目录映射为根路径/所以static/edu/index.html对应URL是/edu/index.html。如果你把文件直接放static/下即static/index.html访问地址就是/index.html但这时所有相对路径img/xxx.png会解析成/img/xxx.png而图片实际在/edu/img/xxx.png必然404。所以必须保留edu/目录层级。4.3 常见问题速查表与独家避坑技巧问题现象可能原因排查命令/操作我的独家技巧首页背景图不显示Console报404background: url(img/homepage-bg.png)路径错误在Network标签页过滤homepage-bg.png看请求URL技巧把CSS里的url()路径改成绝对路径url(/edu/img/homepage-bg.png)再测试。如果好了说明是相对路径解析问题点击“登录”按钮无反应表单action路径与后端Servlet映射不匹配在浏览器地址栏输入http://localhost:8080/edu/login看是否返回404技巧在Servlet的doPost()方法第一行加System.out.println(Login POST received);重启Tomcat再提交表单看控制台是否有输出课程图片全部红叉img/courses/ncn1.jpg路径在Tomcat中不存在进入Tomcat的webapps/edu/目录用ls -R查看文件结构技巧在webapps/edu/目录下执行find . -name ncn1.jpg确认文件真实位置。教学包里ncn1.jpg在img/courses/下但学生可能误放到courses/根目录页面中文乱码口口口Tomcat默认编码不是UTF-8在conf/server.xml中找到Connector标签添加URIEncodingUTF-8技巧在HTML的head里加meta charsetUTF-8这是前端兜底方案。两个地方都设万无一失CSS样式不生效浏览器缓存了旧CSS按CtrlF5强制刷新或在Network标签页禁用缓存技巧给CSS链接加版本号link relstylesheet hrefcss/style.css?v1.0每次修改CSS就改v值彻底绕过缓存一个血泪教训分享去年有学生做课程设计首页能打开但登录后跳转到/login.jsp出现404。查了半小时发现他把login.html重命名为login.jsp但Tomcat里没有配置JSP Servlet默认开启但可能被关闭。最终解决方案是永远不要重命名HTML文件为JSP除非你明确知道JSP编译原理。教学版所有页面都是.html后端用RequestDispatcher转发这才是初学者该走的正道。5. 扩展与定制指南从教学骨架到真实项目5.1 如何添加新页面遵循“三步契约法”想增加“个人中心”页面别直接建profile.html按以下步骤第一步创建HTML文件在edu/目录下新建profile.html结构必须包含!DOCTYPE html html langzh-CN head base href/edu/ meta charsetUTF-8 title个人中心 - 在线教育平台/title link relstylesheet hrefcss/style.css /head body header classsite-header.../header main classsite-main h1个人中心/h1 !-- 你的内容 -- /main footer classsite-footer.../footer /body /html第二步添加导航链接在index.html的导航栏里加lia href/edu/profile.html个人中心/a/li第三步配置后端路由如果是Spring Boot在Controller里加GetMapping(/profile) public String profilePage() { return forward:/profile.html; // 注意不是profile.html而是/profile.html }如果是传统Servlet在web.xml里配servlet-mapping servlet-namedefault/servlet-name url-pattern/profile.html/url-pattern /servlet-mapping这就是“三步契约”前端文件存在 → 前端链接可达 → 后端路由可访问。缺一不可。5.2 图片素材替换指南尺寸、格式与命名规范替换ncn1.jpg这类课程图必须遵守三个铁律尺寸铁律所有课程缩略图必须是320×180px16:9比例。我在Photoshop里做了个动作Action一键批量调整选中所有图片 → Image → Image Size → 宽320像素约束比例 → Save for Web → JPEG质量80%。为什么是320×180因为course-card的CSS设了max-width: 320px图片过大拉伸失真过小留白难看。格式铁律只用JPEG或PNG。homepage-bg.png用PNG因为需要透明边缘ncn1.jpg用JPEG因为照片压缩率高。千万别用WebP——Tomcat 9默认不支持WebP MIME类型会返回404。命名铁律新图片必须沿用ncn{数字}.jpg格式且数字连续。比如你新增第5门课文件名必须是ncn5.jpg不能叫java-course.jpg。因为show.html的JS里写死了ncn${i}.jpg的拼接逻辑。教学版的灵活性建立在约定俗成的命名纪律之上。5.3 前端增强建议零成本提升体验的3个技巧不需要学Vue用原生JS就能做技巧一表单输入实时验证在login.html的用户名输入框加document.getElementById(username).addEventListener(input, function() { const username this.value; const helpText document.querySelector(.username-help); if (username.length 3 username.length 20) { helpText.textContent ✓ 用户名可用; helpText.style.color #4CAF50; } else { helpText.textContent 用户名3-20位; helpText.style.color #f44336; } });配合HTML里加small classusername-help/small体验立升。技巧二图片懒加载教学版兼容写法把所有img src...换成img>document.addEventListener(DOMContentLoaded, () { const lazyImages document.querySelectorAll(.lazy-load); const imageObserver new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { const img entry.target; img.src img.dataset.src; img.classList.remove(lazy-load); imageObserver.unobserve(img); } }); }); lazyImages.forEach(img imageObserver.observe(img)); });这是现代浏览器原生API比第三方库更轻量且教学意义强——教观察者模式的实际应用。技巧三404页面友好化在edu/目录下新建404.html!DOCTYPE html html headtitle页面找不到了/title/head body styletext-align:center;padding:100px; h1 404 Not Found/h1 p您访问的页面不存在/p a href/edu/index.html classbtn返回首页/a /body /html然后在Tomcat的conf/web.xml里配置error-page error-code404/error-code location/404.html/location /error-page一个友好的404页能让调试过程少一半焦虑。我在实际教学中发现学生最需要的不是炫酷特效而是“确定性”——确定点击能跳转、确定图片能显示、确定表单能提交。这套前端页面集合就是用最朴素的HTML/CSS/JS构建出这种确定性。它不教你框架但教会你框架背后的底层逻辑。当你把edu/文件夹拖进自己的项目看到首页背景图稳稳铺满课程卡片整齐排列登录按钮点击后跳转到正确页面——那一刻你就真正理解了JavaWeb前端集成的全部秘密。本文还有配套的精品资源点击获取简介一套开箱即用的JavaWeb在线教育网站前端页面资源包含首页index.html、课程展示页show.html、用户登录与注册页、报告查看页reports.html等核心界面文件。所有页面采用标准HTML结构无框架依赖可直接集成到Servlet/JSP或Spring Boot后端项目中。配套图片素材齐全涵盖首页背景图homepage-bg.png、容器标题图container-title-2.png、启动引导按钮图bootcamp-start.png / bootcamp-start-click.png、教师形象图bootcamp-teacher.png、结业证书图bootcamp-certificate.png、评论模块图bootcamp-comment.png以及多张课程缩略图ncn1.jpg、ncn11.jpg、ncn23.jpg、ncn30.jpg。资源包目录清晰含img、fonts、bootcamp、courses等子文件夹支持快速部署教学演示、课程设计作业或轻量级原型开发。静态页面兼容主流浏览器无需额外构建步骤适合初学者理解前后端衔接逻辑。本文还有配套的精品资源点击获取