网络应用程序设计（idea版）——实验三：Web组件重用与JavaBeans

心已赠人 2023-09-30 22:33 7阅读 0赞

**目录**

实验预习报告

一、实验目的

二、实验原理

三、实验预习内容

实验报告

一、实验目的

二、实验要求

三、实验内容及要求

--------------------

## 实验预习报告 ##

### **一、实验目的** ###

1. 理解静态包含和动态包含的概念，掌握相关指令和动作的使用；

2. 掌握JavaBeans的含义和创建方法；

3. 重点掌握在JSP页面中使用JavaBeans的标准动作。

### **二、实验原理** ###

通过重用Web组件可以提高应用程序开发的效率和其可维护性。在JSP中可以通过包含机制和JavaBean实现Web组件的重用。

包含分为静态包含和动态包含。静态包含通过include指令实现，动态包含通过标准动作<jsp:include>实现。

在JSP页面中使用JavaBean是最重要的组件重用技术，这主要是通过下面3个标准动作实现的：

<jsp:useBean>

<jsp:setProperty>

<jsp:getProperty>

### **三、实验预习内容** ###

1. 静态include指令何时执行？主页面和被包含的子页面是否转换为一个转换单元？

同一个转换单元的页面之间如何共享数据？

静态包含是在JSP页面转换阶段将另一个文件的内容包含到当前JSP页面中。静态include指令与主页面同时执行；主页面和被包含的子页面是转换为一个转换单元；同一个转换单元的页面之间通过request作用于共享。

2. <jsp:include>动作指令何时执行？主页面和被包含的子页面是否转换为一个转换单元？动作包含的子页面与主页面共享同一个请求吗？在不同的转换单元中如何进行数据的传递和共享？

jsp:include动作指令与main.jsp页面分别编译执行；主页面和被包含的子页面是转换为一个转换单元；动作包含的子页面与主页面共享同一个请求。

3. <jsp:forward>动作与<jsp:include>动作有什么相同点和不同点？与<jsp:forward>动作等价的其他两种写法如何表示？

转发到的页面处理完后并不将控制转回主页面。

<% RequestDispatcher view=request.getRequestDispatcher(? other.jsp? ) ;

View.forward(request,response) ;%>

< % pageContext.forward(? other.jsp? ) ;%>

4. 什么是JavaBean？

JavaBeans是Java平台的组件技术，在Java Web开发中常用JavaBeans来存放数据、封装业务逻辑等，从而很好地实现业务逻辑和表示逻辑的分离，使系统具有更好的健壮性和灵活性。

5. 访问JavaBean的三个JSP动作中<jsp:useBean>动作的常用属性有哪些？这些属性各有什么作用？

useBean动作的常用属性有：id属性：用来唯一标识一个bean实例。scope属性：指定bean实例的作用域。class属性：指定创建bean实例的java类。type属性：指定由id属性声明的变量的类型。session属性: 你可以在同一次会话的任意一个页面使用该JavaBean对象，该JavaBean对象在整个会话期间一直存在。使用jsp:useBean/创建JavaBean对象的页面的<%＠page %>指令元素的session属性值必须设置为true。

## 实验报告 ##

### **一、实验目的** ###

1. 理解静态包含和动态包含的概念，掌握相关指令和动作的使用；

2. 掌握JavaBeans的含义和创建方法；

3. 重点掌握在JSP页面中使用JavaBeans的标准动作。

### **二、实验要求** ###

1. 实验前进行预习，完成实验预习报告；

2．按照每一项实验内容进行上机实践与编程，将程序源代码和运行结果图附在实验报告中实验内容对应的部分。

3. 实验预习报告和实验报告打印装订在一起。

4. 将每一次实验的源代码按目录组织保存并压缩，按照老师指定的要求进行提交。代码保存方式如：exp03表示实验三Web项目的名称，其下保存各项实验内容的源文件及相关资源，将整个exp03文件夹进行压缩后命名为班级-姓名-实验03，如：计171-张三-实验03。

### **三、实验内容及要求** ###

1. include静态指令的使用。

创建名称为exp03的Web项目，编写hello.jsp页面，其中声明一个变量userName，用于获取请求地址后查询串参数userName的值；使用<%@ include>静态指令包含response.jsp页面，通过response.jsp页面显示userName的值，用下面两种方法实现。执行代码并查看运行结果。

