首页 > 编程语言 > 详细

JavaWeb-EL与JSTL

时间:2021-05-28 10:07:37      阅读:35      评论:0      收藏:0      [点我收藏+]

1、EL和JSTL

什么是 EL:

  • EL(Expression Language) 是为了使JSP写起来更加简单。
  • 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,
  • 它提供了在 JSP 中简化表达式的方法,让Jsp的代码更加简化。

什么是 JSTL:

  • JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能。
  • JSTL支持通用的、结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签。
  • 除了这些,它还提供了一个框架来使用集成JSTL的自定义标签。
  • 根据JSTL标签所提供的功能,可以将其分为5个类别。
    • 核心标签
    • 格式化标签
    • SQL 标签
    • XML 标签
    • JSTL函数

【注意点】使用 JSTL 需要引入两个依赖

技术分享图片

2、搭建环境

基础环境

  1. 新建一个普通项目【我使用的是 Maven,区别不大】

  2. 添加 Web 框架

    技术分享图片

    技术分享图片

  3. 引入依赖 【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 包

  4. 配置 Tomcat 启动测试项目正常启动

    技术分享图片

【注意】Tomcat 中也需要 添加 JSTL.jar 包

JSTL.jar 复制到 Tomcat/lib 目录下

3、搭建项目结构

在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

技术分享图片

JavaWeb-EL与JSTL

原文:https://www.cnblogs.com/Right-A/p/14820321.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!