什么是 EL:
什么是 JSTL:
【注意点】使用 JSTL 需要引入两个依赖
基础环境
新建一个普通项目【我使用的是 Maven,区别不大】
添加 Web 框架
引入依赖 【servlet-api,jsp-api,jstl-api,standard】
maven 方式导入 pom.xml
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp.jstl</groupId>
<artifactId>jstl-api</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
普通方式 先下载jar包
将文件拷贝到 /WEB-INF/lib/ 下。添加类库
右键lib
目录 选择Add as Library
Tomcat lib 目录 中也需要 添加 JSTL.jar 包
配置 Tomcat 启动测试项目正常启动
【注意】Tomcat 中也需要 添加 JSTL.jar 包
将 JSTL.jar
复制到 Tomcat/lib
目录下
在JSP页面上使用EL,JSTL
显示商品信息
src
目录下建包 pojo
是实体类
实体类 Wares
public class Wares {
public int id; // 商品编号
public String name; // 商品名称
public String imgPath; // 商品图片 【路径
public double price; // 单价
public String introduction; // 商品介绍
public Wares(){}
public Wares(int id, String name, String imgPath, double price, String introduction) {
this.id = id;
this.name = name;
this.imgPath = imgPath;
this.price = price;
this.introduction = introduction;
}
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 getImgPath() {
return imgPath;
}
public void setImgPath(String imgPath) {
this.imgPath = imgPath;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getIntroduction() {
return introduction;
}
public void setIntroduction(String introduction) {
this.introduction = introduction;
}
@Override
public String toString() {
return "Wares{" +
"id=" + id +
", name=‘" + name + ‘\‘‘ +
", imgPath=‘" + imgPath + ‘\‘‘ +
", price=" + price +
", introduction=‘" + introduction + ‘\‘‘ +
‘}‘;
}
}
WaresServlet 返回数据
import java.util.ArrayList;
import java.util.List;
public class WaresServlet {
public List<Wares> getWares() {
List<Wares> list = new ArrayList<Wares>();
Wares ware1 = new Wares(1, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware2 = new Wares(2, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware3 = new Wares(3, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware4 = new Wares(4, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware5 = new Wares(5, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware6 = new Wares(6, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware7 = new Wares(7, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware8 = new Wares(8, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware9 = new Wares(9, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
Wares ware10 = new Wares(10, "测试数据 零度可乐", "./img/coco.jpg", 3, "零度可乐330ml");
list.add(ware1);
list.add(ware2);
list.add(ware3);
list.add(ware4);
list.add(ware5);
list.add(ware6);
list.add(ware7);
list.add(ware8);
list.add(ware9);
list.add(ware10);
return list;
}
}
静态资源,这里一张只是用来测试的
编写展示页面 :index.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>商品信息展示</title>
<style>
img {
width: 100px;
}
</style>
</head>
<body>
<%
List<Wares> wares = new WaresServlet().getWares(); // 获取临时数据
request.setAttribute("wares", wares); // 设置节点 wares 用EL表达式可以 访问数据
%>
<table>
<thead>
<tr>
<th>商品编码</th>
<th>商品名称</th>
<th>商品图片</th>
<th>单价 ¥</th>
<th>商品介绍</th>
</tr>
</thead>
<tbody>
<%-- items:需要遍历的列表 ,var: 遍历出来的元素 --%>
<%-- 每遍历一遍 就会 打印 里面的标签 --%>
<c:forEach items="${wares}" var="item">
<tr>
<td>${item.getId()}</td>
<td>${item.getName()}</td>
<td>
<div class="wareimg">
<img src="${item.getImgPath()}" alt="${item.getName()}">
</div>
</td>
<td>${item.getPrice()}</td>
<td>${item.getIntroduction()}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>
启动项目,查看结果
如果觉得难看可以使用 ui 框架 这里使用了layUi
原文:https://www.cnblogs.com/Right-A/p/14820321.html