動的Webサイト開発学習記07：ELとJSTL

記事ディレクトリ

一、エル
3.JSTL
- JSTLパッケージをインポートする
- - ケースデモンストレーションタグライブラリ
4. JSTLのコアタグライブラリ
- <c:out> タグの場合

一、エル

事例紹介

(1) ELを使用して保存された情報を読み出す

Java エンタープライズプロジェクト - ELJSTLDemo を作成します。画像の説明を追加してください
[完了] ボタンをクリックします。
アーティファクト名を変更します。
プロジェクトを再デプロイ
します。ホームページを変更します
。サーバーを起動し、結果を表示します
。net.huawei.servlet パッケージを作成し、ServletDemo01 クラスを作成します。その包み。画像の説明を追加してください

package net.huawei.servlet;

import javax.servlet.RequestDispatcher;
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;

/**
 * 功能：保存request属性，请求转发到指定页面
 * 作者：华卫
 * 日期：2023年04月20日
 */
@WebServlet(name = "ServletDemo01", urlPatterns = "/demo01")
public class ServletDemo01 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 保存request属性
        request.setAttribute("username", "无心剑");
        request.setAttribute("password", "903213");
        // 获取请求转发器，转发到`demo01.jsp`页面
        RequestDispatcher dispatcher = request.getRequestDispatcher("/demo01.jsp");
        // 请求转发
        dispatcher.forward(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }
}

Webディレクトリにdemo01.jspページを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>demo01</title>
    </head>
    <body>
        使用JSP表达式获取属性：<br />
        用户名：<%=request.getAttribute("username")%> <br />
        密码：<%=request.getAttribute("password")%> <br />
        <hr />
        使用EL获取属性：<br />
        用户名：${username} <br />
        密码：${password} <br />
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo01 にアクセスします。画像の説明を追加してください

pageContext オブジェクト

pageContext オブジェクトの場合

Web ディレクトリに demo02.jsp ファイルを作成して、pageContext 暗黙的オブジェクトの使用法を示します。
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>demo02 - 演示pageContext对象</title>
    </head>
    <body>
        请求URI为：${pageContext.request.requestURI} <br />
        Content-Type响应头：${pageContext.response.contentType} <br />
        服务器信息：${pageContext.servletContext.serverInfo} <br />
        Servlet注册名：${pageContext.servletConfig.servletName} <br />
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo02.jsp にアクセスします。画像の説明を追加してください

Web ドメイン関連のオブジェクトのケース

Web ディレクトリに demo03.jsp ファイルを作成して、これら 4 つの暗黙的オブジェクトが JSP ドメインオブジェクトのプロパティにアクセスする方法を示します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>demo03 - 演示Web域相关对象</title>
    </head>
    <body>
        <% pageContext.setAttribute("userName", "无心剑"); %>
        <% request.setAttribute("bookName", "动态网站开发"); %>
        <% session.setAttribute("userName", "陈燕文"); %>
        <% application.setAttribute("bookName", "大数据实时处理"); %>
        表达式\${pageScope.userName}的值为：${pageScope.userName} <br />
        表达式\${requestScope.bookName}的值为：${requestScope.bookName} <br />
        表达式\${sessionScope.userName}的值为：${sessionScope.userName} <br />
        表达式\${applicationScope.bookName}的值为：${applicationScope.bookName} <br />
        表达式\${userName}的值为：${userName}
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo03.jsp にアクセスします。画像の説明を追加してください

環境情報にアクセスするための暗黙的なオブジェクト

クライアントから渡されたリクエストパラメータを取得するケースのデモンストレーション