方法一：response.jsp页面中通过JSP表达式直接输出变量userName的值。

方法二：通过pageContext作用域属性，在主页面和子页面间共享userName的值，降低主页面和子页面的依赖性。

hello.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>hello</title>
    </head>
    <body>
    <%! String username;%>
    <%@ include file="response.jsp"%>
    </body>
    </html>

response.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>response</title>
    </head>
    <body>
    <%--<% username=request.getParameter("username");%>--%>
    <%--Hello,<%=username%><br/>--%>
    <% pageContext.setAttribute("username",request.getParameter("username"),PageContext.REQUEST_SCOPE);%>
    <%= pageContext.getAttribute("username",PageContext.REQUEST_SCOPE)%>
    </body>
    </html>

![d4339805134f4972ae8c4be5fdb0ef4d.png][]

2. <jsp:include>动作指令的使用。

编写main.jsp页面，其中声明一个变量userName，用于获取请求地址后查询串参数userName的值；在main.jsp页面中使用<jsp:include>动作包含subpage.jsp页面，通过subpage.jsp页面显示userName的值；执行代码并查看运行结果。

main.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>main</title>
    </head>
    <body>
    <%! String username;%>
    <jsp:include page="subpage.jsp"></jsp:include>
    </body>
    </html>

subpage.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>subpage</title>
    </head>
    <body>
    <% String username=(String)request.getParameter("username");%>
    <%= username %>
    </body>
    </html>

![846bc7534211428db7c373710520249b.png][]

3. <jsp:useBean>、<jsp:setProperty>、<jsp:getProperty>动作的使用

从HTML页面login.html中输入用户名和口令等，然后提交给display. jsp页面，在该页面中通过JavaBeans保存数据并输出。

【步骤1】创建UserBean.java，包含username, password, email三个私有数据成员和相应的访问器和设置器。

UserBean.java:

package com.example;
    
    public class UserBean {
        private String username;
        private String password;
        private String email;
        public UserBean(){
        }
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    
        public String getEmail() {
            return email;
        }
    
        public void setEmail(String email) {
            this.email = email;
        }
    
        public UserBean(String username,String password,String email){
            this.username=username;
            this.password=password;
            this.email=email;
        }
    }

【步骤2】编写登录页面login.html，部分代码如下，补充关键代码：

<html>

<body>

Please input:<br>

UserName:<input type="text" name="username"><br>

Password:<input type="password" name="password"><br>

Email:<input type="text"name="email"><br>

</form>

</body>

</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>login</title>
    </head>
    <body>
    Please input:<br>
    <form action="display.jsp" method="post">
        UserName:<input type="text" name="username"><br>
        Password:<input type="password" name="password"><br>
        Email:<input type="text"name="email"><br>
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

【步骤3】编写display.jsp页面，使用JavaBeans显示输入的信息，部分代码如下，补充关键代码：

<%@ page import="com.beans.UserBean" %>

<jsp:useBean id="user" class= "UserBean">

<jsp:setProperty name="user" property="\*"/>

</jsp:useBean>

<html>

<body>

UserName:<jsp:getPropertyname="user"property="username"/><br>

Password: <jsp:getProperty name="name" property="password"/> <br>

Email: <jsp:getProperty name="user" property="email"/>  <br>

</body>

</html>

display.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ page import="com.example.UserBean" %>
    <jsp:useBean id="user" class="com.example.UserBean">
        <jsp:setProperty name="user" property="*"/>
    </jsp:useBean>
    <html>
    <head>
        <title>display</title>
    </head>
    <body>
        UserName:<jsp:getProperty name="user" property="username"/><br>
        Password:<jsp:getProperty name="user" property="password"/><br>
        Email:<jsp:getProperty name="user" property="email"/><br>
    </body>
    </html>

![42c60f5f9e814c51a0087daae03bf3e8.png][]

![2868f07393b84887b58d5932398805c9.png][]

4. 使用JavaBean构造一个简单的计算器，能够进行“+、—、\*、/”运算。

