简介这份JavaWeb项目源码以典型的分页打印功能为核心面向正在学习JSP/Servlet及数据库操作的开发者解决从数据库读取记录并以表格展示、分页浏览和打印输出等问题同时附带根据当前数据生成二维码的功能。资源共32个文件包含Java源文件与编译后的class文件、JSP页面、XML配置、前端JS与CSS以及所需jar包等压缩包仅3.41MB结构清晰便于导入对比学习。已有4807人学习下载适合课程设计或毕业设计参考。通过该项目可掌握JDBC连接数据库、ResultSet数据遍历、表格化渲染、分页参数处理、JavaScript打印调用及二维码生成等关键环节还可结合文件中的项目配置与依赖快速搭建运行环境尤其能帮助初学者理解前后端数据交互与页面操作的整体流程。1. 这份javaweb项目源码里最值得看的就是分页打印模块做javaweb项目开发的人应该都有体会CRUD页面好写真正磨人的是分页和打印这两个看起来不起眼的模块。分页要处理页码计算、查询条件回显、总条数统计打印则要跟浏览器默认样式对抗一个页面预览时好好的点打印就乱成一团。我拆的这份javaweb项目源码环境是经典的IDEA Tomcat MySQL组合整套代码能直接跑但最有参考价值的是分页打印这块的完整实现——从PageBean封装到前端页码条从window.print()到打印样式定制该有的坑一个没少。适合正在做课程设计或者刚入职接手老项目的朋友直接照着抄作业比自己从头趟坑快得多。2. Idea运行javaweb项目配置环境对照与启动参数2.1 环境与项目结构先弄清楚这份源码用什么跑拿到源码第一件事不是急着点运行而是先核对环境。这份项目源码用的是Java Web经典技术栈JSP Servlet JDBC数据库是MySQL服务器是Tomcat。我在Idea里跑通它的时候用的版本组合是JDK 1.8 Tomcat 8.5 MySQL 5.7如果你手头是JDK 11以上或者Tomcat 9大概率会有兼容性小问题后面排查章节会展开说。先看项目目录结构标准的三层结构src/main/java ├── com.demo.dao # 数据访问层负责JDBC操作 ├── com.demo.entity # 实体类对应数据库表 ├── com.demo.servlet # 控制层处理请求分发 ├── com.demo.service # 业务层调用DAO拼装数据 src/main/webapp ├── WEB-INF/web.xml # Servlet映射配置 ├── jsp/ # 页面文件 └── css/ js/ images/ # 静态资源注意如果你的源码压缩包里没有src/main/java这种Maven结构而是普通的WEB-INF/classes目录说明这份源码是纯Web项目导入Idea的方式有区别第2.2节会说两种导入方式的差异。2.2 Idea配置步骤先配Artifacts再配Deployment我导入这份源码时用的是IDEA旗舰版社区版也能跑但需要确认是否装了Tomcat插件。导入步骤是这样第一步打开Idea选Open定位到源码解压后的根目录等Maven或者IDEA自动识别项目结构。如果识别成普通项目而不是Web项目右键项目选Add Framework Support勾选Web Application。第二步配置Tomcat。点开右上角下拉框选Edit Configurations点加号选Tomcat Server - Local# 关键配置项说明 Application server - 选择本机Tomcat安装目录 Open browser - 选Default默认自动打开浏览器 Context path - 写 /jeeweb 或留空决定访问URL路径这里有个血泪经验如果项目不是Maven结构一定要手动在Deployment选项卡里加Artifact。我一开始忽略了这步启动Tomcat后页面直接404。具体操作是Deployment选项卡下点加号选择Artifact选war exploded模式会解锁Web Resource Directory选项然后把output directory指向源码的webapp目录。第三步配置数据库连接。去源码的WEB-INF下找jdbc.properties文件把这几个参数改成你自己的jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/demo_db?useUnicodetruecharacterEncodingutf8 jdbc.usernameroot jdbc.password你的数据库密码提示千万别漏了url后面的useUnicodetruecharacterEncodingutf8漏了的话页面上中文分页查询条件传进去全是问号这属于乱码问题里最隐蔽的一类。第四步把数据库脚本导入MySQL。源码包里一般会带一个schema.sql或demo_db.sql我用命令行导入mysql -u root -p schema.sql如果源码里没有SQL脚本就自己建表注意对照实体类的字段类型。导入后可以先用SQL客户端跑一条查询确认数据有值再进行下一步。2.3 启动时序与常见启动报错配置完以后启动Tomcat观察控制台输出。正常情况下会看到Artifact ... deployed successfully和Server startup in xxx ms字样。如果启动失败九成是这三类原因端口冲突Tomcat默认8080被占在Configurations里改HTTP port即可。Artifact未构建Idea里Build菜单选Rebuild Project强制重新编译。MySQL驱动缺失把mysql-connector-java的jar包放进WEB-INF/lib或者如果是Maven项目检查pom.xml里的依赖坐标是否写对。我一般会建议新手把启动流程固定成一套肌肉记忆改配置 - Rebuild Project - 重启Tomcat - 看控制台缺一步都可能让你误判是代码问题。3. 分页实现PageBean封装与查询条件回显3.1 分页核心参数pageNum、pageSize、total、totalPage这份源码里的分页实现是典型的JSP Servlet方式没有用MyBatis的PageHelper插件而是手写了一个PageBean作数据载体。这种写法虽然啰嗦但对理解分页的本质很有帮助——分页就是把SQL的limit两个参数暴露成页面的请求参数。先看看实体类PageBean这段话是整个分页模块的地基public class PageBeanT { private int pageNum; // 当前页码从请求参数获取 private int pageSize; // 每页显示条数可配置 private long total; // 总记录数查count(*)得到 private int totalPage; // 总页数由total和pageSize计算得出 private ListT list; // 当前页数据集合 // 总页数计算注意向上取整 public int getTotalPage() { if (total % pageSize 0) { return (int) (total / pageSize); } return (int) (total / pageSize) 1; } }注意总页数计算一定要用向上取整否则最后一页数据不足时会出现空页。这份源码里先用取余判断再除逻辑没问题但如果用Math.ceil(total / pageSize)要注意类型转换total是longpageSize是int两者相除会丢精度。分页参数设计上源码的约定是列表页URL携带pageNum和pageSize两个参数服务端读不到pageNum时默认给1读不到pageSize时给默认值10。前端页码条上显示的页码总数也是由totalPage算出来的这个计算放JSP里做用EL表达式比较方便。3.2 后端分页查询Servlet接收参数DAO执行limit分页的核心SQL逻辑在DAO层Service层负责拼装PageBean。我拆这份源码时发现它的写法很典型三层各司其职先看Service层的分页方法public PageBeanUser findUserByPage(int pageNum, int pageSize, String keyword) { PageBeanUser pageBean new PageBean(); pageBean.setPageNum(pageNum); pageBean.setPageSize(pageSize); // 1. 先查总记录数这是分页性能的关键 int total userDao.countByKeyword(keyword); pageBean.setTotal(total); // 2. 计算limit偏移量注意limit第一个参数是偏移量不是页码 int offset (pageNum - 1) * pageSize; ListUser list userDao.findByPage(offset, pageSize, keyword); pageBean.setList(list); return pageBean; }逻辑说明这里把total查询和list查询分开一来是为了统计总页数二来是为了让页面显示“共X条”提供数据。如果直接在getTotalPage()里临时查count会多一次数据库往返影响性能。源码的做法是先查count再查数据两次查询之间数据量变化不算严重的话没问题但如果对一致性要求高可以用事务包装起来。注意这段代码里offset (pageNum - 1) * pageSize这条这是分页最容易算错的地方。pageNum从1开始所以第一页offset是0第二页才是pageSize。如果你写的是pageNum * pageSize第一页就会漏掉前几条数据这种问题在测试时用第二页才能发现。对应的DAO层代码JDBC写法public ListUser findByPage(int offset, int pageSize, String keyword) { Connection conn null; PreparedStatement ps null; ResultSet rs null; ListUser list new ArrayList(); try { conn JdbcUtil.getConnection(); // 注意SQL拼接模糊查询的参数和limit参数都要用占位符 String sql SELECT * FROM user WHERE username LIKE ? LIMIT ?, ?; ps conn.prepareStatement(sql); ps.setString(1, % keyword %); ps.setInt(2, offset); ps.setInt(3, pageSize); rs ps.executeQuery(); while (rs.next()) { User user new User(); user.setId(rs.getInt(id)); user.setUsername(rs.getString(username)); list.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { JdbcUtil.release(conn, ps, rs); } return list; }参数说明LIMIT后面的两个参数一个是偏移量一个是每页条数顺序不能反。MySQL的LIMIT语法是LIMIT offset, row_count如果写成LIMIT row_count, offset数据会完全错乱。这个坑在源码里已经踩过填好了但你自己写的时候很容易打反。count查询的代码类似注意count里也要带keyword否则分页条数会跟列表数据对不上。3.3 前端分页条与查询条件回显前端分页条是整份源码的亮点之一。很多项目分页功能做得丑源码里用的是Bootstrap分页组件但核心逻辑在JSP里的判断语句。看分页条的核心代码nav aria-labelPage navigation ul classpagination !-- 上一页按钮当前页为1时禁用 -- li class${pageBean.pageNum 1 ? disabled : } a href${basePath}list?pageNum${pageBean.pageNum - 1}pageSize${pageBean.pageSize}keyword${keyword}上一页/a /li !-- 页码循环从1循环到totalPage -- c:forEach begin1 end${pageBean.totalPage} vari li class${i pageBean.pageNum ? active : } a href${basePath}list?pageNum${i}pageSize${pageBean.pageSize}keyword${keyword}${i}/a /li /c:forEach !-- 下一页按钮当前页为末页时禁用 -- li class${pageBean.pageNum pageBean.totalPage ? disabled : } a href${basePath}list?pageNum${pageBean.pageNum 1}pageSize${pageBean.pageSize}keyword${keyword}下一页/a /li /ul /nav注意每个分页链接后面都带着keyword参数这就是查询条件回显的关键。我见过太多项目分页只传pageNum和pageSize一翻页查询条件就丢了整个分页变成了在不同页码之间翻重复数据。源码在这里的处理很规范。还有一个细节是basePath这个变量JSP开头定义成request的contextPathc:set varbasePath value${pageContext.request.contextPath} /这样做的好处是不管项目部署在根路径还是子路径分页链接都不会断。如果你直接在超链接写/list这种绝对路径换环境部署可能就会404。页码条显示的逻辑源码里没有做省略号处理也就是页数一多全部平铺显示。这个在数据量超过20页时会很难看但作为课程设计或内部管理系统的做法够用了。想做得更好看的可以在后续进阶章节的改造思路里看。4. 打印模块window.print()与打印样式定制4.1 为什么不能直接调window.print()打印三个层面的坑打印功能是这份源码里最容易被误解的一个模块。不少人在项目里写打印直接在JSP里放一个按钮onclickwindow.print()这样确实能弹出打印对话框但打印出来的效果往往惨不忍睹。因为浏览器打印时默认把整个页面的布局都输出包括导航栏、侧边栏、分页按钮、统计信息等等这些都是屏幕上要看的不是纸上要看的。源码里处理打印的思路是分层定制第一层用CSS media print把页面上不需要打印的元素隐藏第二层用page设置纸张方向、页边距第三层如果是打印表格还要考虑换页时表头是否重复。这三层缺哪个打印效果都会翻车。4.2 page规则和media print隐藏策略先看源码里print.css里最简单的两个规则media print { /* 打印时隐藏导航栏、分页条、操作按钮 */ .navbar, .pagination, .btn-print, .footer { display: none !important; } /* 给可打印区域设置宽度防止内容被截断 */ .print-area { width: 100%; margin: 0; padding: 0; } } page { size: A4; margin: 10mm 15mm; }逻辑说明display: none !important;是强制隐藏因为页面里有很多Bootstrap组件自带display属性不加important很容易覆盖失效。.print-area是给需要打印的内容区域做的容器样式宽度设为100%是为了避免父容器有固定宽度导致打印时被裁剪。page规则的size属性可以设成A4 / A5 / landscape等。如果你的打印内容是宽表格建议用size: A4 landscape;让纸张横过来。margin设的是页边距mm单位在打印时是物理毫米跟屏幕上的px不是一回事。4.3 表格跨页打印表头重复与行内容截断表格是打印里最常见的元素但浏览器打印表格时有个反直觉的问题默认情况下表格跨页时表头不会重复而且行内容可能会被中间截断。源码里通过CSS处理了这两个问题media print { thead { display: table-header-group; } tr { page-break-inside: avoid; } .avoid-break { page-break-before: always; } }参数说明display: table-header-group;是核心它告诉浏览器在处理这个表格打印时每一页都要重复显示表头。如果没有这行第二页的表格就只有光秃秃的数据行阅读起来很费劲。page-break-inside: avoid;意思是尽量不让一个tr跨页显示如果某一行正好卡在页面边界整行会挪到下一页。这个属性有兼容性问题Chrome和Firefox认老版本IE不认但考虑到现在都用Chromium内核的浏览器问题不大。.avoid-break这个类可以手动控制强制分页的位置比如在打印多张订单时每张订单卡片结束后加一个div类名设为avoid-break这样每张订单就会从新的一页开始打印。这个用法在批量打印订单/发票/工单时特别实用。4.4 批量打印实现新窗口加载数据再打印源码里的打印按钮我拆的时候发现做了两层处理。如果只是打印当前页面的内容直接用window.print()就行。但分页列表通常只显示当前页数据用户要打印的往往是查询条件对应的全部记录。这里源码的做法是点击打印按钮后重新拼接一个带所有数据的新窗口。function printAllData(url, params) { // 1. 拼查询参数不带pageNum表示查询全部 var targetUrl url ?pageSize10000 params; // 2. 新窗口打开 var newWin window.open(targetUrl, _blank); // 3. 等待窗口加载完成后触发打印 newWin.onload function() { newWin.print(); }; }逻辑说明这里用了一个取巧的办法——把pageSize设成一个很大的值10000让后端返回所有符合条件的记录然后在新窗口里加载这些数据再执行打印。这样做的好处是不影响列表页的分页状态用户看页面还是分页的打印出来的是完整数据。参数说明params是查询条件字符串比如keyword张三。这个拼接要注意编码问题中文字符在URL里必须用encodeURIComponent编码否则打印出来的内容中文全是乱码。注意newWin.onload这个事件只有在新窗口加载的是同源页面时才可靠。如果打印的是跨域页面onload可能不触发。在实际项目里打印的页面基本都是项目自己的页面不会有跨域问题。批量打印还有个别名做法——隐藏的iframe。原理类似用一个不可见的iframe加载打印数据调用iframe.contentWindow.print()。代码如下var iframe document.createElement(iframe); iframe.style.display none; document.body.appendChild(iframe); iframe.src targetUrl; iframe.onload function() { iframe.contentWindow.print(); };两种方案对比新窗口方案的优点是可以让用户先预览再打印更好的做法是打印前先弹窗预览。iframe方案的好处是不弹出新窗口用户体验上更顺畅但无法让用户先确认内容。源码里用的是新窗口方案我实际改造项目时更倾向于iframe反正打印预览在浏览器对话框里就能看到。5. 分页打印避坑指南乱码、条件丢失与空白页5.1 现象一打印预览空白页面内容完全没输出现象点击打印按钮预览窗口是空白的只有浏览器默认的表头页脚。原因最常见的原因是CSS样式表里有display: none被继承到了打印区域或者page的margin设置过大把内容挤出打印范围。另一个隐蔽的原因是window.print()在页面还没完全加载完成时被调用DOM元素还没渲染出来。解决我排查这类问题有个固定顺序。先看浏览器打印预览的边距设置把默认的“边距”从“默认”改为“无”再结合page里自定义margin。然后检查打印按钮的调用时机如果是在$(document).ready()里直接调print改成页面完全加载后再调window.onload function() { setTimeout(function() { window.print(); }, 500); };加500毫秒延迟是给浏览器渲染留的时间亲测有效。5.2 现象二翻页后查询条件丢失列表内容跟条件对不上现象搜索关键字“张”后点击第二页列表里的内容变成全部数据关键字没带过去。原因分页链接拼接时漏掉了keyword参数。看回前面3.3节的分页条代码每个分页超链接的href里都带了keyword${keyword}但很多项目只传pageNum和pageSize。这是JavaWeb开发里最经典的分页踩坑点。解决除了分页链接上带条件参数还需要在主查询入口统一处理。一个稳妥做法是在列表页面用一个隐藏表单记录所有查询条件翻页时用JavaScript把隐藏字段的值追加到分页URL后面。源码里的做法是在Session里暂存查询条件从页面上防止用户翻页后丢失。5.3 现象三打印出来的中文全是乱码或问号现象页面显示正常打印预览也是正常的中文但打印到实体纸张上或者导出成PDF时中文变成方格或问号。原因这个原因比较玄学首先是JDBC连接串没加characterEncodingutf8导致数据库里查出来的中文本身就是乱码。其次是页面本身没有设置UTF-8编码JSP页面头部没写pageEncodingUTF-8。解决两步走。第一步确认jdbc.url带参数?useUnicodetruecharacterEncodingUTF8。第二步在web.xml里加一个编码过滤器统一处理请求和响应编码filter filter-nameCharacterEncodingFilter/filter-name filter-classcom.demo.filter.CharacterEncodingFilter/filter-class init-param param-nameencoding/param-name param-valueUTF-8/param-value /init-param /filter filter-mapping filter-nameCharacterEncodingFilter/filter-name url-pattern/*/url-pattern /filter-mapping过滤器类里两个核心方法public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) { request.setCharacterEncoding(UTF-8); response.setCharacterEncoding(UTF-8); response.setContentType(text/html;charsetUTF-8); chain.doFilter(request, response); }逻辑说明request.setCharacterEncoding处理POST请求的提交参数response.setCharacterEncoding处理输出页面的编码。两者都要设置只设其中一个乱码会在某个方向仍然存在。5.4 现象四Tomcat启动报端口被占现象启动Tomcat控制台报Port 8080 required by Tomcat ... is already in use。原因本机已经有一个实例占用了8080或者上次Idea崩溃没关干净进程。解决两种情况分别处理。System级改Configurations里的HTTP port为8081或8082。App级找到占用进程杀掉。用命令行查占用并杀掉最稳netstat -ano | findstr 8080 taskkill /PID 进程号 /F提示如果改端口前端代码里所有写死8080的地方都要同步改比如项目里如果有手动拼AJAX请求URL没改成新端口就会调用失败。源码里用的是contextPath拼接不受端口影响。5.5 现象五打印表格最后一页只有一行数据很难看现象一张数据表打了8页最后一页只有一行孤零零的数据下面大片空白。原因浏览器不会自动调整行的跨页分布最后一页因为前面的页面行高不同导致剩余空间不足。解决有两种思路。想省纸给表格区域设置固定高度搭配page-break-inside: avoid使打印区域更紧凑。想美观接受这个现象但把页脚加上“第X页/共Y页”让孤行那页还是显得完整media print { .page-footer { position: fixed; bottom: 0; width: 100%; text-align: center; font-size: 12px; } }这个页脚每个打印页都会显示配合content: counter(page)可以自动生成页码但需要用到CSS page的bottom-center规则这个只有部分浏览器支持。更通用的还是在页面底部用一个div模拟页脚每次打印都固定出现源码里用的就是这种人工方案。6. 把分页打印模块抽出来复用参数化改造与性能验证这份源码里分页打印模块最值钱的地方在于它的结构足够独立可以很容易抽出来当作一个通用的JavaWeb分页打印组件。我拆完以后自己改造过两次就把改造思路写下来当作这份源码的进阶玩法。第一步把PageBean和分页查询抽成泛型基类。原代码里User模块的分页写死在DAO里我实现抽取时是建立了一个BaseDao把分页查询的公共逻辑收拢public T PageBeanT queryPage(ClassT entityClass, String sqlCount, String sqlList, Object... params) { PageBeanT pageBean new PageBean(); // 执行sqlCount获取total // 计算offset后执行sqlList获取list // 用反射把ResultSet映射为实体对象 return pageBean; }这样业务层只需要传入“查总数的SQL”和“查列表的SQL”分页逻辑本身不用每张表重复写一遍。反射映射部分要处理字段名和列名的对应关系比如Java的驼峰命名和数据库下划线命名用Map做一次列名映射即可。第二步把打印模块参数化。原代码的打印区域是写死的.print-area我在改造时给打印页面加了一个data-print-selector属性允许每张页面自定义打印范围// 打印指定区域默认取.print-area function printSelector(selector) { var originalTitle document.title; var content document.querySelector(selector).innerHTML; var printWindow window.open(, _blank); printWindow.document.write(htmlheadtitle originalTitle /title); printWindow.document.write(link relstylesheet hrefprint.css); printWindow.document.write(/headbody); printWindow.document.write(content); printWindow.document.write(/body/html); printWindow.document.close(); printWindow.print(); // 清理窗口引用 setTimeout(function() { printWindow.close(); }, 1000); }参数说明selector参数传一个CSS选择器比如.print-area或#order-print。printWindow.document.write拼接HTML时外链的CSS必须写完整路径写成相对路径在新窗口里会加载不到。这是当初让我栽过跟头的地方。第三步性能验证。分页模块在数据量一万条以内手写limit查询性能没有问题但index一定要建对最常踩的坑是where条件有keyword LIKE %x%这种模糊查询这种情况下即使建了索引也会全表扫描。我一般会做一次EXPLAIN看执行计划EXPLAIN SELECT * FROM user WHERE username LIKE %张% LIMIT 10, 10;如果type列是ALL说明在做全表扫描数据量大后要改成前缀匹配LIKE 张%才能走索引。这个优化在分页场景下是肉眼可见的差异。打印模块的性能瓶颈不在后端而在浏览器端一次性把一万条数据铺在新窗口渲染会卡顿。我在实际项目里把pageSize限制在2000条以内超过这个量提示用户按条件缩小打印范围这比让浏览器硬撑更合理。从那以后我每次做JavaWeb项目分页和打印这两块都强制走一套固定流程分页先确认total查询和list查询都带同样的条件再进行性能验证打印先确认隐藏元素不会漏掉再确认表格跨页时表头是否重复。这套流程完全是从这份源码里提炼出来的帮我少走了很多弯路。希望帮到你。本文还有配套的精品资源点击获取
简介这份JavaWeb项目源码以典型的分页打印功能为核心面向正在学习JSP/Servlet及数据库操作的开发者解决从数据库读取记录并以表格展示、分页浏览和打印输出等问题同时附带根据当前数据生成二维码的功能。资源共32个文件包含Java源文件与编译后的class文件、JSP页面、XML配置、前端JS与CSS以及所需jar包等压缩包仅3.41MB结构清晰便于导入对比学习。已有4807人学习下载适合课程设计或毕业设计参考。通过该项目可掌握JDBC连接数据库、ResultSet数据遍历、表格化渲染、分页参数处理、JavaScript打印调用及二维码生成等关键环节还可结合文件中的项目配置与依赖快速搭建运行环境尤其能帮助初学者理解前后端数据交互与页面操作的整体流程。1. 这份javaweb项目源码里最值得看的就是分页打印模块做javaweb项目开发的人应该都有体会CRUD页面好写真正磨人的是分页和打印这两个看起来不起眼的模块。分页要处理页码计算、查询条件回显、总条数统计打印则要跟浏览器默认样式对抗一个页面预览时好好的点打印就乱成一团。我拆的这份javaweb项目源码环境是经典的IDEA Tomcat MySQL组合整套代码能直接跑但最有参考价值的是分页打印这块的完整实现——从PageBean封装到前端页码条从window.print()到打印样式定制该有的坑一个没少。适合正在做课程设计或者刚入职接手老项目的朋友直接照着抄作业比自己从头趟坑快得多。2. Idea运行javaweb项目配置环境对照与启动参数2.1 环境与项目结构先弄清楚这份源码用什么跑拿到源码第一件事不是急着点运行而是先核对环境。这份项目源码用的是Java Web经典技术栈JSP Servlet JDBC数据库是MySQL服务器是Tomcat。我在Idea里跑通它的时候用的版本组合是JDK 1.8 Tomcat 8.5 MySQL 5.7如果你手头是JDK 11以上或者Tomcat 9大概率会有兼容性小问题后面排查章节会展开说。先看项目目录结构标准的三层结构src/main/java ├── com.demo.dao # 数据访问层负责JDBC操作 ├── com.demo.entity # 实体类对应数据库表 ├── com.demo.servlet # 控制层处理请求分发 ├── com.demo.service # 业务层调用DAO拼装数据 src/main/webapp ├── WEB-INF/web.xml # Servlet映射配置 ├── jsp/ # 页面文件 └── css/ js/ images/ # 静态资源注意如果你的源码压缩包里没有src/main/java这种Maven结构而是普通的WEB-INF/classes目录说明这份源码是纯Web项目导入Idea的方式有区别第2.2节会说两种导入方式的差异。2.2 Idea配置步骤先配Artifacts再配Deployment我导入这份源码时用的是IDEA旗舰版社区版也能跑但需要确认是否装了Tomcat插件。导入步骤是这样第一步打开Idea选Open定位到源码解压后的根目录等Maven或者IDEA自动识别项目结构。如果识别成普通项目而不是Web项目右键项目选Add Framework Support勾选Web Application。第二步配置Tomcat。点开右上角下拉框选Edit Configurations点加号选Tomcat Server - Local# 关键配置项说明 Application server - 选择本机Tomcat安装目录 Open browser - 选Default默认自动打开浏览器 Context path - 写 /jeeweb 或留空决定访问URL路径这里有个血泪经验如果项目不是Maven结构一定要手动在Deployment选项卡里加Artifact。我一开始忽略了这步启动Tomcat后页面直接404。具体操作是Deployment选项卡下点加号选择Artifact选war exploded模式会解锁Web Resource Directory选项然后把output directory指向源码的webapp目录。第三步配置数据库连接。去源码的WEB-INF下找jdbc.properties文件把这几个参数改成你自己的jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/demo_db?useUnicodetruecharacterEncodingutf8 jdbc.usernameroot jdbc.password你的数据库密码提示千万别漏了url后面的useUnicodetruecharacterEncodingutf8漏了的话页面上中文分页查询条件传进去全是问号这属于乱码问题里最隐蔽的一类。第四步把数据库脚本导入MySQL。源码包里一般会带一个schema.sql或demo_db.sql我用命令行导入mysql -u root -p schema.sql如果源码里没有SQL脚本就自己建表注意对照实体类的字段类型。导入后可以先用SQL客户端跑一条查询确认数据有值再进行下一步。2.3 启动时序与常见启动报错配置完以后启动Tomcat观察控制台输出。正常情况下会看到Artifact ... deployed successfully和Server startup in xxx ms字样。如果启动失败九成是这三类原因端口冲突Tomcat默认8080被占在Configurations里改HTTP port即可。Artifact未构建Idea里Build菜单选Rebuild Project强制重新编译。MySQL驱动缺失把mysql-connector-java的jar包放进WEB-INF/lib或者如果是Maven项目检查pom.xml里的依赖坐标是否写对。我一般会建议新手把启动流程固定成一套肌肉记忆改配置 - Rebuild Project - 重启Tomcat - 看控制台缺一步都可能让你误判是代码问题。3. 分页实现PageBean封装与查询条件回显3.1 分页核心参数pageNum、pageSize、total、totalPage这份源码里的分页实现是典型的JSP Servlet方式没有用MyBatis的PageHelper插件而是手写了一个PageBean作数据载体。这种写法虽然啰嗦但对理解分页的本质很有帮助——分页就是把SQL的limit两个参数暴露成页面的请求参数。先看看实体类PageBean这段话是整个分页模块的地基public class PageBeanT { private int pageNum; // 当前页码从请求参数获取 private int pageSize; // 每页显示条数可配置 private long total; // 总记录数查count(*)得到 private int totalPage; // 总页数由total和pageSize计算得出 private ListT list; // 当前页数据集合 // 总页数计算注意向上取整 public int getTotalPage() { if (total % pageSize 0) { return (int) (total / pageSize); } return (int) (total / pageSize) 1; } }注意总页数计算一定要用向上取整否则最后一页数据不足时会出现空页。这份源码里先用取余判断再除逻辑没问题但如果用Math.ceil(total / pageSize)要注意类型转换total是longpageSize是int两者相除会丢精度。分页参数设计上源码的约定是列表页URL携带pageNum和pageSize两个参数服务端读不到pageNum时默认给1读不到pageSize时给默认值10。前端页码条上显示的页码总数也是由totalPage算出来的这个计算放JSP里做用EL表达式比较方便。3.2 后端分页查询Servlet接收参数DAO执行limit分页的核心SQL逻辑在DAO层Service层负责拼装PageBean。我拆这份源码时发现它的写法很典型三层各司其职先看Service层的分页方法public PageBeanUser findUserByPage(int pageNum, int pageSize, String keyword) { PageBeanUser pageBean new PageBean(); pageBean.setPageNum(pageNum); pageBean.setPageSize(pageSize); // 1. 先查总记录数这是分页性能的关键 int total userDao.countByKeyword(keyword); pageBean.setTotal(total); // 2. 计算limit偏移量注意limit第一个参数是偏移量不是页码 int offset (pageNum - 1) * pageSize; ListUser list userDao.findByPage(offset, pageSize, keyword); pageBean.setList(list); return pageBean; }逻辑说明这里把total查询和list查询分开一来是为了统计总页数二来是为了让页面显示“共X条”提供数据。如果直接在getTotalPage()里临时查count会多一次数据库往返影响性能。源码的做法是先查count再查数据两次查询之间数据量变化不算严重的话没问题但如果对一致性要求高可以用事务包装起来。注意这段代码里offset (pageNum - 1) * pageSize这条这是分页最容易算错的地方。pageNum从1开始所以第一页offset是0第二页才是pageSize。如果你写的是pageNum * pageSize第一页就会漏掉前几条数据这种问题在测试时用第二页才能发现。对应的DAO层代码JDBC写法public ListUser findByPage(int offset, int pageSize, String keyword) { Connection conn null; PreparedStatement ps null; ResultSet rs null; ListUser list new ArrayList(); try { conn JdbcUtil.getConnection(); // 注意SQL拼接模糊查询的参数和limit参数都要用占位符 String sql SELECT * FROM user WHERE username LIKE ? LIMIT ?, ?; ps conn.prepareStatement(sql); ps.setString(1, % keyword %); ps.setInt(2, offset); ps.setInt(3, pageSize); rs ps.executeQuery(); while (rs.next()) { User user new User(); user.setId(rs.getInt(id)); user.setUsername(rs.getString(username)); list.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { JdbcUtil.release(conn, ps, rs); } return list; }参数说明LIMIT后面的两个参数一个是偏移量一个是每页条数顺序不能反。MySQL的LIMIT语法是LIMIT offset, row_count如果写成LIMIT row_count, offset数据会完全错乱。这个坑在源码里已经踩过填好了但你自己写的时候很容易打反。count查询的代码类似注意count里也要带keyword否则分页条数会跟列表数据对不上。3.3 前端分页条与查询条件回显前端分页条是整份源码的亮点之一。很多项目分页功能做得丑源码里用的是Bootstrap分页组件但核心逻辑在JSP里的判断语句。看分页条的核心代码nav aria-labelPage navigation ul classpagination !-- 上一页按钮当前页为1时禁用 -- li class${pageBean.pageNum 1 ? disabled : } a href${basePath}list?pageNum${pageBean.pageNum - 1}pageSize${pageBean.pageSize}keyword${keyword}上一页/a /li !-- 页码循环从1循环到totalPage -- c:forEach begin1 end${pageBean.totalPage} vari li class${i pageBean.pageNum ? active : } a href${basePath}list?pageNum${i}pageSize${pageBean.pageSize}keyword${keyword}${i}/a /li /c:forEach !-- 下一页按钮当前页为末页时禁用 -- li class${pageBean.pageNum pageBean.totalPage ? disabled : } a href${basePath}list?pageNum${pageBean.pageNum 1}pageSize${pageBean.pageSize}keyword${keyword}下一页/a /li /ul /nav注意每个分页链接后面都带着keyword参数这就是查询条件回显的关键。我见过太多项目分页只传pageNum和pageSize一翻页查询条件就丢了整个分页变成了在不同页码之间翻重复数据。源码在这里的处理很规范。还有一个细节是basePath这个变量JSP开头定义成request的contextPathc:set varbasePath value${pageContext.request.contextPath} /这样做的好处是不管项目部署在根路径还是子路径分页链接都不会断。如果你直接在超链接写/list这种绝对路径换环境部署可能就会404。页码条显示的逻辑源码里没有做省略号处理也就是页数一多全部平铺显示。这个在数据量超过20页时会很难看但作为课程设计或内部管理系统的做法够用了。想做得更好看的可以在后续进阶章节的改造思路里看。4. 打印模块window.print()与打印样式定制4.1 为什么不能直接调window.print()打印三个层面的坑打印功能是这份源码里最容易被误解的一个模块。不少人在项目里写打印直接在JSP里放一个按钮onclickwindow.print()这样确实能弹出打印对话框但打印出来的效果往往惨不忍睹。因为浏览器打印时默认把整个页面的布局都输出包括导航栏、侧边栏、分页按钮、统计信息等等这些都是屏幕上要看的不是纸上要看的。源码里处理打印的思路是分层定制第一层用CSS media print把页面上不需要打印的元素隐藏第二层用page设置纸张方向、页边距第三层如果是打印表格还要考虑换页时表头是否重复。这三层缺哪个打印效果都会翻车。4.2 page规则和media print隐藏策略先看源码里print.css里最简单的两个规则media print { /* 打印时隐藏导航栏、分页条、操作按钮 */ .navbar, .pagination, .btn-print, .footer { display: none !important; } /* 给可打印区域设置宽度防止内容被截断 */ .print-area { width: 100%; margin: 0; padding: 0; } } page { size: A4; margin: 10mm 15mm; }逻辑说明display: none !important;是强制隐藏因为页面里有很多Bootstrap组件自带display属性不加important很容易覆盖失效。.print-area是给需要打印的内容区域做的容器样式宽度设为100%是为了避免父容器有固定宽度导致打印时被裁剪。page规则的size属性可以设成A4 / A5 / landscape等。如果你的打印内容是宽表格建议用size: A4 landscape;让纸张横过来。margin设的是页边距mm单位在打印时是物理毫米跟屏幕上的px不是一回事。4.3 表格跨页打印表头重复与行内容截断表格是打印里最常见的元素但浏览器打印表格时有个反直觉的问题默认情况下表格跨页时表头不会重复而且行内容可能会被中间截断。源码里通过CSS处理了这两个问题media print { thead { display: table-header-group; } tr { page-break-inside: avoid; } .avoid-break { page-break-before: always; } }参数说明display: table-header-group;是核心它告诉浏览器在处理这个表格打印时每一页都要重复显示表头。如果没有这行第二页的表格就只有光秃秃的数据行阅读起来很费劲。page-break-inside: avoid;意思是尽量不让一个tr跨页显示如果某一行正好卡在页面边界整行会挪到下一页。这个属性有兼容性问题Chrome和Firefox认老版本IE不认但考虑到现在都用Chromium内核的浏览器问题不大。.avoid-break这个类可以手动控制强制分页的位置比如在打印多张订单时每张订单卡片结束后加一个div类名设为avoid-break这样每张订单就会从新的一页开始打印。这个用法在批量打印订单/发票/工单时特别实用。4.4 批量打印实现新窗口加载数据再打印源码里的打印按钮我拆的时候发现做了两层处理。如果只是打印当前页面的内容直接用window.print()就行。但分页列表通常只显示当前页数据用户要打印的往往是查询条件对应的全部记录。这里源码的做法是点击打印按钮后重新拼接一个带所有数据的新窗口。function printAllData(url, params) { // 1. 拼查询参数不带pageNum表示查询全部 var targetUrl url ?pageSize10000 params; // 2. 新窗口打开 var newWin window.open(targetUrl, _blank); // 3. 等待窗口加载完成后触发打印 newWin.onload function() { newWin.print(); }; }逻辑说明这里用了一个取巧的办法——把pageSize设成一个很大的值10000让后端返回所有符合条件的记录然后在新窗口里加载这些数据再执行打印。这样做的好处是不影响列表页的分页状态用户看页面还是分页的打印出来的是完整数据。参数说明params是查询条件字符串比如keyword张三。这个拼接要注意编码问题中文字符在URL里必须用encodeURIComponent编码否则打印出来的内容中文全是乱码。注意newWin.onload这个事件只有在新窗口加载的是同源页面时才可靠。如果打印的是跨域页面onload可能不触发。在实际项目里打印的页面基本都是项目自己的页面不会有跨域问题。批量打印还有个别名做法——隐藏的iframe。原理类似用一个不可见的iframe加载打印数据调用iframe.contentWindow.print()。代码如下var iframe document.createElement(iframe); iframe.style.display none; document.body.appendChild(iframe); iframe.src targetUrl; iframe.onload function() { iframe.contentWindow.print(); };两种方案对比新窗口方案的优点是可以让用户先预览再打印更好的做法是打印前先弹窗预览。iframe方案的好处是不弹出新窗口用户体验上更顺畅但无法让用户先确认内容。源码里用的是新窗口方案我实际改造项目时更倾向于iframe反正打印预览在浏览器对话框里就能看到。5. 分页打印避坑指南乱码、条件丢失与空白页5.1 现象一打印预览空白页面内容完全没输出现象点击打印按钮预览窗口是空白的只有浏览器默认的表头页脚。原因最常见的原因是CSS样式表里有display: none被继承到了打印区域或者page的margin设置过大把内容挤出打印范围。另一个隐蔽的原因是window.print()在页面还没完全加载完成时被调用DOM元素还没渲染出来。解决我排查这类问题有个固定顺序。先看浏览器打印预览的边距设置把默认的“边距”从“默认”改为“无”再结合page里自定义margin。然后检查打印按钮的调用时机如果是在$(document).ready()里直接调print改成页面完全加载后再调window.onload function() { setTimeout(function() { window.print(); }, 500); };加500毫秒延迟是给浏览器渲染留的时间亲测有效。5.2 现象二翻页后查询条件丢失列表内容跟条件对不上现象搜索关键字“张”后点击第二页列表里的内容变成全部数据关键字没带过去。原因分页链接拼接时漏掉了keyword参数。看回前面3.3节的分页条代码每个分页超链接的href里都带了keyword${keyword}但很多项目只传pageNum和pageSize。这是JavaWeb开发里最经典的分页踩坑点。解决除了分页链接上带条件参数还需要在主查询入口统一处理。一个稳妥做法是在列表页面用一个隐藏表单记录所有查询条件翻页时用JavaScript把隐藏字段的值追加到分页URL后面。源码里的做法是在Session里暂存查询条件从页面上防止用户翻页后丢失。5.3 现象三打印出来的中文全是乱码或问号现象页面显示正常打印预览也是正常的中文但打印到实体纸张上或者导出成PDF时中文变成方格或问号。原因这个原因比较玄学首先是JDBC连接串没加characterEncodingutf8导致数据库里查出来的中文本身就是乱码。其次是页面本身没有设置UTF-8编码JSP页面头部没写pageEncodingUTF-8。解决两步走。第一步确认jdbc.url带参数?useUnicodetruecharacterEncodingUTF8。第二步在web.xml里加一个编码过滤器统一处理请求和响应编码filter filter-nameCharacterEncodingFilter/filter-name filter-classcom.demo.filter.CharacterEncodingFilter/filter-class init-param param-nameencoding/param-name param-valueUTF-8/param-value /init-param /filter filter-mapping filter-nameCharacterEncodingFilter/filter-name url-pattern/*/url-pattern /filter-mapping过滤器类里两个核心方法public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) { request.setCharacterEncoding(UTF-8); response.setCharacterEncoding(UTF-8); response.setContentType(text/html;charsetUTF-8); chain.doFilter(request, response); }逻辑说明request.setCharacterEncoding处理POST请求的提交参数response.setCharacterEncoding处理输出页面的编码。两者都要设置只设其中一个乱码会在某个方向仍然存在。5.4 现象四Tomcat启动报端口被占现象启动Tomcat控制台报Port 8080 required by Tomcat ... is already in use。原因本机已经有一个实例占用了8080或者上次Idea崩溃没关干净进程。解决两种情况分别处理。System级改Configurations里的HTTP port为8081或8082。App级找到占用进程杀掉。用命令行查占用并杀掉最稳netstat -ano | findstr 8080 taskkill /PID 进程号 /F提示如果改端口前端代码里所有写死8080的地方都要同步改比如项目里如果有手动拼AJAX请求URL没改成新端口就会调用失败。源码里用的是contextPath拼接不受端口影响。5.5 现象五打印表格最后一页只有一行数据很难看现象一张数据表打了8页最后一页只有一行孤零零的数据下面大片空白。原因浏览器不会自动调整行的跨页分布最后一页因为前面的页面行高不同导致剩余空间不足。解决有两种思路。想省纸给表格区域设置固定高度搭配page-break-inside: avoid使打印区域更紧凑。想美观接受这个现象但把页脚加上“第X页/共Y页”让孤行那页还是显得完整media print { .page-footer { position: fixed; bottom: 0; width: 100%; text-align: center; font-size: 12px; } }这个页脚每个打印页都会显示配合content: counter(page)可以自动生成页码但需要用到CSS page的bottom-center规则这个只有部分浏览器支持。更通用的还是在页面底部用一个div模拟页脚每次打印都固定出现源码里用的就是这种人工方案。6. 把分页打印模块抽出来复用参数化改造与性能验证这份源码里分页打印模块最值钱的地方在于它的结构足够独立可以很容易抽出来当作一个通用的JavaWeb分页打印组件。我拆完以后自己改造过两次就把改造思路写下来当作这份源码的进阶玩法。第一步把PageBean和分页查询抽成泛型基类。原代码里User模块的分页写死在DAO里我实现抽取时是建立了一个BaseDao把分页查询的公共逻辑收拢public T PageBeanT queryPage(ClassT entityClass, String sqlCount, String sqlList, Object... params) { PageBeanT pageBean new PageBean(); // 执行sqlCount获取total // 计算offset后执行sqlList获取list // 用反射把ResultSet映射为实体对象 return pageBean; }这样业务层只需要传入“查总数的SQL”和“查列表的SQL”分页逻辑本身不用每张表重复写一遍。反射映射部分要处理字段名和列名的对应关系比如Java的驼峰命名和数据库下划线命名用Map做一次列名映射即可。第二步把打印模块参数化。原代码的打印区域是写死的.print-area我在改造时给打印页面加了一个data-print-selector属性允许每张页面自定义打印范围// 打印指定区域默认取.print-area function printSelector(selector) { var originalTitle document.title; var content document.querySelector(selector).innerHTML; var printWindow window.open(, _blank); printWindow.document.write(htmlheadtitle originalTitle /title); printWindow.document.write(link relstylesheet hrefprint.css); printWindow.document.write(/headbody); printWindow.document.write(content); printWindow.document.write(/body/html); printWindow.document.close(); printWindow.print(); // 清理窗口引用 setTimeout(function() { printWindow.close(); }, 1000); }参数说明selector参数传一个CSS选择器比如.print-area或#order-print。printWindow.document.write拼接HTML时外链的CSS必须写完整路径写成相对路径在新窗口里会加载不到。这是当初让我栽过跟头的地方。第三步性能验证。分页模块在数据量一万条以内手写limit查询性能没有问题但index一定要建对最常踩的坑是where条件有keyword LIKE %x%这种模糊查询这种情况下即使建了索引也会全表扫描。我一般会做一次EXPLAIN看执行计划EXPLAIN SELECT * FROM user WHERE username LIKE %张% LIMIT 10, 10;如果type列是ALL说明在做全表扫描数据量大后要改成前缀匹配LIKE 张%才能走索引。这个优化在分页场景下是肉眼可见的差异。打印模块的性能瓶颈不在后端而在浏览器端一次性把一万条数据铺在新窗口渲染会卡顿。我在实际项目里把pageSize限制在2000条以内超过这个量提示用户按条件缩小打印范围这比让浏览器硬撑更合理。从那以后我每次做JavaWeb项目分页和打印这两块都强制走一套固定流程分页先确认total查询和list查询都带同样的条件再进行性能验证打印先确认隐藏元素不会漏掉再确认表格跨页时表头是否重复。这套流程完全是从这份源码里提炼出来的帮我少走了很多弯路。希望帮到你。本文还有配套的精品资源点击获取