Web ディレクトリに demo04.jsp ファイルを作成して、クライアントから渡されたリクエストパラメータの取得をデモンストレーションします。
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>demo04 - 演示获取客户端传递的请求参数</title>
    </head>
    <body style="text-align: center;">
        <form action="${pageContext.request.contextPath}/demo04.jsp">
            num1：<input type="text" name="num1"><br />
            num2：<input type="text" name="num"><br />
            num3：<input type="text" name="num"><br /> <br />
            <input type="submit" value="提交" />&nbsp;&nbsp;
            <input type="submit" value="重置" /><hr />
            num1： ${param.num1} <br />
            num2： ${paramValues.num[0]} <br />
            num3： ${paramValues.num[1]} <br />
        </form>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo04.jsp にアクセスし、画像の説明を追加してください
上のフォームに 3 つの数字 100、200、300 を入力して、送信ボタンをクリックします。

クッキーオブジェクト

Cookie オブジェクトの場合

Web ディレクトリに demo05.jsp ファイルを作成し、Cookie オブジェクトの情報を取得して
画像の説明を追加してください
サーバーを起動する方法を示します。 http://localhost:8080/ELJSTLDemo/demo05.jsp にアクセスしてください。ブラウザが初めてアクセスするためです。この時点では、サーバーは userName という名前の Cookie 情報を受信していないため、ブラウザウィンドウには Cookie オブジェクトの情報は表示されません。
画像の説明を追加してください
ページを更新して結果を確認してください

initParam オブジェクト

initParam オブジェクトの場合

web.xml で Web アプリケーションの初期化パラメータを設定する画像の説明を追加してください

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <context-param>
        <param-name>author</param-name>
        <param-value>无心剑</param-value>
    </context-param>
</web-app>

initParam オブジェクトを介して Web アプリケーション初期化パラメータを取得する方法を示すために、Web ディレクトリに demo06.jsp ファイルを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>demo06 - 演示通过initParam对象获取Web应用初始化参数</title>
    </head>
    <body>
        Web应用初始化参数author的值：${initParam.author}
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo06.jsp にアクセスします。画像の説明を追加してください

3.JSTL

JSTLパッケージをインポートする

WEB-INFにlibディレクトリを作成し、jstl.jarとstandard.jarの2つのファイルをlibディレクトリにコピーし、
画像の説明を追加してください
jstl.jarとstandard.jarをライブラリとしてプロジェクトに追加し、

[OK]ボタンをクリックします。

ケースデモンストレーションタグライブラリ

Webディレクトリにdemo07.jspを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
    <head>
        <title>demo07 - 演示标签库</title>
    </head>
    <body>
        <h1 style="color: red; text-align: center">
            <c:out value="欢迎访问泸州职业技术学院~"/>
        </h1>
        <jsp:useBean id="now" class="java.util.Date" />
        <h3 style="text-align: center">
            <fmt:formatDate value="${now}" pattern="yyyy年MM月dd日 HH:mm:ss" />
        </h3>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo07.jsp にアクセスします。画像の説明を追加してください

4. JSTLのコアタグライブラリ

<c:out> タグの場合

ケース 1. デフォルト属性をデモンストレーションする
Web ディレクトリに demo08.jsp を作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo08 - 演示default属性</title>
    </head>
    <body>
        <%--第1个out标签 --%>
        userName属性的值：
        <c:out value="${param.username}" default="用户名未知"/> <br />
        <%--第2个out标签 --%>
        userName属性的值：
        <c:out value="${param.username}">
            用户名未知
        </c:out>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo08.jsp にアクセスします。画像の説明を追加してください

ケース 2.escapeXML 属性のデモ

<c:out> タグには、特殊文字を HTML に変換して出力できる重要な属性scapeXml があります。ケースを使用して、escapeXml 属性を使用して特殊文字を変換する方法を示します。
Webディレクトリにdemo09.jspを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo09 - 演示escapeXml属性</title>
    </head>
    <body>
        <c:out value="${param.username}" escapeXml="false">
            <meta http-equiv="refresh" content="0;url=http://www.lzy.edu.cn" />
        </c:out>
    </body>
</html>

サーバーを起動して http://localhost:8080/ELJSTLDemo/demo09.jsp にアクセスします。画像の説明を追加してください

