JSP实验（实现统计页面点击次数）

亦凉 2024-03-25 13:15 79阅读 0赞

## JSP实验（实现统计页面点击次数） ##

### 实验内容 ###

一、实验目的

1.  学习 JSP 技术编程的步骤和方法。
2.  具体掌握 JSP 指令元素、脚本元素、动作元素、HTML 元素、注  
    释元素、内置对象，以及相关 Cookie 技术的编程。
3.  熟练运用 Eclipse 创建 Dynamic Web Project，开发相应的 JSP 组件，  
    并进行 Project 部署、运行等操作处理。  
    二、实验内容及步骤
4.  创建并部署 Dynamic Web Project “JSPDemo”。  
    首先，运行 Eclipse，按照“实验一 Java EE 开发与运行环境  
    搭建”中创建 Dynamic Web Project 的步骤，创建名为 JSPDemo 的  
    Dynamic Web Project。  
    其次，右键选择 Servers 视图中 Tomcat V8.5 Server，并选择  
    “Add and Remove→将项目 JSPDemo 从 Available 窗口中迁移至  
    Configured 窗口中→Finish”，完成 JSPDemo 在 Tomcat 服务器中的  
    部署。
5.  编写 JSPDemo 中运用指令元素（page）、脚本元素（普通脚本、表  
    达式脚本）、动作元素（jsp:forward、jsp:param）和内置对象  
    （request）等编程的 JSP 组件示例，并部署 JSPDemo、运行其中  
    相应的 JSP 组件。  
    参照教材“2.1.5 JSP 动作标签”中“例 2.1.1”，使用  
    jsp:forward、jsp:param动作元素，实现请求转发及对随机数  
    的处理。  
    具体地，首先，按照“实验一 Java EE 开发与运行环境搭建”  
    中创建 Dynamic Web Project 中 JSP 组件的步骤，分别创建示例相  
    应的三个 JSP 组件，完成源代码的编写并保存。  
    其次，启动 Tomcat 服务器，在浏览器 URL 地址栏输入相应  
    的访问该示例入口 JSP 组件的网址，查看程序运行结果并观察客  
    户端 URL 地址是否发生跳转，了解jsp:forward动作元素仅在服  
    务器端执行跳转的特点。
6.  编写并运行 JSPDemo 中运用指令元素（page）、脚本元素（普通脚  
    本、表达式脚本）和内置对象（session、application）等编程的 JSP  
    组件示例。  
    参照教材“2.2.5 全局对象 application”中“例 2.2.3”，使用  
    JSP 内置对象 session 和 application，统计页面的访问人数。  
    具体地，在 JSPDemo 中，进一步创建示例相应的一个 JSP  
    组件，完成源代码的编写并保存，再确认 Tomcat 已正常启动，  
    在浏览器 URL 地址栏输入访问该示例 JSP 组件的网址，查看程  
    序运行结果。  
    进一步地，为加深对 JSP 内置对象作用范围的理解，将上述  
    示例 JSP 组件中内置对象 application 均修改为 session 并保存，重  
    新在浏览器 URL 地址栏输入访问该示例 JSP 组件的网址，查看  
    程序运行结果有无变化，分析相应的原因何在。  
    三、课外练习  
    参照教材“2.2.7 Cookie 信息的建立与使用”中“例 2.2.4”，  
    实现 Cookie 信息的建立与读取。  
    具体地，在 JSPDemo 中，进一步创建示例相应的两个 JSP 组  
    件，完成使用 response、request 内置对象进行 Cookie 创建及读取  
    的相应JSP组件源代码的编写并保存，再确认Tomcat 已正常启动，  
    在浏览器 URL 地址栏输入访问该示例入口 JSP 组件的网址，查看  
    程序运行结果，并体会超链接标签执行页面跳转有何特点。  
    四、实验小结及思考  
    思考并掌握 JSP 页面程序如何具体被转换、编译和执行的工  
    作原理，并自行对实验中所遇到的问题及其解决方法进行归纳和  
    小结。  
    在 Eclipse 中，将上述 Dynamic Web Project “JSPDemo”通  
    过 Export 方式打包导出，并自行保存备查。

### 操作方法 ###

这里使用IDEA进行演示

