实验一动态网页设计基础 实验目的 : 1 掌握 HTML 的常用标签 2 掌握 HTML 设计基本网页 3 掌握 HTML 设计网络中常用的表单 4 了解 JavaScript 的简单应用, 实验环境 : 操作系统 Windows XP 或更高版本实验内容 : 1 编写一个简单的学生信息注册页面, 包括学号 姓名 密码 专业, 其中学号 姓名用单行文本框 密码使用密码框 专业使用下拉菜单 ; 2 使用框架将一个页面均分为四个区域, 每个区域显示不同的网页 ; 3 在文本框输入任意一个整数, 求该整数的阶乘 通过按钮的单击事件, 并将结果显示在结果文本框中 实验步骤 : 1 编写一个简单的学生信息注册页面, 包括学号 姓名 密码 专业, 其中学号 姓名用单行文本框 密码使用密码框 专业使用下拉菜单 ; 如下图所示 ( 要求 : 使用表格布局 ) 2 使用框架将一个页面均分为四个区域, 每个区域显示不同的网页 1
3 在文本框输入任意一个整数, 求该整数的阶乘 通过按钮的单击事件, 并将 结果显示在结果文本框中 注意事项 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验 说明 : 1 实验性质 : 验证性 2 建议学时 :3 学时 2
实验二 JSP 的开发和运行环境搭建 实验目的 : 1 了解 JSP 开发环境安装与配置 ; 2 了解 JSP 开发的一般步骤 ; 3 熟悉简单 JSP 页面的开发实验环境 : 操作系统 Windows XP 或更高版本实验内容 : 1 环境配置; 2 编写一个 JSP 页面, 计算出 100 以内的素数 实验步骤 : 1 环境配置 JSP 编程使用的 Java 语言, 所以运行 JSP 程序必须要有 JVM 的支持, 还必须要有 Java 程序编辑 编译程序 (JDK) 的支持 现在企业流行的集成开发环境是 Eclipse 大多数应用程序都需要连接数据库, 所以需要 DBMS 的支持 JSP 应用程序是运行在服务器上的, 所以需要 Web 服务器的支持, 在此以 Java 1.6 Update21 Tomcat MySQL Eclipse 为例, 安装配置 JSP 开发环境 首先安装 JDK: 从 Java 公司官方网站 (http://www.oracle.com/technetwork/java/index.html) 下载 JDK, 现在最新的是 Java SE6 Update22, 我们采用的 JDK1.6 Update 21, 只需要双击中下载到的 EXE 文件, 点下一步即可安装 JDK 安装好后, 需要配置 Java 的环境变量, 步骤如下 : (1) 我的电脑 -> 属性 -> 高级选项卡 -> 环境变量, 打开 环境变量 对话框, 在系统变量中新建以下环境变量 : 1 JAVA_HOME : 表示 Java SDK 的安装目录, 其值为 : D:\Program Files\Java\jdk1.6.0_21( 根据自己的实际安装位置进行调整 ) 2 并修改 Path 环境变量, 在其中增加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 注意 : 对于 Path 环境变量是添加, 而不要删除原来的内容, 否则很多 Windows 功能不能使用 ; 若有其他程序要用到自己的 Java 环境变量, 请将第 3 步的内容添加到 Path 环境变量的最后, 以免影响其他程序的运行 字母不区分大小写, 大写字母是遵照 Java 环境变量配置习惯 (2) 测试 3
打开 Windows 的命令行窗口 ( 开始 -> 运行, 在弹出的窗口中输入 cmd 回车 ), 输入 javac 然后回车, 若能显示 javac 的帮助信息, 说明 JDK 安装成功, 如下图所 示 图 1-1 环境变量配置检验其次安装 Tomcat: 在 Tomcat 官方网站 (http://tomcat.apache.org/) 上下载 Tomcat, 现在最新版本是 7.x, 但还没有 Eclipse 插件, 因此不能集成到 Eclipse 集成开发环境中, 这里使用 6.028 这个版本 安装时只需要一路 next 即可, 安装完成后, 也不需要设置环境变量, 只要在 IE 浏览器地址栏中输入 :http://localhost:8080 回车, 若能出现 Tomcat 界面说明安装成功, 如下图所示 最后安装 Eclipse: 下载 Eclipse 安装包, 解压即可 图 1-2 tomcat 配置检验 4
2 编写一个 JSP 页面, 计算出 100 以内的素数 (1) 创建 Web 项目打开 Eclipse 开发环境, 选择 File->New->Web Project, 或在 Package Explorer 中右击选择 New->Web Project, 在打开的对话框中, 输入项目名 firstjsp, 并选定 Java EE 5.0 规范支持, 点击 Finish 如图 1-3 所示 图 1-3 Eclipse 新建 Web 项目 (1) 创建 JSP 文件右单击 firstjsp 项目的 WebRoot 目录,New->JSP 新建 JSP 页面 如图 1-12 所示 图 1-4 新建 JSP 页面 (2) 输入文件名 number.jsp, 并选择 Default JSP template, 点击确定 在页面的 <body> 标签中, 输入以下代码 : 5
<%@ page language="java" contenttype="text/html; charset=gb2312" pageencoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>insert title here</title> </head> <body> <P> 100 以内的素数有 :<BR> <%... // 求素数的算法 %> </body> </html> 并保存 (3) 运行按按钮启动 Tomcat 服务器, 在 IE 或其他浏览器的地址栏中输入 : http://localhost:8080/demo/number.jsp, 出现如下界面 6
注意事项 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:1 学时 7
实验三 JSP 语法 实验目的 : 1 掌握 JSP 变量 / 方法, 表达式, 代码段和注释的使用方法 ; 2 掌握 JSP 指令的语法格式及用法 ; 3 掌握 JSP 常用动作的语法格式及用法 ; 实验环境 : 操作系统 Windows XP 或更高版本以及配有 JSP 开发环境的计算机实验内容 : 1 JSP 页面结构 2 include 指令, 创建两个 jsp 文件分别为 a.jsp 和 b.jsp, 将 b.jsp 页面使用 include 指令嵌入到 a.jsp 页面中 ; 3 include 动作, 创建两个 jsp 文件分别为 a.jsp 和 b.jsp, 将 b.jsp 页面使用 include 动作嵌入到 a.jsp 页面中 ; 4 forward 动作, 在 a.jsp 页面中使用 forward 动作将该页面重新定向到 b.jsp 页面中实验步骤 : 1 JSP 页面结构说明 : 以后代码如无特殊说明均写在 <body> 标签中 (JSP 代码可以写在网页的任何位置 ) 1.1 声明变量与方法新建一 JSP 页面, 输入以下代码 (1) 声明变量 <%! int i=0; %> <% out.println("i="+i++); %> 刷新你写的页面几次, 观察到什么结果, 从结果中你得到什么启示? (2) 输入以下代码 <%! public int max(int a, int b){ if (a>b){ return a; 8
} return b; } %> <% out.println("<h1>3 和 5 中较大的是 "+max(3,5)+"</h1>"); %> 将上面变量和方法的声明, 写在 out.println(); 代码段之后, 再访问你写的 JSP 页面, 观察结果, 你得到什么启示? 1.2 JSP 表达式在 JSP 页面中输入以下代码 <h1><%=max(3,5) %></h1> <h1><%=(i+a+c)/3 %></h1> <h1><%=date.tostring() %></h1> <%! public int max(int a, int b){ if (a>b){ return a; } return b; } int i = 3, a = 5, c=4; Date date = new Date(); %> 通过上面的代码, 你认为 JSP 表达式可以出现什么 Java 元素? 1.3 JSP 代码段在 JSP 页面中输入以下代码, 从以下代码的书写中, 你发现了什么重要提示?(<% %> 中的代码段, 无论写在多少个分离的 <% %> 标签中, 都必须完整, 即符合 Java 语法, 比如大括号必须匹配等 ) <% int grade = 80; switch(grade/10){ case 10:; case 9: 9
%> <h1> 你的成绩为优秀!</h1> <% break; case 8:; case 7: %> <h1> 你的成绩为良好!</h1> <% break; case 6: %> <h1> 你的成绩为及格!</h1> <% break; default: %> <h1> 你的成绩为不及格!</h1> <%} %> 1.4 JSP 注释输入以下代码, 访问你的 JSP 查看页面源文件, 你看到了什么? 说明什么问题? <!-- <%=new Date().toString() %> --> <%-- <%=new Date().toString() %> --%> 2 include 指令, 创建两个 jsp 文件分别为 a.jsp 和 b.jsp, 将 a.jsp 页面使用 include 指令嵌入到 b.jsp 页面中 2.1 include 指令 (1) 新建 a.jsp 页面, 在页面中输入以下代码, 而且只保留如下代码 : <% int a=5, b=8, c=6; out.println("<h1>hello World!</h1>"); 10
%> (2) 编写 b.jsp 页面, 在其中输入以下代码 : <%@ include file="a.jsp" %> 并在 <body> 中输入以下代码 : <%=a+b+c %> (3) 启动 Tomcat 服务器, 访问 b.jsp, 观察结果 3 include 动作, 创建两个 jsp 文件分别为 a.jsp 和 b.jsp, 将 b.jsp 页面使用 include 动作嵌入到 a.jsp 页面中 新建 a.jsp 页面, 在其中输入以下代码 : <jsp:include page="b.jsp"></jsp:include> <%=a+b+c %> 观察编辑器有什么提示? 并想一想,include 指令和 include 动作有什么异同? 4 forward 动作, 在 a.jsp 页面中使用 forward 动作将该页面重新定向到 b.jsp 页面中 注意事项 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:4 学时 11
实验四 JSP 内置对象 实验目的 : 1 了解 HTTP 协议和 HTTP 消息格式 2 掌握 JSP 内置对象 request response session application out 的作用及使用方法 3 理解 request response session 对象的生命周期和在 web 设计中的重要性实验环境 : 操作系统 Windows XP 或更高版本以及配有 JSP 开发环境的计算机 实验内容 : 1 编写一个页面显示九九乘法表 2 设计两个 JSP 页面 a.jsp 和 b.jsp,a.jsp 页面使用表单提交数据给 b.jsp 页面, 要求 a.jsp 通过 text 方式提交一个字符串给 b.jsp,b.jsp 页面获取 a.jsp 提交的字符串, 并使用 Java 表达式显示这个字符串及其长度 3 请编写 JSP 页面 inputnumber.jsp 和 getnumber.jsp inputnumber.jsp 页面使用表单通过 text 方式提交一个数字给 getnumber.jsp 页面, getnumber.jsp 计算并显示这个数的平方和立方实验步骤 : 1 编写一个页面显示九九乘法表 <%@ page language="java" contenttype="text/html; charset=gb2312" pageencoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>insert title here</title> </head> <body> <P> 九九乘法表 :<BR> <%... // 算法 %> </body> </html> 12
2 设计两个 JSP 页面 a.jsp 和 b.jsp,a.jsp 页面使用表单提交数据给 b.jsp 页面, 要求 a.jsp 通过 text 方式提交一个字符串给 b.jsp,b.jsp 页面获取 a.jsp 提交的字符串, 并使用 Java 表达式显示这个字符串及其长度 a.jsp <%@ page language="java" contenttype="text/html; charset=gb2312" pageencoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>insert title here</title> </head> <body> // 创建 a.jsp 页面的表单 </body> </html> b.jsp <%@ page language="java" contenttype="text/html; charset=gb2312" pageencoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>insert title here</title> </head> <body> // 在 b.jsp 页面接收 a.jsp 页面提交的信息 </body> </html> 3 请编写 JSP 页面 inputnumber.jsp 和 getnumber.jsp inputnumber.jsp 页面 使用表单通过 text 方式提交一个数字给 getnumber.jsp 页面, getnumber.jsp 13
计算并显示这个数的平方和立方 inputnumber.jsp <%@ page language="java" contenttype="text/html; charset=gb2312" pageencoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>insert title here</title> </head> <body>... // 创建 inputnumber.jsp 页面的表单 </body> </html> getnumber.jsp <%@ page language="java" contenttype="text/html; charset=gb2312" pageencoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>insert title here</title> </head> <body>... // 接收 inputnumber.jsp 页面提交的数据并计算 平方和立方 </body> </html> 14
注意事项 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:4 学时 15
实验五 JavaBean 与表单处理 实验目的 : 1 掌握如何创建一个 JavaBean; 2 掌握使用 JavaBean 技术处理表单 实验环境 : 操作系统 Windows XP 或更高版本以及配有 JSP 开发环境的计算机 实验内容 : 创建三个文件 Info.jsp showinfo.jsp 和 show.java, 其中 Info.jsp 让用户输入信息, showinfo.jsp 页面则是利用 show.java 这个 JavaBean 中的方法将用户输入的信息一一显示 要求在 <jsp:setproperty> 动作元素下分别使用 property= * 和 property= Property param= ParamName 两种方式设置 JavaBean 中的属性 图 4-1 Info.jsp 页面 16
实验可参考教材 P186 例 7-6 图 4-2 showinfo 页面结果注意事项 : 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:4 学时 17
实验六 JSP 中的文件操作 实验目的 : 1 了解 JSP 中的数据流 2 了解 File 类, 掌握文件相关的操作, 如读写和创建删除目录等 实验环境 : Eclipse 集成开发平台 Tomcat 服务器 实验内容 : 1 创建 D:/info.txt 的 File 对象, 并判断该对象是否为一个文件, 首先判断该文件是否存在, 如果存在, 则进一步判断该对象是否为一个文件 ; 如果不存在, 则创建该文件 ; 2 在 info.jsp 页面中任意输入一条信息, 点击提交后, 将该信息无覆盖地写入 D: /info.txt 文件中, 并将写入的信息显示在页面中 ; 3 参考教材 P210 第 5 题实验步骤 : 1 创建 D:/info.txt 的 File 对象, 并判断该对象是否为一个文件, 首先判断该文件是否存在, 如果存在, 则进一步判断该对象是否为一个文件 ; 如果不存在, 则创建该文件 <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>insert title here</title> </head> <body>...// 代码补充完整 </body> </html> 2 在 info.jsp 页面中任意输入一条信息, 点击提交后, 将该信息无覆盖地写入 D: /info.txt 文件中, 并将写入的信息显示在页面中 <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 18
"http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>insert title here</title> </head> <body>...// 代码补充完整 </body> </html> 3 参考教材 P210 第 5 题 <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>insert title here</title> </head> <body>...// 代码补充完整 </body> </html> 注意事项 : 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:4 学时 19
试验七 数据库操作 实验目的 : 1 了解关系数据库 MySQL; 2 掌握 MySQL 的安装和配置步骤 ; 3 掌握 MySQL 中的一些常用操作 ; 4 熟悉 MySQL 中常用查询语句 实验环境 : Eclipse 集成开发平台 Tomcat 服务器和 MySQL 数据库 实验内容 : 1 编写一个学生信息注册页面, 并把学生信息写入数据库名称为 stuinfo 的数据库中 ; 2 编写一个学生登录页面( 从 stuinfo 数据库中读取学生信息 ) 实验步骤 : 1 编写一个学生信息注册页面, 并把学生信息写入数据库名称为 stuinfo 的数据库中 <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>insert title here</title> </head> <body>...// 代码补充完整 </body> </html> 2 编写一个学生登录页面( 从 stuinfo 数据库中读取学生信息 ) <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> 20
<title>insert title here</title> </head> <body>...// 代码补充完整 </body> </html> 注意事项 : 1 认真填写实验报告 2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:6 学时 21
实验八 Servlet 应用 实验目的 : 1 熟悉 Servlet 接口及其中规定的方法和意义 ; 2 掌握 Servlet 编写 部署和运行 3 了解如何实现 Servlet 接口来编写 Servlet; 4 掌握 GenericsServlet 和 Http- -Servlet 抽象类 ; 5 掌握 ServlerRequest 和 Servlet- -Response 接口 ; 6 掌握 HttpServletRequest 和 Http- -SerlvetResponse 接口 实验环境 : Eclipse 集成开发平台 Tomcat 服务器 实验内容 : 1 编写一个 Servlet 2 部署 Servlet 3 执行 Servlet 实验步骤 : 1 编写一个 Servlet 自己实现 Servlet 有几种方法 :(1) 实现 Servlet 接口 ;(2) 继承 HttpServlet 类 ; (3) 继承 GenericServlet 类 一般情况下, 需要继承 HttpServlet 或 GenericServlet 类, 因为这样可以不必考虑与容器的交互 GenericServlet 可以处理各种网络请求, 而 HttpServlet 只能处理 Http 请求 (1) 在 com.phoenix.test 包下新建一个类 FirstServlet, 并使它继承 HttpServlet 类, 写入以下代码 在 Source->Override/Implements methods 菜单中, 选择要覆盖的基类中的方法 package com.phoenix.test; import java.io.ioexception; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; public class FirstServlet extends HttpServlet { @Override protected void doget(httpservletrequest req, HttpServletResponse resp) throws ServletException, IOException { 22
dopost(req, resp); } @Override protected void dopost(httpservletrequest req, HttpServletResponse resp) throws ServletException, IOException { String username = req.getparameter("username"); username = "Hello "+username; req.setattribute("username",username); req.getrequestdispatcher("/success.jsp").forward(req, resp); } } (2) 新建 ServletReq.jsp 页面, 输入以下代码 <form action="firstservlet"> <p> 姓名 :<input type="text" name="username"/></p> <p><input type="submit" value=" 提交 "/></p> </form> (3) 新建 Success.jsp, 作为 Servlet 执行完毕后跳转的目标页面 <h1><%=request.getattribute("username") %></h1> 2 部署 Servlet 在项目的 WebRoot\WEB-INF\web.xml 文件中, 添加以下代码 <servlet> <servlet-name>firstservlet</servlet-name> <servlet-class>com.phoenix.test.firstservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>firstservlet</servlet-name> <url-pattern>/firstservlet</url-pattern> </servlet-mapping> 3 执行 Servlet 部署项目 ( 注意只要修改了配置文件, 就要重新部署项目, 并重启服务器 ) 启动服务器, 请求 ServletReq.jsp 页面, 在其中输入姓名, 点提交观察运行结果 注意事项 : 1 认真填写实验报告 23
2 遵守实验室各项制度, 服从实验指导教师的安排 3 按规定的时间完成实验说明 : 1 实验性质: 验证性 2 建议学时:4 学时 24