サーバーを起動して http://localhost:8080/ELJSTLDemo/demo09.jsp にアクセスします。

<c:remove> タグの例

Webディレクトリにdemo10.jspを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo10 - 演示移除标签</title>
    </head>
    <body>
        <%
            pageContext.setAttribute("username", "无心剑");
            session.setAttribute("username", "陈燕文");
        %>
        <c:remove var="username" scope="page"/>
        用户名：<c:out value="${username}"/>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo10.jsp にアクセスします。画像の説明を追加してください

<c:if> タグの場合

Webディレクトリにdemo11.jspを作成します。
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo11 - 演示单分支标签</title>
    </head>
    <body>
        <c:set value="1" var="visitCount" />
        <c:if test="${visitCount==1}">
            <h3 style="text-align: center">你第一次访问~欢迎访问泸职院~</h3>
        </c:if>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo11.jsp にアクセスします。画像の説明を追加してください

) ラベルケース 3 個

Webディレクトリにdemo12.jspを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo12 - 演示多分支标签</title>
    </head>
    <body>
        <c:choose>
            <c:when test="${empty param.username}">
                未知用户~
            </c:when>
            <c:when test="${param.username=='无心剑'}">
                ${param.username}是教师~
            </c:when>
            <c:otherwise>
                ${param.username}是学生~
            </c:otherwise>
        </c:choose>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo12.jsp にアクセス画像の説明を追加してください
し、http://localhost:8080/ELJSTLDemo/demo12.jsp?username=無心剑にアクセスし、
http://localhost:8080/ELJSTLDemo/ にアクセスします。 demo12.jsp ?username=チェン・ヤンウェン

<c:forEach> タグの場合

Webディレクトリにdemo13.jspを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Map" %>
<html>
    <head>
        <title>demo13 - 演示循环标签</title>
    </head>
    <body>
        <%
            String[] fruits = {"苹果", "橘子", "葡萄", "香蕉"};
        %>
        String数组中的元素：
        <c:forEach var="name" items="<%=fruits%>">
            ${name} &nbsp;&nbsp;
        </c:forEach>
        <br />

        <%
            Map userMap = new HashMap();
            userMap.put("01", "北京");
            userMap.put("02", "上海");
            userMap.put("03", "广州");
        %>
        HashMap集合中的元素：
        <c:forEach var="entry" items="<%=userMap%>">
            ${entry.key} : ${entry.value} &nbsp;&nbsp;
        </c:forEach>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo13.jsp にアクセスし画像の説明を追加してください
、Web ディレクトリに demo14.jsp を作成します。

<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo14 - 演示循环标签</title>
    </head>
    <body>
        colorsList集合（指定迭代范围和步长）：
        <%
            List colorsList=new ArrayList();
            colorsList.add("red");
            colorsList.add("yellow");
            colorsList.add("blue");
            colorsList.add("green");
            colorsList.add("black");
        %>
        <c:forEach var="color" items="<%=colorsList%>"
                   begin="1" end="3" step="2">
            ${color}&nbsp;
        </c:forEach>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo14.jsp にアクセスします。画像の説明を追加してください

URL関連タグの場合

Webディレクトリにdemo15.jspを作成します。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>demo15 - 演示URL相关标签</title>
    </head>
    <body>
        使用绝对路径构造URL：
        <c:url var="myURL" value="http://localhost:8080/ELJSTLDemo/demo08.jsp">
            <c:param name="username" value="陈燕文" />
        </c:url>
        <a href="${myURL}">demo08.jsp</a><br />
        使用相对路径构造URL：
        <c:url var="myURL" value="demo08.jsp?username=无心剑" />
        <a href="${myURL}">demo08.jsp</a>
    </body>
</html>

サーバーを起動し、http://localhost:8080/ELJSTLDemo/demo15.jsp にアクセスし、画像の説明を追加してください

最初のハイパーリンクをクリックして、
前のページに戻り、
前のページに戻ります。