JSP テクノロジーで何ができるのでしょうか?

1.JSP

初めての JSP を作成する

目標: JSP ファイルの作成をマスターする

1. Webプロジェクトを作成する

Java Enterpriseを作成し、Webアプリケーションを追加し、画像の説明を追加してください
プロジェクト名と保存場所を設定し、画像の説明を追加してください
[完了]ボタンをクリックします。画像の説明を追加してください

2. アーティファクト名を変更し、プロジェクトを再デプロイします

プロジェクト構造ウィンドウでアーティファクト名を変更画像の説明を追加してください
サービス期間設定ウィンドウでプロジェクトを画像の説明を追加してください
再デプロイ [サーバー]タブに切り替え、デフォルトのブラウザを設定画像の説明を追加してください

3. ウェルカム JSP ページを作成する

Web ディレクトリに welcome.jsp を作成します 注
画像の説明を追加してください
画像の説明を追加してください
画像の説明を追加してください
: welcome.jsp ページによると、新しく作成された JSP ファイルは従来の HTML ファイルとほぼ同じです。唯一の違いは、デフォルトで作成される場合、ページ コードの先頭に追加のページ命令があり、ファイル拡張子が html ではなく jsp であることです。
welcome.jspを変更する画像の説明を追加してください

4. サーバーを起動し、結果を表示します。

サーバーを起動し、http://localhost:8080/JSPDemo/welcome.jsp にアクセスします画像の説明を追加してください
。 注: welcome.jsp のタグに追加されたコンテンツが表示されています。これは、HTML 要素が JSP コンテナーによって解析できることを意味します。実際、JSP は元の HTML ファイルに Java 固有のコードを追加するだけであり、これらは JSP 構文要素と呼ばれます。
教室での演習: 以下の図に示すように、ホームページを変更します。画像の説明を追加してください

2、JSPの基本構文

JSPページの基本構成

目標: JSP ページの基本構成を理解する

1. JSPページの構造

JSPファイルは作成できましたが、JSPファイルのページ構成については詳しく紹介していません。JSP ページには、命令マーク、HTML コード、JavaScript コード、埋め込み Java コード、注釈、JSP アクション マークなどのコンテンツが含まれる場合があります。

2. ケースデモンストレーション - システムの現在時刻を表示します。

time_info.jsp ページを作成する
画像の説明を追加してください

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP页面 - 显示系统当前时间</title>
    </head>
    <body>
        <!--JSP脚本元素-->
        <%
            Date date = new Date();
            // year, month, day, hour, minute, second
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");  
            String currentTime = sdf.format(date);
        %>
        <!--JSP表达式元素-->
        <h3 style="text-align: center">系统当前时间:<%= currentTime%></h3>
    </body>
</html>

ページ構成図
画像の説明を追加してください
サーバーを起動し、http://localhost:8080/JSPDemo/time_info.jsp にアクセスします。画像の説明を追加してください

JSPスクリプト要素

1、JSPスクリプトレット

事例紹介

デモ01.jspページを作成する
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP Scriptlets</title>
    </head>
    <body>
        <%
            int a = 100, b = 150; // 定义两个整型变量
            int sum = a + b; // 计算两个整数之后
            // 利用JSP隐式对象`out`输出结果
            out.print(a + " + " + b + " = " + sum);
        %>
    </body>
</html>

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

画像の説明を追加してください

事例デモ
demo02.jspページの作成

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP声明标识</title>
    </head>
    <body>
        <%!
            // 定义阶乘函数
            public long factorial(int n) {
                long jc = 1;
                for (int i = 1; i <= n; i++) {
                    jc = jc * i;
                }
                return jc;
            }
        %>
        <%
            // 输出10的阶乘值
            out.println("10! = " + factorial(10));
        %>
    </body>
</html>

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

事例紹介

デモ03.jspページを作成する画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP表达式</title>
    </head>
    <body>
        <%!
            int a = 100, b = 150; // 声明两个整型变量
        %>
        sum = <%= a + b%> <!--JSP表达式-->
    </body>
</html>

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

事例紹介

デモ04.jspページを作成する
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>带有JSP表达式的注释</title>
    </head>
    <body>
        <%!
            /**
             * @param a
             * @param b
             * @return a + b
             */
            public int sum(int a, int b) {
                /*
                 * a, b都是形式参数
                 */
                return a + b; // 返回两个整数之和
            }
        %>
        <%
            int a = 100, b = 150; // 定义两个整型变量
            int sum = sum(a, b); // 调用求和函数计算两个整数之和,此处a,b是实际参数
            out.print("sum = " + sum); // 输出求和结果
        %>
    </body>