【步骤1】编写实现简单计算器的JavaBean：SimpleCalculator.java，包含first、second、operator、result四个成员变量和相应的访问器与设置器，一个calculator方法根据运算符获取运算结果。

SimpleCalculator:

package com.example;
    
    public class SimpleCalculator {
    
        private float first;
        private float second;
        private String  operator;
        private float result;
    
        public SimpleCalculator() {}
    
        public float getFirst() {
            return first;
        }
    
        public void setFirst(float first) {
            this.first = first;
        }
    
        public float getSecond() {
            return second;
        }
    
        public void setSecond(float second) {
            this.second = second;
        }
    
        public String getOperator() {
            return operator;
        }
    
        public void setOperator(String operator) {
            this.operator = operator;
        }
        public float calculate(float first,float second,String operator)
        {
            switch(operator)
            {
                case "+": result=first+second;break;
                case "-": result=first-second;break;
                case "*": result=first*second;break;
                case "/": result=first/second;break;
                default: ;break;
            }
            return result;
        }
    }

【步骤2】编写calculate.jsp页面，用户通过表单输入两个操作数和运算符，调用该页面自身处理该表单，通过调用SimpleCalculator类的实例实现运算逻辑，并显示运算结果。

calculate.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"
             pageEncoding="utf-8"%>
    <jsp:useBean id="calculator" class="com.example.SimpleCalculator">
        <jsp:setProperty name="calculator" property="*"/>
    </jsp:useBean>
    <!DOCTYPE html >
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>calculate</title>
    
    </head>
    <body>
    <%
        try
        {
            float first=calculator.getFirst();
            float second=calculator.getSecond();
            String  op=calculator.getOperator();
            out.print("计算结果为："+calculator.getFirst()+calculator.getOperator()+calculator.getSecond()+"="
                    +calculator.calculate(first, second, op));
        }catch(Exception e)
        {
            e.printStackTrace();
        }
    
    %>
    <br/>
    <form action="calculate.jsp" method="post">
        第一个操作数：<input type="text" name="first">
        <select name="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        第二个操作数：<input type="text" name="second"><br/>
        <input type="submit" value="计算" >
    </form>
    </body>
    </html>

![87479db3762e4deeb312f37379a0f39a.png][]

![70c4437b9aca4cd7bdc30afebf0b6a7e.png][]

**四、思考题**

1. 什么是Model 1体系结构，有何缺点？

答：model1体系每个请求的目标都是jsp页面。Jsp页面负责完成所有任务并将响应发送给客户。缺点：①特需要将大量的Java代码的业务逻辑嵌入到jsp页面中；②不能提高组件的可重用性。

2. 什么是MVC设计模式？其优点是什么？

答：将web应用组件分成模型、控制器、视图三部分，每种组件完成各自的任务，该结构的所有请求目标都是servlet，充当控制器，servlet分析请求并将所需要的数据收集到JavaBean对象，该对象作为模型，最后servlet将请求转发到jsp，有jsp调用JavaBean中的数据并产生响应。

3. 实现MVC设计模式的一般步骤是什么？

答：（1）定义JavaBeans存储数据；

（2）使用Servlet处理请求；

（3）结果与存储；

（4）转发请求到JSP页面；

（5）从JavaBeans对象中提取数据。

如有建议或想法，欢迎一起讨论学习~

[d4339805134f4972ae8c4be5fdb0ef4d.png]: https://img-blog.csdnimg.cn/d4339805134f4972ae8c4be5fdb0ef4d.png
[846bc7534211428db7c373710520249b.png]: https://img-blog.csdnimg.cn/846bc7534211428db7c373710520249b.png
[42c60f5f9e814c51a0087daae03bf3e8.png]: https://img-blog.csdnimg.cn/42c60f5f9e814c51a0087daae03bf3e8.png
[2868f07393b84887b58d5932398805c9.png]: https://img-blog.csdnimg.cn/2868f07393b84887b58d5932398805c9.png
[87479db3762e4deeb312f37379a0f39a.png]: https://img-blog.csdnimg.cn/87479db3762e4deeb312f37379a0f39a.png
[70c4437b9aca4cd7bdc30afebf0b6a7e.png]: https://img-blog.csdnimg.cn/70c4437b9aca4cd7bdc30afebf0b6a7e.png