*  创建Maven项目  
    配置按照我这里来填写  
    ![在这里插入图片描述][6aad02221bd34933bce5013738298c5c.png]
 *  这是项目结构 ![在这里插入图片描述][420c785f99a041139c5bcd3abb65b1be.png]
 *  在这个webapp下面防止jsp文件  
    ![在这里插入图片描述][b1ec1ed81ba148fb883324b38bf83297.png]
 *  点击上面配置tomcat  
    ![在这里插入图片描述][5832c6d55ae5456da8915ab05b33517c.png]
 *  点击这里的tomcat  
    ![在这里插入图片描述][02431e91bb5f43349ccb6b1224002aca.png]  
    ![在这里插入图片描述][533c8178786a46d99a82c7b52bfc2a04.png]
 *  部署项目  
    ![在这里插入图片描述][6d17517b5d784b5b9dda5a8fc8a53e4b.png]  
    ![在这里插入图片描述][69c74d5b10c84e4d8c05c3aa0c5e31e8.png]
 *  部署完成之后点击运行  
    ![在这里插入图片描述][bf3a45e29a6c41fd8b03e708a8de753b.png]
 *  运行结果  
    默认访问index.jsp文件  
    ![在这里插入图片描述][284707b2e14f413288db9c8408bd84b2.png]

![在这里插入图片描述][15496202ec174bb8adbfe47b4a4cb3a1.png]

*  创建jsp文件  
    ![在这里插入图片描述][2d0ce64814b34fee9ea7ef8406b63707.png]

**项目结构**  
![在这里插入图片描述][8d42bdbff7ba4d2ab2c1efb0d79729cb.png]

*  include.jsp运行效果

<%--
      Created by IntelliJ IDEA.
      User: 31288
      Date: 2023/3/13
      Time: 22:27
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
    <%! int cnt;%>
    <hr align="center" width="90%" />
        <p align="center">
        本页面被访问了<%=cnt++%>次。<br/>
        信息工程学院版权所有 2023
    </p>

**运行结果**  
![在这里插入图片描述][51124f47d6cf4a9b96edd6a5b42fcf60.png]

*  content.jsp

<%--
      Created by IntelliJ IDEA.
      User: 31288
      Date: 2023/3/13
      Time: 22:14
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page language="java" import="java.util.*,java.text.SimpleDateFormat" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
    <html>
        <head>
            <meta http-equiv="content-type" contentType="text/html; charset=UTF-8"></meta>
            <title>Include指令的使用</title>
        </head>
        <body>
            <h1 align="center">欢迎来到Java Web社区</h1>
            <%
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy年M月d日 HH:mm:ss");
                String date = sdf.format(new Date());
            %>
            <h3 align="center">服务器当前时间是<%=date %></h3>
            <%@include file="include.jsp" %>
        </body>
    </html>

**运行结果**  
![在这里插入图片描述][029f0a55819d43ed8b158cfcc4e7e4ed.png]

[6aad02221bd34933bce5013738298c5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/56898f5f94954f35823c3d6c989a3064.png
[420c785f99a041139c5bcd3abb65b1be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e58a66516790419abafaf986677fc209.png
[b1ec1ed81ba148fb883324b38bf83297.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5a04e76e217c40949cfaddf88751447a.png
[5832c6d55ae5456da8915ab05b33517c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/48389965ccc84997a5cbd000b034b51d.png
[02431e91bb5f43349ccb6b1224002aca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7090d2b6135d4582ab5b170aa1096cc9.png
[533c8178786a46d99a82c7b52bfc2a04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/93d5cafadee74c2c9bbb0ffc0d0b4e26.png
[6d17517b5d784b5b9dda5a8fc8a53e4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0f8afef35b5f4e57acdfe52f692e2fc5.png
[69c74d5b10c84e4d8c05c3aa0c5e31e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6dd9e820859e48528c07f610cc8af86a.png
[bf3a45e29a6c41fd8b03e708a8de753b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/408c33f87a67492aa88c808acbeae20d.png
[284707b2e14f413288db9c8408bd84b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c8f3ae9d6d314a839cf2ca44328ccc9c.png
[15496202ec174bb8adbfe47b4a4cb3a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/402e0b90b5fa4ff390f5e44984f73841.png
[2d0ce64814b34fee9ea7ef8406b63707.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a7b5d8826e0a4c699437d00107ba38a5.png
[8d42bdbff7ba4d2ab2c1efb0d79729cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8d49efd3e35947a99ec1fe04f008f807.png
[51124f47d6cf4a9b96edd6a5b42fcf60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7e7b9e550d074b2d8cdb398935df93d8.png
[029f0a55819d43ed8b158cfcc4e7e4ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/78409572833647a689f259638f06910e.png