</html>

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

) ケースデモ

デモ05.jspページを作成する
画像の説明を追加してください

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP注释</title>
    </head>
    <body>
        <h1>学习JSP元素</h1> <!--HTML注释:一级标题显示-->
        <%= new Date()%> <%--JSP注释:用JSP表达式元素显示当前日期--%>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo05.jsp にアクセスし、画像の説明を追加してください
開いたページでマウスの右ボタンをクリックして、ポップアップ メニューの [Web ページのソース コードの表示] オプションを選択します。画像の説明を追加してください

事例紹介

デモ06.jspページを作成する

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>动态注释</title>
    </head>
    <body>
        随机数:<%= Math.random() %> <!-- 求随机数,当前日期:<%=new Date()%> -->
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo06.jsp にアクセスし、画像の説明を追加してください
開いたページでマウスの右ボタンをクリックして、ポップアップ メニューの [Web ページのソース コードの表示] オプションを選択します。画像の説明を追加してください

事例紹介

ページ ディレクティブの共通属性のうち import 属性を除いて、他の属性は 1 回のみ出現できます。出現しない場合、コンパイルは失敗します。
エラー作成後にジャンプするページ error.jsp画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<html>
    <head>
        <title>错误页面</title>
    </head>
    <body>
        <h3 style="text-align: center">错误信息:<%= exception.getMessage() %></h3>
    </body>
</html>

デモ07.jspページを作成する画像の説明を追加してください

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP页面 - 显示系统时间</title>
    </head>
    <body>
        <!--JSP脚本元素-->
        <%
            Date date = new Date();
            // year, month, day, hour, minute, second
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
            String currentTime = sdf.format(date);
        %>
        <!--JSP表达式元素-->
        <h3 style="text-align: center">系统当前时间:<%= currentTime%></h3>
    </body>
</html>

ページ ディレクティブを表示する画像の説明を追加してください
上の赤いボックス内のコードは、ページ ディレクティブの language、contentType、pageEncoding、および import 属性を使用します。ページ ディレクティブは、記述された場所に関係なく、ページ全体に対して有効ですが、ページ ディレクティブは JSP ページの先頭に記述するのが一般的であることに注意してください。

サービス期間を開始するには、http://localhost:8080/JSPDemo/demo07.jsp にアクセスして、
画像の説明を追加してください
demo07.jsp ページを変更し、Java コードに意図的にミスをさせます。画像の説明を追加してください
サービス期間を開始するには、http://localhost:8080/JSPDemo/demo07.jsp にアクセスして、システムのデフォルトのエラー ページを表示します。demo07.jsp がエラー ページを指定する場合、error.jsp demo07.jsp がエラー ページを指定する場合、error.jsp デモ07 の場合.jsp はエラー pageerror.jsp を画像の説明を追加してください
指定画像の説明を追加してください
画像の説明を追加してください
ます画像の説明を追加してください

事例紹介

デモ08.jspページを作成する画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>欢迎页面</title>
    </head>
    <body>
        <h1 style="color: blue; text-align: center">欢迎访问JSP世界~</h1>
        <%@ include file="time_info.jsp"%>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo08.jsp にアクセスします画像の説明を追加してください
画像の説明を追加してください
。 サーバーを起動し、http://localhost:8080/JSPDemo/demo08.jsp にアクセスします。含まれているページのコンテンツも表示できます。画像の説明を追加してください

事例紹介

WEB-INF に lib ディレクトリを作成し、jar パッケージを 2 つ追加します画像の説明を追加してください
プロジェクトにライブラリを追加します画像の説明を追加してください
【ライブラリとして追加…】をクリックし画像の説明を追加してください
ます 【OK】ボタンをクリックします画像の説明を追加してください
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>JSTL核心库演示</title>
    </head>
    <body>
        <c:set var="message" value="欢迎访问JSP世界~"/>
        <h1 style="text-align: center"><c:out value="${message}"/></h1>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo09.jsp にアクセスします。画像の説明を追加してください
JSTL コア タグ ライブラリを使用しない場合は、JSP コードを使用して同じ機能を実現します。 サーバーを起動し、画像の説明を追加してください
http://localhost:8080/JSPDemo/demo09.jsp にアクセスします。画像の説明を追加してください

