Web程序设计(JSP)实验

Web 程序设计 JSP 实验 第 1 页 共 30 页 WEBWEB 程序设计程序设计 JSP JSP 实验实验 计算机科学与信息学院 汪国武 实验一实验一 JSPJSP 实验环境组建与简单实验环境组建与简单 JSPJSP 应用应用 1 1 开发环境搭建开发环境搭建 Step1 Step1 安装和设置安装和设置 JDKJDK 以 jdk1 6 为例 安装位置 C Program Files Java jdk1 6 0 12 创建环境变量 JAVA HOME 为 C Program Files Java jdk1 6 0 12 在建环境变量 PATH 中添加 JAVA HOME bin 创建环境变量 CLASSPATH JAVA HOME lib dt jar JAVA HOME lib tools jar Step2 Step2 安装支持安装支持 JSPJSP 的的 WebWeb 服务器服务器 以 Tomcat6 0 29 为例 安装位置 d Tomcat6 Step3 Step3 安装安装 MyEclipseMyEclipse 安装 MyEclipse7 0 Step4 Step4 设置设置 Tomcat Tomcat 可以从可以从 MyEclipseMyEclipse 中直接启动中直接启动 Tomcat6Tomcat6 操作步骤 操作步骤 Window Preferences MyEclipse Enterprise Workbench MyEclipse Servers Tomcat Tomcat6 x Tomcat Server 选择 Enable Tomcat home directory d tomcat6 设置 Tomcat 运行使用的 JDK 展开 Tomcat6 x 单击 JDK 单击 tomcat JDK name 后的 Add 在打开的页面中 单击 JRE home 后的 Directory 按钮 选择输入 C Program Files Java jdk1 6 0 12 2 2 开发和运行开发和运行 JSPJSP 程序程序 创建 Web 项目 File New Web Project 如 Myjsp 新建 JSP 文件 如 firstJsp jsp 编辑 JSP 文件 可借助 DreamWeaver 发布项目到 Tomcat 右击项目名称 Myjsp MyEclipse Add and Remove Project Deployments Project 选择 Myjsp 项目 并单击 Add 弹出 Project Deployments 对话框 在对话框中 选择 server 为 Tomcat 6 x 并单击 Finish 运行测试 启动 Tomcat 6 x Web 程序设计 JSP 实验 第 2 页 共 30 页 运行 JSP 文件 浏览器中输入 http localhost 8080 Myjsp firstJsp jsp 3 3 编写一个编写一个 JavaScriptJavaScript 程序 在程序 在 JSPJSP 页面上输出当前日期 页面上输出当前日期 实验二实验二 JSPJSP 语法的应用语法的应用 实验内容和要求 实验内容和要求 1 实现客户在一个登录页面 form jsp 如图 2 1 输入登录信息并单击 确定 后跳转 到另一个页面 doForm jsp 如图 2 2 输出 用户名 和 口令 信息 图 2 1 图 2 2 要求 分别用下列三种方法实现 1 创建一个 JavaBean User 类 该类含有两个属性 username 和 password 给每个属 性增加相应的 get 和 set 方法 在 doForm jsp 页面中用动作标识实例 化 User 类对象 再使用动作标识来把客户在 form jsp 表单中填 写的值赋给对象 最后用在页面输出结果 2 创建一个 JavaBean User 类 该类含有两个属性 username 和 password 给每个属 性增加相应的 get 和 set 方法 在 doForm jsp 页面中采用 Java 以 jsp 脚本代码 scriptlet 方式实例化 User 类对象 用 setAttribute 函数把对象写入 request 或 session 中 再使用动作标识来把客户在 form jsp 表单中填写 的值赋给对象 最后用 jsp 表达式的方式把对象的信息输出到页面中 3 不创建 JavaBean User 类 在 doForm jsp 页面中用 getParameter 来获取客户 在 form jsp 表单中填写的值 最后输出相关信息 实验三实验三 JSPJSP 内置对象的应用内置对象的应用 实验内容和要求 实验内容和要求 对实验二的内容进行扩展 必须实现以下 4 个 jsp 文件 采用 jsp JavaBean 实现 1 login jsp 登录页面 如图 2 1 所示 2 doLogin jsp 无界面 登录处理页面 假定正确的用户名为 admin 口令为 123 如果用 Web 程序设计 JSP 实验 第 3 页 共 30 页 户名和口令不正确则显示登录错误信息 否则登录成功后 重定向到 messageBoard jsp 留 言板页面 可以进行留言 3 messageBoard jsp 留言板页面 能实现如图 3 1 所示的留言 图 3 1 4 showMessage jsp 显示留言信息页面 如图 3 2 所示 该页面能显示留言者 必须为 login jsp 页面中输入的用户名 标题和内容 要求能正确显示图 3 1 所示的留言内容 提示 留言者的用 session 保存 Web 程序设计 JSP 实验 第 4 页 共 30 页 图 3 2 实验四实验四 ServletServlet 的应用的应用 实验内容和要求 实验内容和要求 用 Servlet 来完成实验三的所有任务 即先登录 然后留言 再显示留言 采用 JSP JavaBean Servlet 开发模式 实验步骤如下 1 创建登录页面创建登录页面 login jsp 用户名 口 令 2 创建处理登录的创建处理登录的 Servlet DoLogin java 过程如下 过程如下 选择项目中 src 文件夹 New Servlet 弹出 Create a new Servlet 对话框 设置如下 05 为项目名称 Web 程序设计 JSP 实验 第 5 页 共 30 页 单击单击 next 后 见下图 只对后 见下图 只对 Servlet Jsp Mapping URL 作如下修改 单击作如下修改 单击 finish Web 程序设计 JSP 实验 第 6 页 共 30 页 此时此时 web xml 中应存在如下中应存在如下 Servlet 配置信息 配置信息 ServletExample firstServlet DoLogin servlet DoLogin DoLogin DoLogin 其中 其中 DoLogin行表明行表明 该该 Servlet 可以用这个可以用这个 URL 访问访问 http localhost 8080 05 DoLogin Web 程序设计 JSP 实验 第 7 页 共 30 页 DoLogin java 代码如下代码如下 package servlet import java io IOException import java io PrintWriter import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import javax servlet http HttpSession public class DoLogin extends HttpServlet 因为登录表单是以get方式提交的 所以重写doGet方法 运行时调用此方法 public void doGet HttpServletRequest request HttpServletResponse response throws ServletException IOException String userName request getParameter username 获取用户名 HttpSession session request getSession session setAttribute name userName 用户名写入session 显示留言时 showMessage jsp 需要 String passWord request getParameter password 获取口令 if userName equals admin 重定向到留言页面 else response sendError 500 登陆错误 用户名或密码不正确 3 创建留言页面创建留言页面 messageBoard jsp 留言标题 留言内容 Web 程序设计 JSP 实验 第 8 页 共 30 页 4 4 创建创建值值 JavaBeanJavaBean Message javaMessage java 同同代码代码 3 53 5 5 5 创建创建工具工具 JavaBeanJavaBean Mytools javaMytools java 同代码同代码 3 63 6 6 创建创建处理留言的处理留言的 Servlet DoMessage java 如下图 如下图 Web 程序设计 JSP 实验 第 9 页 共 30 页 DoMessage java 代码如下 代码如下 package servlet import java io IOException import java io PrintWriter import javax servlet RequestDispatcher import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse public class DoMessage extends HttpServlet 因为留言信息是以post方式提交的 所以重写doPost方法 运行时调用此方法 public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException bean valuebean Message message new bean valuebean Message Web 程序设计 JSP 实验 第 10 页 共 30 页 message setTitle request getParameter title 保存留言标题 message setContent request getParameter content 保存留言内容 request setAttribute msg message 将对象message保存到request中 下面2行实现转发到showMessage jsp RequestDispatcher dispatcher request getRequestDispatcher showMessage jsp dispatcher forward request response 7 创建显示留言页面创建显示留言页面 showMessage jsp 显示留言信息 留言者 留言标题 留言内容 Web 程序设计 JSP 实验 第 11 页 共 30 页 实验五实验五 JSPJSP 访问数据库的应用访问数据库的应用 实验要求 实验要求 采用 JSP Servlet JavaBean 架构 设计通过下列 JSP 页面访问数据库 如表 5 1 具 体要求如下 1 添加用户页面 AddUser jsp 如图 5 1 所示 2 删除用户页面 Delete jsp 如图 5 1 所示 3 查找和修改用户页面 SearchAndModify jsp 如图 5 3 所示 图 5 1 添加用户页面 图 5 2 删除用户页面 Web 程序设计 JSP 实验 第 12 页 共 30 页 图 5 3 查询和修改用户页面 实验步骤如下 实验步骤如下 1 准备需要访问的数据库 下载并安装 MySQL5 0 Copy MySQL5 0 驱动 mysql connector java 5 0 8 bin jar 到 TOMCAT lib 文件夹 下 创建数据库及表 数据库的设计如下表 数据库的设计如下表 数据库采用 MySQL5 0 数据库名 db 表名 user 用户表 表 5 1 数据库的用户表 序号序号列名列名数据类型数据类型长度长度主键主键允许空允许空默认值默认值说明说明 1usernamevarchar40 是否用户名 2passwordvarchar40 是口令 创建过程如下 创建过程如下 可选择使用 MySQL 的数据库管理和开发工具 Navicat 和 MySQL Front 等 Step1 进入 MySQL 程序的 MySQL Command Line Client 界面 如下图所示 Web 程序设计 JSP 实验 第 13 页 共 30 页 Step2 分别执行下列命令 支持中文支持中文 创建数据库 创建数据库 CREATE DATABASE db CHARACTER SET utf8 COLLATE utf8 general ci USE DB 建表建表 CREATE TABLE user username varchar 20 NOT NULL PRIMARY KEY password varchar 20 ENGINE InnoDB DEFAULT CHARSET utf8 2 开发过程如下 Step1 Step1 创建值创建值 JavaBean JavaBean User java User java 内容如下 内容如下 package valueBean public class User private String username 用户名 private String password 口令 public User this username this password public void setUsername String username this username username public String getUsername return username public void setPassword String password this password password Web 程序设计 JSP 实验 第 14 页 共 30 页 public String getPassword return password Step2 Step2 创建访问数据库的类创建访问数据库的类 AccessUserFromDB java AccessUserFromDB java 内容如下 内容如下 package toolBean db import java sql import valueBean User public class AccessUserFromDB private static Connection conn null private static Statement stmt null 构造函数中完成对数据库进行初始化 public AccessUserFromDB 创建连接 conn this getConnection try 创建 Statement stmt conn createStatement catch SQLException e e printStackTrace 将对象 user 添加到表中 public void Add User user throws SQLException String sql INSERT INTO user username password VALUES user getUsername user getPassword stmt executeUpdate sql 根据用户名 关键字 从数据库删除相应的记录 public void Delete String username throws SQLException String sql Delete From user Where username username stmt executeUpdate sql 修改数据库中的 user public void Update User user throws SQLException String sql UPDATE user set password user getPassword where username user getUsername stmt executeUpdate sql Web 程序设计 JSP 实验 第 15 页 共 30 页 根据用户名称 关键字 从数据库中查找记录 并将找到的记录写入对象 user 中返 回 public User searchByUsername String username throws SQLException User user new User String sql select from user where username username ResultSet rs stmt executeQuery sql while rs next String name rs getString username if name equals username 将从数据库查找得到的记录存入对象 user 中 user setUsername name user setPassword rs getString password if rs null rs close return user return null 查找不到返回 null 根据用户判断该记录是否存在 public boolean exists String username boolean rtn false try if searchByUsername username null rtn true catch SQLException e e printStackTrace return rtn 建立与数据的连接 private Connection getConnection String driverClass com mysql jdbc Driver String url 与创建数据库的代码结合 保证访问数据库时不出现乱码 jdbc mysql localhost 3306 db useUnicode true String username root String password 123 Web 程序设计 JSP 实验 第 16 页 共 30 页 try Class forName driverClass 加载数据库驱动 catch ClassNotFoundException e e printStackTrace try conn DriverManager getConnection url username password 建立连 接 catch SQLException e e printStackTrace System out print 数据库连接失败 return conn 关闭与访问数据库有关连接 protected void finalize try if stmt null stmt close if conn null conn close catch SQLException e e printStackTrace Step3 Step3 创建创建 JSPJSP 文件以及相应的文件以及相应的 JavaBeanJavaBean 创建创建 添加用户页面添加用户页面 AddUser jsp AddUser jsp 代码如下 代码如下 添加用户 添加用户 Web 程序设计 JSP 实验 第 17 页 共 30 页 用户名 密码 相应的添加用户相应的添加用户 Servlet AddUser java Servlet AddUser java 代码如下 代码如下 package servlet user import java io IOException import java io PrintWriter import java sql SQLException import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import toolBean db AccessUserFromDB import valueBean User public class AddUser extends HttpServlet public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException 返回上页 String goBack 返回上页 response setContentType text html charset gb2312 PrintWriter out response getWriter String username request getParameter username if username null username equals out print 用户名不能为空 out print goBack Web 程序设计 JSP 实验 第 18 页 共 30 页 String password request getParameter password User user new User user setUsername username user setPassword password AccessUserFromDB userDB new AccessUserFromDB if userDB exists user getUsername out print 用户名已存在 out print goBack return try userDB Add user catch SQLException e e printStackTrace out print 添加失败 e getLocalizedMessage out print goBack return out print 添加成功 out print goBack out close 创建删除用户页面创建删除用户页面 Delete jsp Delete jsp 代码如下 代码如下 删除用户 删除用户 Web 程序设计 JSP 实验 第 19 页 共 30 页 输入删除的用户名 相应的删除用户相应的删除用户 ServletServlet DeleteUser java DeleteUser java 的代码 如下 的代码 如下 package servlet user import java io IOException import java io PrintWriter import java sql SQLException import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import toolBean db AccessUserFromDB import valueBean User public class DeleteUser extends HttpServlet public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException 返回上页 String goBack 返回上页 response setContentType text html charset gb2312 PrintWriter out response getWriter String username request getParameter username if username null username equals out print 用户名不能为空 out print goBack AccessUserFromDB userDB new AccessUserFromDB if userDB exists username Web 程序设计 JSP 实验 第 20 页 共 30 页 out print 用户名不存在 out print goBack return try userDB Delete username catch SQLException e e printStackTrace out print 删除失败 e getLocalizedMessage out print goBack return out print 删除成功 out print goBack out close 创建查找和修改页面创建查找和修改页面 SearchAndModify jsp SearchAndModify jsp 代码如下 代码如下 查询和修改用户 Web 程序设计 JSP 实验 第 21 页 共 30 页 查询和修改用户 输入查询的用户名 用户名 input name modfyName type text value readonly readonly 密码 input name password type text value 删除用户 添加用户 修改用户的修改用户的 ServletServlet ModifyUser java ModifyUser java 代码如下 代码如下 package servlet user import java io IOException import java io PrintWriter import java sql SQLException import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import valueBean User public class ModifyUser extends HttpServlet public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException Web 程序设计 JSP 实验 第 22 页 共 30 页 返回上页 String goBack 返回上页 response setContentType text html charset gb2312 PrintWriter out response getWriter String name request getParameter modify if name null 单击了 修改用户 String username request getParameter modfyName String password request getParameter password User user new User user setUsername username user setPassword password toolBean db AccessUserFromDB dbUser new toolBean db AccessUserFromDB try dbUser Update user catch SQLException e e printStackTrace out print 修改失败 e getLocalizedMessage out print goBack return out print 修改成功 out print goBack out close 思考题 思考题 1 当数据库中存贮中文信息时 如何在 jsp 页面中显示中文 2 考虑将添加 删除 查找 所有 用户及修改用户集成到一个 JSP 页面中 实验六实验六 JSPJSP 访问数据库的综合应用访问数据库的综合应用 实验内容和要求 实验内容和要求 对实验五作进一步的改进 完成实验五中的思考题 1 和 2 实现结果如图 6 1 所示 具体如下 输入用户名和口令 查询结果显示在表中 不输入任何内容查找则显示所有用户 单击 删除 将先进行确认再作删除 单击 修改 将进入修改页面对所在行的用户信息作 修改 Web 程序设计 JSP 实验 第 23 页 共 30 页 图 6 1 实验内容和要求 实验内容和要求 在完成实验五任务的基础上 作如下改动 Step1 将处理数据库的将处理数据库的 AccessUserFromDB 中的 private Connection getConnection 改为 public static Connection getConnection 目的是方便调用获取数据库的连接 Step2 添加包含增删改查的页面 ShowAllUsers jsp 代码如下 用户名 密码 Web 程序设计 JSP 实验 第 24 页 共 30 页 用户名 口令 表中内容 得到查找的用户和口令值 String username request getParameter username String password request getParameter password 得到查找的SQL String sql select from user where 1 1 if username if password 获取连接 Connection conn AccessUserFromDB getConnection 向数据库发送SQL指令 Statement stmt conn createStatement 执行指令并得到结果 ResultSet rs stmt executeQuery sql 处理结果 while rs next String name rs getString username 支持显示中文用户名 if name 支持显示中文口令 String pass rs getString password if pass 输出一行4列 out print out print name out print pass 删除 需要确认 out print 删除 修改 out print 修改 Web 程序设计 JSP 实验 第 25 页 共 30 页 out print if rs null rs close 添加用户 Step3 将 DeleteUser java 中的函数名doPost 改名为 DoGet 实验七实验七 StrutsStruts 入门入门 实验内容和要求 实验内容和要求 用 Struts 来完成实验三的所有任务 即先登录 然后留言 再显示留言 要求登录处 理和留言处理均用 Struts 实现 参考答案 参考答案 准备 新建一个 web 项目 添加 Struts 支持 右击项目名称 MyEclipse Add Struts Capabilities 1 实现登录处理 Step1 打开 struts config xml 文件 切换到 design 视图 在其区域任一位置右击 New Form Action and JSP 打开创建 FormBean 对话框 如图 7 1 Use case 输入 login 然后选定下方的 Form Properties 标签 并单击 Add 添加 username 和 password 两个属性 结果见图 7 1 选定 JSP 标签 设置如图 7 2 之后 单击 next 按钮 进入创建 Action 对话框 如图 7 3 选定 Forwards 标签 创建登录成功 succ 和失败 fail 如图 7 4 两个 Forward 创建 结果如图 7 5 实现 LoginAction 中的 execute 方法 public ActionForward execute ActionMapping mapping ActionForm form HttpServletRequest request HttpServletResponse response LoginForm loginForm LoginForm form if loginForm getUsernam