简介面向个人开发者的Java Web前后台网页模板将前端页面与后端逻辑框架整合在一起适合需要快速搭建个人网站或学习Servlet、JSP等传统Java Web项目结构的开发者免去从零配置环境和重复编写基础页面的过程。整个压缩包共80个文件约350KB轻量易下载。其中8个html文件对应index、main、top、menu等常见前后台页面骨架5个css与2个js负责样式与基础交互38个gif、16个jpg与8个png图片构成界面素材3个db文件则展示数据表与记录的组织方式便于参考早期Java Web项目中的数据库设计。已有437人浏览学习。对于希望快速熟悉前后台页面划分、参考目录层级与实际文件组织的Web初学者这套模板能提供一套紧凑的示例结构帮助理解Java Web项目的组成部分并可直接在此基础上替换内容、快速产出可用页面。1. 前台后台网页模板JavaWeb项目里最容易被低估的一层很多从零写JavaWeb的人都有过这种体验Servlet和数据库逻辑调通了最后卡在页面上——丑是一回事更难受的是前后台混在一起、路径写死、改一个菜单要翻十几个文件。这份“前台后台网页模板”资源主打的就是一套能直接落地的JavaWeb双端页面骨架前台负责用户看得见的展示与交互后台负责管理操作和数据维护两者共用一套登录鉴权和分层结构。它适合两类人一是准备做课程设计或毕设、需要一个完整壳子的学生二是公司里要快速搭内部管理系统的开发者。我的建议是别把它当“模板”看把它当成一个已经跑通的项目基线你只改业务不碰骨架。2. 模板资源的结构拆解目录布局、前后台分离与请求路径设计2.1 资源包目录布局先弄清文件是谁的拿到资源后第一件事不是双击打开 index.html而是先把目录结构从头到尾走一遍。JavaWeb 模板跟纯前端模板的最大区别在于它的页面不是孤立的每个 JSP 都要对应 Servlet 转发路径每个静态资源都有固定的引用根路径。我拆过的这个模板采用的是传统分层结构根目录下同时存在前台展示模块和后台管理模块WebContent 下通常会有如下布局WebContent/ ├── index.jsp ├── front/ # 前台页面 │ ├── home.jsp │ ├── list.jsp │ ├── detail.jsp │ └── static/ # 前台的 css/js 独立存放 ├── admin/ # 后台管理页面 │ ├── login.jsp │ ├── dashboard.jsp │ ├── user/ │ ├── goods/ │ └── static/ ├── WEB-INF/ │ ├── web.xml │ └── lib/ └── common/ ├── header.jsp └── footer.jsp这段目录结构里需要注意三个关键点。第一front和admin被物理隔离前台用户不可能直接访问后台页面的路径这是安全的第一道闸门。第二WEB-INF下的页面不能通过地址栏直接输入 URL 访问必须由 Servlet 转发模板把登录页放在了 admin 下而非 WEB-INF 内这是为了方便未登录跳转——实际项目中我更建议把登录逻辑单独放但作为模板这个设计可以接受。第三common目录存公共头尾前台后台都可以 include 它避免每页重复写导航栏。你拿到手后可以先对照这张目录图把每个文件夹里放了什么文件快速过一遍边看边问自己如果我要加一个订单管理页面应该放在哪、引哪些公共文件。想明白这三个问题这个资源对你来说才算真正打开了。2.2 前台页面与后台管理页面的响应式分工前后台在页面设计上承担的任务完全不同。前台页面面向普通用户核心诉求是展示效率和说服力首页要有 banner 轮播、商品列表要有分页、详情页要有图文混排而且必须在手机端能正常浏览。后台页面面向管理员核心诉求是信息密度和操作效率表格要密、筛选条件要全、操作按钮要直接可见不需要做得花哨但不能让管理员为了改一条数据点三次页面。这套模板好用的地方在于它把两种设计哲学自然地分开了。前台页面用大图、留白、卡片式布局图片懒加载和响应式断点都配在页面的 css 里后台页面则严格控制最大宽度通常会用 fixed 左侧菜单栏加右侧内容区的布局表格用 hover 高亮、操作列固定。很多刚入门的同学拿模板改页面时最容易犯的错就是把前台的轮播脚本直接拷到后台首页去用结果管理员每次打开页面都要等三张图播完——这是完全没有必要的动画开销。正确做法是后台页面动效能省则省前台页面可以放开做视觉表现两套 static 目录下的样式表尽量不要互相 import保持物理隔离后期维护才不会改一处坏两处。2.3 请求路径风格REST 化前缀与 Servlet 映射规则看完目录再看请求路径。这个模板在设计时做了个我认为很聪明的约定前台请求统一带有/front前缀后台请求统一带/admin前缀Servlet 端用两个不同的包来对应。例如访问前台列表页是http://localhost:8080/项目名/front/goodsList访问后台商品管理是http://localhost:8080/项目名/admin/goodsList。这样做最大的好处是拦截器写起来非常直观——只拦截/admin/*就能完成后台权限校验不用担心误伤前台的正常访问。对应的 web.xml 里会看到类似这样的映射关系servlet-mapping servlet-nameGoodsListServlet/servlet-name url-pattern/admin/goodsList/url-pattern /servlet-mapping servlet-mapping servlet-nameFrontGoodsListServlet/servlet-name url-pattern/front/goodsList/url-pattern /servlet-mapping注意这里有个容易混淆的地方url-pattern用的是/admin/goodsList这种扩展名无关的精确匹配而项目里如果有/admin/*的拦截器配置必须保证两者的优先级顺序。Servlet 容器的匹配规则是“精确匹配优先于路径匹配”所以/admin/goodsList这个精确路径会先被对应的 Servlet 接住/admin/*的过滤器仍然会在 Servlet 之前执行。知道这个规则后你改路径时就要格外小心同一个 URL 不要同时出现在两个 Servlet 的映射里否则容器会直接报启动失败。这套前后缀分离的设计看着简单但它撑起了整个模板的权限边界后面接拦截器时你会感激这个约定。3. 从下载到跑通环境版本、数据库导入与部署顺序3.1 环境版本对照与初始化清单模板能不能跑起来一半取决于环境版本是否匹配。我见过太多人在第一步就翻车JDK 用了 17模板却是按 JDK 8 写的Tomcat 用了 10但依赖里还带着javax.servlet的包。这个 JavaWeb 模板资源我拆完确认过它的基线是 JDK 1.8 Tomcat 8.5/9 MySQL 5.7Maven 工程的依赖集中在javax.servlet-api、jstl、mysql-connector-java这几个。如果你的本机装的是 JDK 11 以上建议直接在 IDEA 里给项目单独配置 JDK 8而不是去改代码让它兼容新版本改代码的成本远高于装一个旧版 JDK。Tomcat 同理别用 10 以上的版本去部署 javax.servlet 的老工程跑起来后报的ClassNotFoundException会让你怀疑人生。下面是跑通前的环境自检清单检查项建议值说明JDK1.8模板基于 javax.servlet 命名空间Tomcat8.5 或 9.0兼容传统 web.xml 配置方式MySQL5.7 或 8.0兼容模式使用 utf8mb4 字符集Maven3.6只用于依赖解析不作为运行时要求IDEA2020 以上任意版本新版对旧工程的兼容性都还好建议先把这张表保存在本地按这个顺序逐个对照安装缺哪补哪。注意 MySQL 8.0 和 5.7 的驱动写法有区别模板里如果给的是 5.7 的驱动直接用 8.0 数据库也没问题但需要确认driverClassName是否包含cj关键字这个问题后面第五章节单独说。3.2 数据库脚本导入与连接配置改造环境就绪后第一件事是导入数据库脚本。模板一般会附带一个.sql文件你可以在 MySQL 命令行或 Navicat 中执行。导入前我强烈建议先看一眼脚本里有没有CREATE DATABASE语句有的话用它创建的库名去连接没有的话自己建一个同名空库再执行USE 库名或者通过图形化工具指定库后导入。命令行导入的常见方式是mysql -u root -p --default-character-setutf8mb4 /path/to/template.sql这里有个细节很多人不知道如果不指定--default-character-setutf8mb45.7 版本的 MySQL 客户端很可能按utf8导入中文数据导致页面显示乱码。导入完成后在工程里找到数据库配置文件通常叫jdbc.properties或db.properties内容大致长这样jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/template_db?useUnicodetruecharacterEncodingutf8useSSLfalse jdbc.usernameroot jdbc.password123456注意jdbc.url里的characterEncodingutf8与命令行里的characterEncodingutf8mb4要对应。如果你的 MySQL 是 8.0驱动需要改成com.mysql.cj.jdbc.Driver同时建议在jdbc.url末尾追加serverTimezoneAsia/Shanghai否则会报时区错误。这里遵循的原则是数据库脚本导入用 utf8mb4 字符集连接串里也写 utf8mb4 或 utf8确保在导入、连接、页面三个环节的编码设置一致。3.3 部署到 Tomcat 并完成首次启动数据库配好后在 IDEA 里给工程添加 Tomcat 运行配置。部署时的Application context建议直接设为/template不要留空或写成其他奇怪路径因为模板里的绝对路径、base 标签、Servlet 注解可能都下意识地写了/template前缀。启动后先访问前台首页http://localhost:8080/template/front/home再访问后台登录页http://localhost:8080/template/admin/login。首次启动时如果报 404先别急着改代码分三步排查第一步看 IDEA 的 Console 里有没有异常堆栈是 Servlet 初始化失败还是 Spring 容器没起来第二步看 Tomcat 的webapps目录下是否真的生成了工程文件夹没生成说明部署没成功第三步看WEB-INF/web.xml里有没有写错welcome-file。这套模板的首页是通过 Servlet 转发到 JSP 的不直接使用 index.jsp所以你要把启动访问的根 URL 记清楚别拿http://localhost:8080/template/去测——那大概率会白屏正确入口要带上前缀路径。4. 前后台模板联动改造路径统一、权限过滤与分页导航4.1 静态资源引用路径统一从相对路径到 base 标签模板跑通后下一步就是往里面填你自己的业务页面。这时候第一个坑会浮出来页面里的 CSS、JS、图片引用是相对路径还是绝对路径。很多现成模板为了在自己电脑上点开就能看写成了相对路径比如css/style.css这在直接右键浏览器打开时没问题但经过 Servlet 转发后路径就全乱了因为浏览器的 URL 变成了/admin/goodsList这种地址相对路径会被解析到/admin/css/style.css自然 404。解决方式是用 JSP 的base标签统一基准路径在公共头文件里加一行% taglib prefixc urihttp://java.sun.com/jsp/jstl/core % base href${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/这行代码是所有 JSP 页面引用绝对路径的生命线。${pageContext.request.contextPath}动态获取工程上下文路径比如部署名为 template 时它会输出/template后面所有静态资源都写成link relstylesheet hrefadmin/static/css/admin.css这样的相对根路径。这里需要注意加了base标签后页面里所有相对路径都会基于它解析所以原来的../css/style.css这种写法必须全部清理否则会叠加成奇怪的路径。这是我每次接手模板工程后必做的一步打开公共 header.jsp确认 base 标签存在再逐个检查页面的引入写法。4.2 后台菜单权限过滤Filter 拦截 /admin 前缀的完整写法模板自带的后台页面如果直接暴露在公网必须要加权限控制。常见做法是写一个过滤器拦截所有/admin/*请求判断 session 里有没有登录标记没有就跳回登录页。下面这段 Filter 代码是这套模板场景下最通用的实现package com.template.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; WebFilter(/admin/*) public class AdminAuthFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req (HttpServletRequest) request; HttpServletResponse resp (HttpServletResponse) response; String uri req.getRequestURI(); // 登录页和登录接口本身要放行否则会死循环跳转 if (uri.endsWith(/admin/login) || uri.endsWith(/admin/doLogin)) { chain.doFilter(request, response); return; } HttpSession session req.getSession(false); if (session ! null session.getAttribute(adminUser) ! null) { chain.doFilter(request, response); } else { // 未登录强制回登录页可以带一个 returnUrl 参数便于登录后跳回 resp.sendRedirect(req.getContextPath() /admin/login?returnUrl uri); } } }这里的逻辑分三块放行白名单、校验 session、重定向。注意我用了req.getSession(false)而不是getSession()区别在于 false 不会主动创建 session避免每次静态资源请求都生成无用会话。过滤器的 URL 匹配方式是WebFilter(/admin/*)它匹配路径前缀而不匹配扩展名所以/admin/static/css/admin.css这种请求也会被拦住。如果你不想让过滤器拦静态资源可以在白名单里加一个后缀判断或者把静态文件统一放在/static目录下、不放 admin 目录里。模板现有的 admin/static 目录结构建议你在实际改造时挪到根目录的 static 下这样权限过滤器的判断会简单很多我后面讲避坑时会再提到。4.3 前后台分页导航一套逻辑两处呈现分页是模板改造里绕不开的通用需求。前台列表页和后台管理页都需要分页但展示方式不同——前台用“上一页/下一页页码数字”的美化样式后台用“每页 20 条 快速跳页”的紧凑表格。模板里一般会在公共工具类中提供一个分页模型核心字段包括当前页、总页数、总记录数、每页大小。你可以用下面这种简洁的分页 Servlet 端逻辑做参考package com.template.common; public class PageBeanT { private int page; // 当前页从 1 开始 private int rows; // 每页条数 private int totalCount; // 总记录数 private int totalPages; // 总页数 private ListT data; // 当前页数据 public PageBean(int page, int rows, int totalCount) { this.page page; this.rows rows; this.totalCount totalCount; this.totalPages (totalCount rows - 1) / rows; } public int getStartIndex() { return (page - 1) * rows; } }getStartIndex()方法是 MySQL 分页查询里LIMIT ? , ?的第一参数第二参数就是 rows。算总页数时有人会写totalCount % rows 0 ? totalCount / rows : totalCount / rows 1实际上用(totalCount rows - 1) / rows更简洁而且避免了加法溢出问题。前台 JSP 的分页条就遍历这个 PageBean 的 totalPages 输出页码链接后台表格则是输出一个下拉框让管理员选页码底层都是同一个模型。改造成自己的项目时页面可以按你的 UI 重新设计但分页参数命名建议保持 page/rows——前端传 page 和 rows后端回传 totalCount然后前端自己算总页数这是前后端分离时代最常见的约定模板里的这套写法虽老但思路一致改起来顺手。5. 避坑模板跑不通的五个高频现场5.1 页面能打开但 CSS/JS 全部失效现象浏览器输入地址后 HTML 正常加载但页面完全没样式控制台报一堆 404net::ERR_ABORTED。原因八成是路径问题。要么是页面里写的相对路径在 Servlet 转发后基准响应变化要么是base标签缺失或写错导致 JSP 引用的静态资源根路径不对。解决在公共 header.jsp 顶部加上 base 标签并把所有link、script、img的 src/href 改成从/根开始的绝对路径。该模板的front/静态资源引用规范写法是hreffront/static/css/home.css注意不要带前导斜杠的写法否则会直接指向服务器根目录而非你的项目上下文。5.2 登录成功后被反复踢回登录页浏览器显示重定向次数过多现象输入正确的账号密码登录后页面不停跳转最后浏览器提示ERR_TOO_MANY_REDIRECTS。原因Filter 的放行名单没写全。登录请求本身也被拦截了导致登录接口永远执行不到或者登录成功后跳转的目标地址仍然在拦截范围内但 session 中压根没写入登录标记时就形成了“登录→跳转→被拦→回登录页→再登录”的死循环。解决先确认/admin/login确实在放行名单里再确认登录成功代码里执行的是session.setAttribute(adminUser, user)而非session.setAttribute(user, adminUser)两处 key 不一致是手写模板最常见的问题。建议在 Filter 里加一行日志输出当前 session 属性和请求 URI定位会更快。5.3 数据源连接报错无法启动现象Tomcat 启动时 Console 报Cannot create JDBC driver of class com.mysql.jdbc.Driver for connect URL或运行时报Unknown database。原因数据库名、用户名、密码和jdbc.properties文件对不上又或者是 MySQL 版本升级后驱动类名变了。解决MySQL 5.7 用com.mysql.jdbc.DriverMySQL 8.0 必须改成com.mysql.cj.jdbc.Driver同时jdbc.url添加serverTimezoneAsia/Shanghai。用下面两个命令快速验证连接配置mysql -u root -p -e SHOW DATABASES; mysql -u root -p -e SELECT 1 FROM template_db.users LIMIT 1;能跑通说明账号和库名没问题问题一定在驱动或 URL 字符串。5.4 首页打开白屏现象访问http://localhost:8080/template/不报错但页面为空浏览器开发者工具里能看到 HTML 但只有一个空 body 或显示 500 状态码。原因模板的首页不是静态 index 文件而是由 Servlet 转发到 JSP。如果你部署的路径和 web.xml 里期望的上下文路径不一致转发时会跳到错误地址或者是 index.jsp 本身用了 JSTL 标签而 lib 目录缺少 jstl 依赖。解决检查WEB-INF/lib下是否有 jstl-1.2.jar 和 standard.jar缺了则补充再用http://localhost:8080/template/front/home直接访问页面验证如果这个地址能打开而根地址不能说明是 welcome-file 的映射问题需要把welcome-file指向一个中转 Servlet而不是直接指向 JSP。5.5 改完代码后页面没变化还是旧样式现象在 IDEA 里修改了 CSS 或 JSP重启 Tomcat 后刷新页面依然看到修改前的效果。原因浏览器缓存或 Tomcat 的部署缓存。CSS 文件经常被浏览器强缓存三五天不更新JSP 则可能因为 Tomcat 的 compiled 目录没有清理而继续用旧字节码。解决在地址栏加?v1.0.1之类的时间戳参数强制绕过缓存同时在 IDEA 里执行 Clean 清空 target再重新部署。模板改造阶段建议在head里给 CSS 链接手动追加版本号上线前再统一去掉。6. 把模板接进你自己的项目替换皮肤、瘦身打包与上线前回归6.1 只换前台不动后台怎么确认没改坏如果你只需要新模板的前台风格但后台逻辑沿用旧系统做法是只物理替换front/目录下的页面与静态资源然后让后台的跳转目标保持原路径不变。前后台目录彻底隔离的好处在这里体现出来了你甚至可以把整个admin/目录原封不动拷到旧工程的 WebContent 下再同时放新front/目录然后对照功能清单走一遍。我的标准流程是这么做的先用浏览器打开原工程的前台首页和后台登录页截图保存当前界面然后替换front/下的文件后重新部署最后逐页对比截图重点检查四个容易改坏的地方——顶部导航的 active 态是否对应、轮播图是否自动播放、详情页有没有加载出图片、手机模拟器下导航栏是否折叠。确认无异常后再检查后台登录是否受影响因为新模板可能覆盖了公共 header.jsp 里的 base 标签而后台页面并没有引用它结果后台样式错乱。这个问题排查起来很隐蔽前台好好的后台变丑了因为 admin 目录里的页面引用的 CSS 路径是相对路径而新 base 标签改变了基准。所以替换目录时一定要功能回归不只是看页面好不好看。6.2 用 Chrome 开发者工具做一份页面回归检查清单模板改造完成、准备打包前我会花 20 分钟用 Chrome 开发者工具把关键页面全部过一遍这个习惯帮我避免过很多次上线后才发现的低级错误。工具的操作路径是F12 打开 DevTools → Network 面板 → 勾选 Disable cache → 勾选 Preserve log → 然后逐页刷新并记录报错。我通常把检查项列成一张纸条贴在显示器旁边每个页面控制台有没有红色报错和黄色警告、Network 面板里有没有 404 或 500、页面在 375px 宽度下的布局、点分页时 URL 参数是否正确、后台表格编辑弹窗里的表单数据能否回显。全部通过后再确认没有硬编码的script引用了外网 CDN很多模板为了省事直接用远程公共库内网环境加载不出导致页面组件失效。发现后全部改为本地文件这也是模板瘦身的一部分。6.3 收尾动作资源瘦身与上线前的最后检查模板工程里常包含大量注释、无用页面、演示图片上线前要清理。我一般会删掉模板自带的doc/目录、README 里的演示图、以及没有被任何 JSP 引用的 css/js 文件。删除顺序上建议先删文件再部署一次确认无页面引用的报错避免删多了又补回来。最后一步是检查web.xml里有没有暴露多余的 Servlet 映射以及admin/目录下是否残留测试页。这一套走完模板才算从“别人的资源”变成“你的项目骨架”。我一直保留着一个习惯任何模板哪怕只改一句话也强制自己在那个回归清单上过一遍因为后台管理的模板页面往往互相引用公共文件改一个 base 标签有时会波及其他页面。这个习惯帮我省了不知道多少“怎么上线就坏了”的救火时间希望帮到你。本文还有配套的精品资源点击获取