、ケースデモンストレーション

デモ10.jspページの作成画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>被包含的页面</title>
    </head>
    <body style="text-align: center">
        <%
            Thread.sleep(5000); // 线程休眠5秒
        %>
        红豆生南国<br>
        春来发几枝<br>
        愿君多采撷<br>
        此物最相思<br>
    </body>
</html>

demo11.jsp ページを作成し、demo10.jsp ページをインポートします。demo10.jsp はインポートされたファイルです。5 秒間停止してからコンテンツを出力します。これにより、jsp:include 要素のフラッシュ属性をテストするのに便利です。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>引入被包含的页面</title>
    </head>
    <body>
        <h3 style="text-align: center">相思</h3>
        <jsp:include page="demo10.jsp" flush="true"/>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo11.jsp にアクセスすると、ブラウザーが最初にデモ 11.jsp ページの出力コンテンツを表示し、5 秒待ってからデモ 10.jsp ページの出力コンテンツを表示することがわかります。これは、参照されているリソースデモ 10.jsp が現在の JSP ページの出力コンテンツの後に呼び出されることを示しています。
画像の説明を追加してください
demo11.jsp ページの最終的な表示効果画像の説明を追加してください

、ケースデモンストレーション

デモ12.jspページの作成
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>演示请求转发元素</title>
    </head>
    <body>
        <h1 style="text-align: center">演示请求转发元素</h1>
        <%
            Thread.sleep(5000); // 线程休眠5秒
        %>
        <jsp:forward page="welcome.jsp"/> <!--转发到欢迎页面-->
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo12.jsp にアクセスすると、ブラウザーには、demo12.jsp ページの出力コンテンツが表示されず、5 秒待つと welcome.jsp ページのコンテンツが表示されることがわかります。画像の説明を追加してください
最終的に、demo12.jsp ページにその効果が表示されます。リクエストは welcome.jsp ページに転送されますが、アドレス バーは demo12.jsp のままです。画像の説明を追加してください

事例紹介

デモ13.jspページの作成画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>演示out对象的用法</title>
    </head>
    <body>
        <%
            out.println("第1行:Web开发很有意思~<br />");
            response.getWriter().println("第2行:我们来学Web开发~<br />");
        %>
    </body>
</html>

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

事例紹介

デモ14.jspページの作成画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>演示pageContext对象</title>
    </head>
    <body>
        <%
            // 获取out对象
            JspWriter myOut = pageContext.getOut();
            // 设置page范围内属性
            pageContext.setAttribute("message", "学习Java基础编程", pageContext.PAGE_SCOPE);
            // 设置request范围内属性
            request.setAttribute("message", "学习Java Web开发");
            // 设置session范围内属性
            session.setAttribute("message", "学习Spring Boot框架");
            // 设置application范围内属性
            application.setAttribute("message", "学习大数据实时处理");
            // 获取page范围属性
            String pageMessage = (String)pageContext.getAttribute("message", pageContext.PAGE_SCOPE);
            // 获取request范围属性
            String requestMessage = (String)pageContext.getAttribute("message", pageContext.REQUEST_SCOPE);
            // 获取session范围属性
            String sessionMessage = (String)pageContext.getAttribute("message", pageContext.SESSION_SCOPE);
            // 获取application范围属性
            String applicationMessage = (String)pageContext.getAttribute("message", pageContext.APPLICATION_SCOPE);
        %>
        <%
            myOut.println("page范围消息:" + pageMessage + "<br />");
            myOut.println("request范围消息:" + requestMessage + "<br />");
            myOut.println("session范围消息:" + sessionMessage + "<br />");
            myOut.println("application范围消息:" + applicationMessage + "<br />");
        %>
    </body>
</html>

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

事例紹介

前に作成した error.jsp ページを表示する
画像の説明を追加してください
demo15.jsp ページを作成する画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java"
    pageEncoding="UTF-8" errorPage="error.jsp" %>
<html>
    <head>
        <title>演示页面异常</title>÷
    </head>
    <body>
        <%
            int a = 10;
            int b = 0;
        %>
        <%
            out.print(a + " ÷ " + b + " = " + (a / b));  // 产生异常
        %>
    </body>
</html>

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

おすすめ

転載: blog.csdn.net/qq_64505257/article/details/130982859