1. JSP基础与实战环境搭建JSP(Java Server Pages)作为Java EE体系中的重要组成部分允许开发者在HTML页面中嵌入Java代码片段。这种技术特别适合需要动态生成内容的Web应用场景。在开始我们的实战项目前让我们先准备好开发环境。1.1 开发工具准备对于JSP开发我推荐以下工具组合Eclipse IDE for Java EE Developers内置JSP/Servlet支持Apache Tomcat 9.x轻量级Servlet容器JDK 1.8Java开发环境基础安装完成后在Eclipse中配置Tomcat服务器打开Servers视图Window → Show View → Servers右键 → New → Server → 选择Apache → Tomcat v9.0 Server指定Tomcat安装目录并完成配置注意确保Tomcat的JRE配置与项目使用的JDK版本一致避免兼容性问题。1.2 创建第一个JSP项目在Eclipse中新建Dynamic Web ProjectFile → New → Dynamic Web Project输入项目名称如JSP_PracticeTarget runtime选择配置好的Tomcat服务器Dynamic web module version选择3.1对应Servlet 3.1规范勾选Generate web.xml deployment descriptor创建完成后在WebContent目录下新建一个JSP文件% page languagejava contentTypetext/html; charsetUTF-8 pageEncodingUTF-8% !DOCTYPE html html head meta charsetUTF-8 title我的第一个JSP页面/title /head body % out.println(Hello JSP World!); % /body /html右键项目 → Run As → Run on Server即可在浏览器中看到运行结果。2. JSP核心语法与流程控制2.1 JSP基本语法结构JSP页面由以下元素组成指令(Directives)% page ... %、% include ... %声明(Declarations)%! ... %脚本片段(Scriptlets)% ... %表达式(Expressions)% ... %注释(Comments)%-- ... --%2.2 if条件语句实战if语句在JSP中的使用与Java完全一致。下面是一个用户登录状态判断的示例% String userStatus (String)session.getAttribute(loginStatus); if(loggedIn.equals(userStatus)) { % p欢迎回来% session.getAttribute(username) %/p % } else { % p请先a hreflogin.jsp登录/a/p % } %实操心得在JSP中混合HTML和Java代码时保持缩进一致非常重要。我习惯将Java代码块缩进4个空格HTML部分保持正常缩进这样可显著提升代码可读性。2.3 for循环语句实战for循环是生成动态内容的核心工具。以下是三种常见用法基本for循环ul % for(int i1; i5; i) { % li项目 % i %/li % } % /ul增强for循环遍历集合% ListString colors Arrays.asList(红,绿,蓝,黄); for(String color : colors) { % span stylecolor:% color %% color %/span % } %while循环示例% int counter 0; while(counter 3) { % p这是第% counter %条消息/p % } %3. 动态表格生成技术3.1 基础动态表格实现动态表格是Web应用中最常见的需求之一。以下是从数据库查询数据并生成表格的完整示例% page importjava.util.List, java.util.ArrayList, com.example.Product % % // 模拟从数据库获取数据 ListProduct products new ArrayList(); products.add(new Product(1, 笔记本电脑, 5999.00)); products.add(new Product(2, 智能手机, 3999.00)); products.add(new Product(3, 平板电脑, 2999.00)); % table border1 cellpadding5 tr thID/th th产品名称/th th价格/th /tr % for(Product p : products) { % tr td% p.getId() %/td td% p.getName() %/td td% String.format(¥%.2f, p.getPrice()) %/td /tr % } % /table3.2 复杂表格样式控制通过结合CSS和JSP可以实现更专业的表格效果style .data-table { width: 100%; border-collapse: collapse; margin: 20px 0; } .data-table th { background-color: #f2f2f2; padding: 10px; text-align: left; } .data-table td { padding: 8px; border-bottom: 1px solid #ddd; } .data-table tr:nth-child(even) { background-color: #f9f9f9; } .data-table tr:hover { background-color: #e6f7ff; } /style table classdata-table !-- 表格内容生成代码同上 -- /table3.3 使用POI-TL生成复杂Excel表格对于需要导出Excel的场景可以使用poi-tl库添加Maven依赖dependency groupIdcom.deepoove/groupId artifactIdpoi-tl/artifactId version1.10.0/version /dependency创建模板方法% page importcom.deepoove.poi.XWPFTemplate % % page importjava.util.* % % MapString, Object data new HashMap(); data.put(title, 产品清单); data.put(products, products); // 使用前面的products列表 XWPFTemplate template XWPFTemplate.compile(template.docx).render(data); response.setContentType(application/vnd.openxmlformats-officedocument.wordprocessingml.document); response.setHeader(Content-Disposition, attachment;filenameproducts.docx); template.write(response.getOutputStream()); template.close(); %注意事项使用poi-tl时需要先在Word中创建模板文件(.docx)使用{{title}}、{{#products}}等标记定义数据位置。4. 99乘法表实现与优化4.1 基础实现方案99乘法表是练习循环嵌套的经典案例。以下是JSP中的实现table border1 cellspacing0 % for(int i1; i9; i) { % tr % for(int j1; ji; j) { % td% j % × % i % % i*j %/td % } % /tr % } % /table4.2 样式优化版本通过CSS美化输出效果style .multiplication-table { border-collapse: collapse; margin: 20px auto; } .multiplication-table td { padding: 8px 12px; border: 1px solid #ccc; text-align: center; } .multiplication-table tr:nth-child(odd) { background-color: #f5f5f5; } .multiplication-table tr:hover td { background-color: #e1f5fe; } /style div styletext-align:center h399乘法表/h3 table classmultiplication-table !-- 同上循环代码 -- /table /div4.3 响应式布局适配为了让乘法表在不同设备上都能良好显示style media (max-width: 600px) { .multiplication-table td { padding: 4px 6px; font-size: 0.9em; } } media (max-width: 400px) { .multiplication-table { transform: scale(0.8); transform-origin: top center; } } /style5. 高级技巧与常见问题5.1 JSP与JavaScript交互动态生成的元素如何添加交互功能table iddynamicTable % for(int i0; i5; i) { % tr onclickselectRow(this) td行 % i1 %/td td数据 % i*10 %/td /tr % } % /table script function selectRow(row) { // 移除之前选中的样式 var rows document.querySelectorAll(#dynamicTable tr); rows.forEach(function(r) { r.style.backgroundColor ; }); // 设置当前行样式 row.style.backgroundColor #dff0d8; // 获取行数据 var cells row.cells; alert(你选择了: cells[0].innerText , cells[1].innerText); } /script5.2 性能优化建议减少脚本片段尽量将业务逻辑移到Servlet或JavaBean中合理使用JSTL替代复杂的Java代码块页面片段缓存对不常变的内容使用% include file... %避免在JSP中进行数据库操作应该在Servlet中完成5.3 常见问题排查问题1中文乱码解决方案% page contentTypetext/html;charsetUTF-8 pageEncodingUTF-8 % % request.setCharacterEncoding(UTF-8); %问题2JSP页面不更新检查Tomcat的work目录是否被清理在JSP开头添加以下代码强制刷新% response.setHeader(Pragma,No-cache); % % response.setHeader(Cache-Control,no-cache); % % response.setDateHeader(Expires, 0); %问题3动态表格行点击无响应确保JavaScript代码在表格生成之后执行使用jQuery的on()方法处理动态元素事件script srchttps://code.jquery.com/jquery-3.6.0.min.js/script script $(document).on(click, #dynamicTable tr, function() { $(this).siblings().removeClass(selected); $(this).addClass(selected); }); /script在实际项目中我发现将JSP与EL表达式、JSTL标签库结合使用可以大幅提升代码可维护性。例如前面的动态表格可以使用JSTL重写% taglib prefixc urihttp://java.sun.com/jsp/jstl/core % % taglib prefixfmt urihttp://java.sun.com/jsp/jstl/fmt % table classdata-table tr thID/th th产品名称/th th价格/th /tr c:forEach items${products} varp tr td${p.id}/td td${p.name}/td tdfmt:formatNumber value${p.price} typecurrency//td /tr /c:forEach /table这种写法不仅更简洁而且将Java代码与HTML更好地分离符合现代Web开发的最佳实践。
