1
写在前面的话
今天给大家写一篇Web系列的文章,大部分人可能会觉得Web的东西很基础,如果这方面你很精通了可以忽略,但是我还是想出一系列的文章去帮助刚刚入门的小伙伴。
废话不多说,今天咱们来讲讲JSTL标签库。
2
EL表达式
在讲JSTL标签库之前,我首先给大家讲讲EL表达式,这个对于接触过web开发的人并不陌生。EL表达式全名Expression Language,它的主要目的就是简化JSP中的表达式的方法,让JSP中的代码更加的简化,他可以直接写在JSP页面当中,这样可以减少JSP脚本的编写。
EL表达式是如何从域中取数据呢?
我们用jsp脚本来获取域中的数据:
<%=request.getAttribute(name)%>
我们再用EL表达式来代替上面的脚本:
${requestScope.name}
可以看到我们的代码量是减少了一些,而且可以直接通过“.”来获取数据,EL表达式最主要的作用就是获取四大域中的数据,其格式都是${EL表达式}
例如:
EL获得pageContext域中的值:$ { pageScope.key }
EL获得request域中的值:$ { requestScope.key }
EL获得session域中的值:$ { sessionScope.key }
EL获得application域中的值:$ { applicationScope.key }
如果你是这么写:$ {key} ,那么它会依次从pageContext域,request域,session域,application域中获取属性,在某个域中获取后将不会再继续向下寻找了。
实例:el.jsp
....
<% pageContext.setAttribute("name","xiaoming");
request.setAttribute("name","小明");
User user = new User();//IDEA导包快捷键Art+enter user.setName("小花"); user.setSex("女"); session.setAttribute("user",user);
List list=new ArrayList<>();
User user1=new User();
user1.setName("小强");
user1.setSex("男");
User user2=new User();
user2.setName("小丽");
user2.setSex("女");
list.add(user1);
list.add(user2);
application.setAttribute("list",list); %>
<%=request.getAttribute("name")%>
<% User user3=(User)session.getAttribute("user");
String name =user3.getName();
out.write(name); %>
<% List list1=(List)application.getAttribute("list");
User user4=list1.get(0);
out.write(user4.getName()); %>
${requestScope.name}
${sessionScope.user.name}
${applicationScope.list[0].name}
${name}
${user.name}
${list[0].name}
输出结果:
3
EL的内置对象和执行表达式
获取JSP中域中的数据:pageScope,requestScope,sessionScope,applicationScope
接收参数:param,paramValues
相当于request.getParameter() 和 request.getParameterValues()
获取请求头信息:header,headerValues
相当于request.getHeader(name)
获取全局初始化参数:initParam()
相当于this.getServletContext().getInitParameter(name)
web开发中的cookie:cookie
相当于request.getCookies() --> cookie.getName() -->cookie.getValue()
web开发中的pageContext:pageContext
pageContext可获得其他八大对象
<%- Created by IntelliJ IDEA. User: Administrator Date: 2018/7/14 Time: 15:33 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 获取参数 --%>
${param.userName}
<%-- 主机信息?--%>
${header.host}
2. 执行表达式
${1+1}
${2>1}
${2 eq 2}
${2>1 || 3>2}
${2>1 ? ture:false}
${empty user}
输出结果:
4
JSTL简介
JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面当中使用标签的形式完成业务逻辑等功能,JSTL出现的目的和EL是一样的,也是要代替jsp页面中的脚本代码。JSTL标准库有5个子库,但是目前比较常用的还是他的核心库(Core)。
首先,我们需要下载标签库,并且安装在idea当中:
下载地址:
http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/jakarta-taglib s-standard-1.1.2.zip
具体的安装教程,这里就不多说,大家可以自行百度一下,非常的简单。
下面我通过一个案例来给大家演示这些标签:
【案例】实现商品列表展示:
PhoneListServlet.java
import zyw.bean.Phone;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "PhoneListServlet",urlPatterns = "/phonelist")
public class PhoneListServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse respo nse) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse respon se) throws ServletException, IOException { //通过servlet从数据库中获取数据,我们这里暂时通过手动创建数据 Phone phone=new Phone();//鼠标放在Phone上Alt+Enter快捷键建立Phone类 phone.setName("iphone6"); phone.setId(001); phone.setImage("https://img10.360buyimg.com/n7/jfs/t277/193/1005339798/ 768456/29136988/542d0798N19d42ce3.jpg"); phone.setPrice("3900");
Phone phone1=new Phone();
phone1.setName("坚果pro");
phone1.setId(002);
phone1.setPrice("1799");
phone1.setImage("https://img13.360buyimg.com/n7/jfs/t5377/56/1578379545 /209772/32105f74/5911bcbdN7afa707b.jpg");
Phone phone2=new Phone();
phone2.setName("vivo x9");
phone2.setPrice("2345");
phone2.setId(003);
phone2.setImage("https://img12.360buyimg.com/n7/jfs/t6067/340/210139037 6/231820/750cc50e/593aa83fN8b0829fc.jpg");
Phone phone3=new Phone();
phone3.setName("oppo A57");
phone3.setId(004);
phone3.setPrice("1399");
phone3.setImage("https://img10.360buyimg.com/n7/jfs/t4978/185/135948089 /78285/f6a84203/58db6fa4N354322d9.jpg");
Phone phone4=new Phone();
phone4.setName("诺基亚6");
phone4.setId(005);
phone4.setPrice("1699");
phone4.setImage("https://img11.360buyimg.com/n7/jfs/t4930/86/192598423/ 86027/36a57ccf/58dcbfa5N5c41cbfd.jpg");
Phone phone5=new Phone();
phone5.setName("小米MIX");
phone5.setId(006);
phone5.setPrice("3999");
phone5.setImage("https://img13.360buyimg.com/n7/jfs/t4264/215/455518113 /309855/38fe41f1/58b4fc81N1d924112.jpg");
List list=new ArrayList<>();
list.add(phone);
list.add(phone1);
list.add(phone2);
list.add(phone3);
list.add(phone4);
list.add(phone5);
request.setAttribute("list",list);
request.getRequestDispatcher("/phone_list.jsp").forward(request,respons e); } }
Phone.java
public class Phone {
private int id;
private String name;
private String image;
private String price; //Art+Ins快捷键加入get,set方法 public int getId() { return id;
}
public void setId(int id) { this.id = id; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public String getImage() { return image; }
public void setImage(String image) { this.image = image; }
public String getPrice() { return price; }
public void setPrice(String price) { this.price = price; } }
phone_list.jsp
<%--
Created by IntelliJ IDEA.
User: invinjun
Date: 2017/6/16
Time: 16:57
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品列表</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
</head>
<body>
<c:forEach items="${list}" var="phone">
<div class="col-md-2" style="height:250px">
<img src="${phone.image}" width="170" height="170" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: green'>${phone.name}</a>
</p>
<p>
<font color="#FF0000">商城价:¥${phone.price}</font>
</p>
</div>
</c:forEach>
</body>
</html>
效果图: