Java Web轻松学41 - JSTL初步使用
yuyutoo 2024-10-12 01:05 2 浏览 0 评论
本系列文章旨在记录和总结自己在Java Web开发之路上的知识点、经验、问题和思考,希望能帮助更多(Java)码农和想成为(Java)码农的人。
目录
- 介绍
- JSTL规范下载
- JSTL包含哪些库
- JSTL如何使用
- 租房网应用中使用JSTL
- JSTL相关的JAR包
- EL表达式访问列表的长度
- JSTL的forEach标签
- 剩下的页面改造
- 总结
介绍
上篇文章我们使用JSP技术对租房网平台进行了改造,也提到下面这样的代码有点奇葩:
<%for (House house : mockHouses) { System.out.println(house); %> <li><h2><a href="house-details.jsp?userName=${param.userName}&houseId=<%=house.getId() %>"><%=house.getName() %></a></h2></li> <%} %>
像这样的代码我们可以使用JSTL技术来解决。当然,JSTL可不仅仅只有这点功能,你还可以定义自己的标签。
在这篇文章里,我提到过JSTL是JSP相关的技术,从它的名字全称(JSP Standard Tag Library,即JSP标准标签库)就可以看出来。
在本篇文章里,我们就尝试初步使用JSTL来进一步改造我们的租房网应用。
JSTL规范下载
既然称之为库,那么它包含哪些库呢?
我们可以把JSTL规范下载下来看一下,当然你也可以找本相关书籍,或者直接在网上搜索一下。
JSTL规范的下载类似Servlet规范的下载(可以参考这篇文章),不过我们在JCP官网(https://jcp.org/en/home/index)中搜索的关键字就变成Tag或Tag Library了。
我们在搜索结果中就可以看到:
点击 Download page 链接可以看到:
然后继续点击底部的 Maintenance Review 2 of JSR 52 链接,跳转到:
不过,再次点击DOWNLOAD按钮时,我这边出现无法访问此网站的错误。所以我转而点击底部的 JSR-000052 A Standard Tag Library for JavaServer Pages Detail Page 链接:
从这里我们可以看到JSTL规范的各个阶段,我们选择 Maintenance Release 2 这个阶段,点击它右边的 Download page 链接:
然后再点击红色箭头所指的链接,跳转到真正的下载页面:
后续操作就跟Servlet规范的下载类似了。
JSTL包含哪些库
现在,我们可以打开JSTL规范,可以看到如下描述:
事实上,JSTL应该就只是一个库,但它根据不同功能而划分成了多个库:
- 核心:变量支持、流控制、URL管理等等,它的命名空间URI是:http://java.sun.com/jsp/jstl/core,标签前缀通常使用:c
- XML处理:它的命名空间URI是:http://java.sun.com/jsp/jstl/xml,标签前缀通常使用:x
- 国际化:语言区域、消息格式化、数字和日期格式化等,它的命名空间URI是:http://java.sun.com/jsp/jstl/fmt,标签前缀通常使用:fmt
- 数据库访问(SQL):它的命名空间URI是:http://java.sun.com/jsp/jstl/sql,标签前缀通常使用:sql
- 函数:集合长度、字符串操作等,它的命名空间URI是:http://java.sun.com/jsp/jstl/functions,标签前缀通常使用:fn
JSTL如何使用
JSTL的终极目标是简化JSP页面的开发,所以,它应该是在JSP页面中使用。
既然是标签,那它的使用是否跟HTML标签、XML标签类似呢?答案是肯定的。
不过,JSTL标签的使用与XML标签使用时声明命名空间类似,也需要告诉Servlet/JSP容器该JSP页面需要引入某个库(即上述的核心、XML处理、国际化、数据库访问、函数等等,以及以后自定义的标签)。
在JSP页面中是使用一个JSP指令(即taglib指令,之前我们用过page指令)来声明的:
<%@ taglib uri="uri" prefix="prefix" %>
举个例子,假设我们要使用JSTL的核心库,则应该在JSP页面的开头处这样声明:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
然后,就可以使用核心库的标签,比如out标签:
<c:out value="value" [escapeXml="{true|false}"] [default="defaultValue"]/> <c:out value="value" [escapeXml="{true|false}"]> default value </c:out>
注意:在标签的语法中,[]表示可选的属性。如果值带下划线,则表示为默认值。
out标签有两种形式,有属性和属性值,也可能有标签内容,跟HTML标签和XML标签类似。
租房网应用中使用JSTL
我们就拿租房网应用中的房源列表页面houses.jsp来使用JSTL改造,因为这里涉及列表数据的展示。
列表数据是很常见的,我们经常可以看到包含列表数据的页面,比如订单列表、商品列表等等。
houses.jsp原来的代码是这样的:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="include.jsp"%> <% List<House> mockHouses = (List<House>) request.getAttribute("mockHouses"); System.out.println(mockHouses); %> <h6>共找到你感兴趣的房源 <%=mockHouses.size() %> 条</h6> <ul> <%for (House house : mockHouses) { System.out.println(house); %> <li><h2><a href="house-details.jsp?userName=${param.userName}&houseId=<%=house.getId() %>"><%=house.getName() %></a></h2></li> <%} %> </ul> </body> </html>
首先要引入JSTL中的核心库(因为我们后面要用到的forEach标签是属于核心库的):
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="include.jsp"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
遗憾的是,我们添加这句声明之后,Eclipse就报错了:
提示是说找不到这个标签库的描述符。那就根据这个提示在网上搜索答案呗。
答案就是原来我们还需要在我们的工程结构里配置JSTL相关的JAR包,而Tomcat这个Servlet/JSP容器本身不提供这些JSTL相关的JAR包,我们需要单独下载。
JSTL相关的JAR包
那么在哪里下载呢?既然我们是使用Tomcat这个Servlet/JSP容器,那么我们就可以到它的官网(http://tomcat.apache.org/)上看看:
我们可以看到左侧导航栏中有个Taglibs链接,我们点进去看看:
还真就是JSTL相关JAR包的下载页面,点击Download链接进去,可以找到真正的下载链接:
我们可以看下Binary README文件,里面有该JAR包版本支持的Tomcat和JSP等版本信息,如果我们使用的Tomcat是最新版本(9.0.x),那直接下载下面四个JAR包即可,否则需要点进Archives页面下载历史版本。
好,我们把四个JAR包下载下来之后,就可以添加到我们的租房网应用的工程里面了,可以参考这篇文章。
实际上,直接把这四个JAR包拷贝到WebContent/WEB-INF/lib节点下是最快的。
现在,我们可以看到上述的Eclipse报错提示就消失了。
EL表达式访问列表的长度
首先,我们可以使用EL表达式来访问列表的长度:
<h6>共找到你感兴趣的房源 ${mockHouses.size()} 条</h6>
据说低版本的JSP容器不可以这样直接用EL表达式来访问列表的长度,而应该使用JSTL的函数库中的length方法:
${fn:length(list) }
当然,首先需要引入JSTL的函数库。读者朋友可以自行尝试一下。
JSTL的forEach标签
我们可以通过JSTL规范查看一下这个forEach标签的用法:
当然,可能只看这个语法格式还是不太明白如何使用,那么可以继续看规范中的描述,或者直接网上搜索即可。
我们需要改造的代码是这一部分:
<%for (House house : mockHouses) { System.out.println(house); %> <li><h2><a href="house-details.jsp?userName=${param.userName}&houseId=<%=house.getId() %>"><%=house.getName() %></a></h2></li> <%} %>
我们可以先把它注释掉(在Eclipse中可以选中这一段,然后键入Ctrl + Shift + /),然后敲入开始标签的左尖括号 < ,于是Eclipse会出现智能提示:
嗯,这个功能还是挺好用的,提高开发效率。
闲话不多说了,直接上代码:
<c:forEach var="house" items="${mockHouses}"> <li><h2><a href="house-details.jsp?userName=${param.userName}&houseId=${house.id}">${house.name}</a></h2></li> </c:forEach>
看似跟之前变化不大,但至少没那么奇葩了,风格也与HTML很一致。
forEach标签遍历列表数据的基本属性是:
- var:相当于定义一个变量来表示指向列表中的某一项;
- items:指定需要遍历哪个列表,需要注意的是其值又是使用EL表达式来访问页面/请求/会话/应用中的某个属性数据(即使用setAttribute()添加的对象)
forEach标签的内容就可以是普通的HTML标签了,然后HTML标签里我们就可以使用EL表达式来访问列表中每一项数据。
实际上,EL表达式直接访问对象的属性,而非调用对象的方法,比如:
${house.id}
注意,param是EL的隐式对象,它是由Servlet/JSP容器创建并传进来的,它可以直接访问请求所携带的参数。
所以,我们实际上可以把原来的这一部分:
<% List<House> mockHouses = (List<House>) request.getAttribute("mockHouses"); System.out.println(mockHouses); %>
删除掉。
现在houses.jsp的代码就变成这样了:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="include.jsp"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <h6>共找到你感兴趣的房源 ${mockHouses.size()} 条</h6> <ul> <c:forEach var="house" items="${mockHouses}"> <li><h2><a href="house-details.jsp?userName=${param.userName}&houseId=${house.id}">${house.name}</a></h2></li> </c:forEach> </ul> </body> </html>
是不是清晰明朗了许多?
当然,JSP页面的开发者必须知道传进这个页面的到底有哪些数据对象!
没错,这就相当于把数据的展示(视图层)给分离开来,你需要与后端(控制器层和模型层)约定/设计好每一个JSP页面都有哪些数据对象。
然后,JSP页面的开发者和后端(控制器层和模型层)的开发者就可以各自独立去开发了。
剩下的页面改造
剩下的house-details.jsp和house-form.jsp该如何改造呢?大家可以先思考一下。
提示:JSP页面应该只关心取数据展示,而不应该关心如何查找到某个数据这种逻辑,应该把这种逻辑放到后端(控制器层和模型层)。
我的改造是这样的,把原来这两个页面的如何查找到某个数据这种逻辑放到Filter中,前后端约定好这两个页面中存在target这个House对象,于是doFilter()方法中在将请求交给下个节点之前应该挂载上target这个House对象:
if (userName == null || userName.isEmpty()) { System.out.println("invalid user!"); httpServletResponse.sendRedirect("login.html"); } else { String houseId = httpServletRequest.getParameter("houseId"); if (houseId != null && !houseId.trim().isEmpty()) { House target = findHouseById(houseId);//找不到怎么办? httpServletRequest.setAttribute("target", target); } chain.doFilter(request, response); }
另外,应该把如何查找某个房源的逻辑封装起来:
private House findHouseById(String houseId) { for (House house : mockHouses) { if (houseId.equals(house.getId())) { return house; } } return null; }
然后,这两个页面就极其简单了,house-details.jsp是这样的:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="include.jsp"%> <h2>${target.name}<a href="house-form.jsp?userName=${param.userName}&houseId=${target.id}">编辑</a></h2> <h3>${target.detail}</h3> <h4><a href="houses.jsp?userName=${param.userName}">回到列表</a></h4> </body> </html>
house-form.jsp是这样的:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="include.jsp"%> <form action="house-form.servlet" method="post"> <input type="hidden" name="userName" value="${param.userName}"/> <input type="hidden" name="houseId" value="${target.id}"/> <label for="house_name">房源名字:</label><input type="text" id="house_name" name="houseName" value="${target.name}" /> <label for="house_detail">房源详细信息:</label><input type="text" id="house_detail" name="houseDetail" value="${target.detail}" /> <input type="submit" value="提交" /> </form> </body> </html>
可以看到,这两个页面只是取数据(target这个House对象)展示而已。
总结
- JSTL的终极目标是简化JSP开发;
- JSTL的使用需要先声明某个库;
- JSTL的标签使用类似HTML标签和XML标签,语法规则可以查看JSTL规范;
- JSP页面使用JSTL和EL表达式基本可以实现大部分功能;
- EL表达式能够直接访问页面/请求/会话/应用这几个对象中挂载(即setAttribute()方法)的数据对象;
- EL表达式使用 ${ } ;
- EL中存在隐式对象,以后再介绍;
- 列表数据很常见很重要;
- 列表数据采用JSTL的forEach标签来遍历(实际上也可以采用EL表达式,比如${mockHouses[i].id});
- 前后端开发的分离:前端只关心取数据如何展示;后端关心如何取数据并挂载到页面/请求/会话/应用这几个对象中;
- 前后端需约定/设计好数据;
相关推荐
- jQuery VS AngularJS 你更钟爱哪个?
-
在这一次的Web开发教程中,我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题,即jQuery和AngularJS之间的区别是什么?也就是说jQueryVSAngularJS?...
- Jquery实时校验,指定长度的「负小数」,小数位未满末尾补0
-
在可以输入【负小数】的输入框获取到焦点时,移除千位分隔符,在输入数据时,实时校验输入内容是否正确,失去焦点后,添加千位分隔符格式化数字。同时小数位未满时末尾补0。HTML代码...
- 如何在pbootCMS前台调用自定义表单?pbootCMS自定义调用代码示例
-
要在pbootCMS前台调用自定义表单,您需要在后台创建表单并为其添加字段,然后在前台模板文件中添加相关代码,如提交按钮和表单验证代码。您还可以自定义表单数据的存储位置、添加文件上传字段、日期选择器、...
- 编程技巧:Jquery实时验证,指定长度的「负小数」
-
为了保障【负小数】的正确性,做成了通过Jquery,在用户端,实时验证指定长度的【负小数】的方法。HTML代码<inputtype="text"class="forc...
- 一篇文章带你用jquery mobile设计颜色拾取器
-
【一、项目背景】现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...
- 编程技巧:Jquery实时验证,指定长度的「正小数」
-
为了保障【正小数】的正确性,做成了通过Jquery,在用户端,实时验证指定长度的【正小数】的方法。HTML做成方法<inputtype="text"class="fo...
- jquery.validate检查数组全部验证
-
问题:html中有多个name[],每个参数都要进行验证是否为空,这个时候直接用required:true话,不能全部验证,只要这个数组中有一个有值就可以通过的。解决方法使用addmethod...
- Vue进阶(幺叁肆):npm查看包版本信息
-
第一种方式npmviewjqueryversions这种方式可以查看npm服务器上所有的...
- layui中使用lay-verify进行条件校验
-
一、layui的校验很简单,主要有以下步骤:1.在form表单内加上class="layui-form"2.在提交按钮上加上lay-submit3.在想要校验的标签,加上lay-...
- jQuery是什么?如何使用? jquery是什么功能组件
-
jQuery于2006年1月由JohnResig在BarCampNYC首次发布。它目前由TimmyWilson领导,并由一组开发人员维护。jQuery是一个JavaScript库,它简化了客户...
- django框架的表单form的理解和用法-9
-
表单呈现...
- jquery对上传文件的检测判断 jquery实现文件上传
-
总体思路:在前端使用jquery对上传文件做部分初步的判断,验证通过的文件利用ajaxFileUpload上传到服务器端,并将文件的存储路径保存到数据库。<asp:FileUploadI...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R...
- 大数据开发基础之JAVA jquery 大数据java实战
-
上一篇我们讲解了JAVAscript的基础知识、特点及基本语法以及组成及基本用途,本期就给大家带来了JAVAweb的第二个知识点jquery,大数据开发基础之JAVAjquery,这是本篇文章的主要...
- 推荐四个开源的jQuery可视化表单设计器
-
jquery开源在线表单拖拉设计器formBuilder(推荐)jQueryformBuilder是一个开源的WEB在线html表单设计器,开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)