西北农林科技大学：《J2EE技术》课程教学资源（实验指导）实验1 在Eclipse中开发Web应用

实验1.在Eclipse中开发Web应用 实验内容 在这个实验中，将学习在Eclipse+MyEclipse8.6集成开发环境下创建Web应用，创建 JSP、JavaBean、Servlet,并测试。 实验目的 ◆掌握Eclipse中Web应用的开发以及在Tomcat中的部署和访问。 ◆掌握JSP、JavaBean和Servlet的开发。 实验介绍 本实验将实现一个简单的登录功能，用户在登录界面输入用户名和口令。用户名和口 令需要进行客户端验证。如果输入的用户名和口令合法，会出现成功页面。如果用户名或口 令不合法， 则出现登 失收页面。 由于登录功能是通过MVC模式进行设计的，因此，在实现的时候也是采用分层实现的 方式。在这个实验中，将首先建立一个Wb应用，名字是myweb::然后进行视图层的实现， 涉及3个JSP页面：login jsp,.failure.jsp,success.jsp:接着进行模型层的实现，涉及1个 再接着是控制层的实现涉及1个Servleta:servlets.LoginServlet: 最后对整个Web应用进行测试 环境要求 服务器：Tomcat6.0 集成开发环境：Eclipse+MyEclipse8.6 实验指导 步骤1：创建Web应用myweb L.创建web工程 a)在主菜单中选择【File】→【New】→【Web Project】,出现New Web Project 对话框。如果没有【Web Project】则选择【File】→【New】→【Other】,在 弹出的菜单中再选择【Web Project】

实验 1. 在 Eclipse 中开发 Web 应用 实验内容 在这个实验中，将学习在 Eclipse+MyEclipse 8.6 集成开发环境下创建 Web 应用，创建 JSP、JavaBean、Servlet，并测试。 实验目的 ◆ 掌握 Eclipse 中 Web 应用的开发以及在 Tomcat 中的部署和访问。 ◆ 掌握 JSP、JavaBean 和 Servlet 的开发。 实验介绍 本实验将实现一个简单的登录功能，用户在登录界面输入用户名和口令。用户名和口 令需要进行客户端验证。如果输入的用户名和口令合法，会出现成功页面。如果用户名或口 令不合法，则出现登录失败页面。 由于登录功能是通过 MVC 模式进行设计的，因此，在实现的时候也是采用分层实现的 方式。在这个实验中，将首先建立一个 Web 应用，名字是 myweb；然后进行视图层的实现， 涉及 3 个 JSP 页面：login.jsp,failure.jsp,success.jsp；接着进行模型层的实现，涉及 1 个 JavaBean：beans.LoginBean；再接着是控制层的实现涉及 1 个 Servlet：servlets.LoginServlet； 最后对整个 Web 应用进行测试。 环境要求 服务器：Tomcat6.0 集成开发环境：Eclipse+MyEclipse 8.6 实验指导 步骤 1：创建 Web 应用 myweb 1. 创建 Web 工程 a) 在主菜单中选择【File】→【New】→【Web Project】，出现 New Web Project 对话框。如果没有【Web Project】则选择【File】→【New】→【Other】，在 弹出的菜单中再选择【Web Project】

New Web Project 回☒ Cr eate a Web Project reate a web project in the workspace or an external location Web Proiect Details Proiect Nane myweb Location ☑Use default location Directory D:\nyapp\HyEclipse 6.0\workspaceinyveb Browse. sre Web root folder WebRoot T2EE Specification Level O5ava里50OJ2理1.4OJ2E1.3 JSTL Support Add JSTL libraries to WEB-INF/lib folder? JSTL 1.1 iih☐Cacl b)在New Web Project对话框的【Project Name】文本框中输入myweb::J2EE Specification Level项选择“Java EE5.0”,点击【Finish】按钮。 c)观察【package】视图中出现如下内容，表示Web应用myweb创建成功， 回nb sre 田=JRE Systen Library 日C-WE-I级 合1ib d)注意Web应用的文档结构(WebRoot下的内容)，其中classes文件夹需要将 视图转换为Resource视图才能看到

b) 在 New Web Project 对话框的【Project Name】文本框中输入 myweb；J2EE Specification Level 项选择“Java EE 5.0”，点击【Finish】按钮。 c) 观察【package】视图中出现如下内容，表示 Web 应用 myweb 创建成功。 d) 注意 Web 应用的文档结构（WebRoot 下的内容），其中 classes 文件夹需要将 视图转换为 Resource 视图才能看到

白白YebRoot 于合ETA-IF 白EB-IF 配文件中的内。 ing-"0TF-82> file-list> index.jsp 2.配置服务器 a在工具栏点击按钮，出现下拉莱单 MyEclipse Derby 4 Configure Server b)选择Configure Server,出现如下窗口，在该窗口进行相应配置。 ⊙2rfac:15 回 Tomcat6× G:\apsche-tondat-0 rovse G:\agache-toncat-6.0. G:\apacha-tonaat-6.0 rovse.. (?

e) 注意 web.xml 配置文件中的内容。 index.jsp 2. 配置服务器 a) 在工具栏点击 按钮，出现下拉菜单 b) 选择Configure Server，出现如下窗口，在该窗口进行相应配置

c)启动服务器如下图所示： yEclipse Derby MyEelipse Toncat Toncat B.x Start itop Server Configure Server 得anage Deployments.. Configure Server Connector 3. 部署Web应用 )在工具栏点击部署按钮，出现Project eplots对话框。 ⊙Froject Deployments Manage Deployments Deploy and udeploy J2EE projects. Project nyweb Deployments Server Type Location Add Renove Redeploy Browse b)在Project Deployments对话框的【Project】下拉列表框中选择“yweb”. 点击【Add】按钮，出现New Deployment对话框。 ⊙ev Deploynent 回 New Deployment Create nev project deployment for nyweb 星eb Project: Server Edit server comnectors. Deploy type: Deploy Location:G:\JavaEServer\apache-toncat-6.0.18\webappsmyweb c) 在New Deployment对话框中，【Server】下拉列表框选择Tomcat6.O,点击 【Finish】,回到Project Deployments对话框。点击【OK】即可

c) 启动服务器如下图所示： 3. 部署 Web 应用 a) 在工具栏点击 部署按钮，出现 Project Deployments 对话框。 b) 在 Project Deployments 对话框的【Project】下拉列表框中选择“myweb”。 点击【Add】按钮，出现 New Deployment 对话框。 c) 在 New Deployment 对话框中，【Server】下拉列表框选择 Tomcat6.0，点击 【Finish】，回到 Project Deployments 对话框。点击【OK】即可

⊙ew Deployment 回X Create new project deployment for nyweb 冒eb Project: Server: Deploy Location:G:JavaEServerlapache-toncat-8.0.18\webappsmyeb d)在Project Deployments对话框中，【Remove】表示别除己经部署的工程： 【o老示断备罗使的以道宽已登烤的应用.女 中 用 位 "C:\bea\user pro jects\domains\base domain'\autodeploy\myweb". 4.访问测试Wb应用 a)如果1 omcat服务器没有启动，则先启动服务器。在工具栏点击调·的箭头按 钮，选择【Tomcat6.0】→【Start。 b)打开浏览器。这里可以使用yEclipse内置的浏览器。点击工具栏中的9按 钮，出现【yEclipse Web Browser】,在地址栏输入 http://localhost:8080/myweb/index.isp http://localhost:8080/myw 出现如下运行结果，表示b应用访问成功。注意 index..jsp在eb.xml中 己经配置为默认访问文件，因此在访问地址中可以省略。 步豫2：创建SP页面 L在Web应用的根路径下制建login.isD a)在主菜单中选择【Ne】【USP(dvance Templaes】或者右键点击工程 上的【WebRoot】并在弹出菜单中选择【N w】→【UsP(Advanced Templates)】, 都会弹出Create a new JSP Page对话框。在File Path中输入或确认 myweb/WebRoot,.在File Name中输入login jsp,点击【Finish】. b)注意：如果没有【JSP(Advanced Templates)】则选择【NeW】→【Other】,在 弹出的菜单中再选择【MyEclipse】→【Web】→【JSP】。 ●Create a new JSP page. 日回☒ JSP Wizard File Path: /nyweb/WebRoot Browse..: Fi1ene Template to use Default JSP template

d) 在 Project Deployments 对话框中，【Remove】表示删除已经部署的工程； 【Redeploy】表示重新部署；点击【Browse】则可以浏览已经部署的应用。如 本 实 验 中 ， 部 署 的 Web 应 用 位 于 “C:\bea\user_projects\domains\base_domain\autodeploy\myweb”。 4. 访问测试 Web 应用 a) 如果 Tomcat 服务器没有启动，则先启动服务器。在工具栏点击 的箭头按 钮，选择【Tomcat6.0】→【Start】。 b) 打开浏览器。这里可以使用 MyEclipse 内置的浏览器。点击工具栏中的 按 钮，出现【 MyEclipse Web Browser 】 ， 在 地 址 栏 输 入 http://localhost:8080/myweb/index.jsp 或 http://localhost:8080/myweb, 出现如下运行结果，表示 Web 应用访问成功。注意：index.jsp 在 web.xml 中 已经配置为默认访问文件，因此在访问地址中可以省略。 步骤 2：创建 JSP 页面 1. 在 Web 应用的根路径下创建 login.jsp。 a) 在主菜单中选择【New】→【JSP（Advanced Templates）】或者右键点击工程 上的【WebRoot】并在弹出菜单中选择【New】→【JSP（Advanced Templates）】， 都会弹出 Create a new JSP Page 对话框。在 File Path 中输入或确认 /myweb/WebRoot，在 File Name 中输入 login.jsp,点击【Finish】。 b) 注意：如果没有【JSP（Advanced Templates）】则选择【New】→【Other】，在 弹出的菜单中再选择【MyEclipse】→【Web】→【JSP】

2.编写login.jsp的代码，如下： ent Type- text/html.charset-gb2312" function isValidate(form) ∥得到用户输入的信息 userame-form.username.value userpass=form.userpass value. ∥判断用户名长度 if(!minLength(username.6)) c心用户名长度小于6位！” form.username.focus() return false: if(!maxLength(username.8)) alert(用户名长度大于8位"方 form.username.focus(); return false; ∥判断口令长度 if(minLength(userpass,6)) alert(口令长度小于6位！"方 form.userpass focus() if(!maxLength(userpass,8)) aert(口令长度大于8位！" form user return true: 验证是否满足最小长度 function minLength(str.length) if(str.length>=length)

2. 编写 login.jsp 的代码，如下： function isValidate(form) { // 得到用户输入的信息 username = form.username.value; userpass = form.userpass.value; // 判断用户名长度 if(!minLength(username,6)) { alert("用户名长度小于 6 位！"); form.username.focus(); return false; } if(!maxLength(username,8)) { alert("用户名长度大于 8 位！"); form.username.focus(); return false; } // 判断口令长度 if(!minLength(userpass,6)) { alert("口令长度小于 6 位！"); form.userpass.focus(); return false; } if(!maxLength(userpass,8)) { alert("口令长度大于 8 位！"); form.userpass.focus(); return false; } return true; } // 验证是否满足最小长度 function minLength(str,length) { if(str.length>=length)

return true. else return false; ∥判断是否满足最大长度 function maxLength(str.length) if(str.length 用户登陆 用户登录 用户名： 口令： 3 访问测试login. )如果 Tomcat没有启动，则启动Tomcat b)打开浏览器，输入地址http://ocalhost:8080 myweh//login isp。 ©)出现登录界面，并且客户端验证正确，并且提交后地址栏的地址为 “htp://localhos:8080/myweb/ogin”则表示测试成功。 同样方法在web应用的根路径下创建success jsp 编写success,jp的代码，如下： %@page contentType="text/html.charsct=gb2312%> 登录成功 S{sessionScope..userid,您好，欢迎登录网上书店！

return true; else return false; } // 判断是否满足最大长度 function maxLength(str,length) { if(str.length 用户登陆 用户登录 用户名： 口令： 3. 访问测试 login.jsp。 a) 如果 Tomcat 没有启动，则启动 Tomcat。 b) 打开浏览器，输入地址 http://localhost:8080/myweb/login.jsp。 c) 出现登录界 面，并 且客户端 验证正 确，并且 提交后 地址栏的 地址为 “http://localhost:8080/myweb/login”则表示测试成功。 4. 同样方法在 Web 应用的根路径下创建 success.jsp。 5. 编写 success.jsp 的代码，如下： 登录成功 ${sessionScope.userid}您好，欢迎登录网上书店！

6.同样方法访问测试success.jsp. 打开浏览器， 入地址 host:8080/mvweb/success isp 出现“您好，欢迎登录网上书店！”表示测试成功。 7. 同样方法在Web应用的根路径下创建failure.jsp. 8.编写failure.jsp的代码，如下： %@page contentType="text/html:charset-gb2312 登录失败 h2>用户名或者口令不正确，请重新登录！ 9.同样方法访问测试failure.jsp,出现“用户名或者口令不正确，请重新登录！”表示 测试成功。 步臻3：创建JavaBean 创建包 在工程上的【sc】点击右键，在弹出莱单中选择【New】【package】,在Names 文本框中输入beans,点击【Finish】。 2.创建Java类 a)在工程上的【src】→【beans】点击右键，在弹出菜单中选择【New】→【class】, 在Names文本框中输入LoginBean,并选中“public static void main(String] args)”点击【Finish】

6. 同样方法访问测试 success.jsp。 a) 如果 Tomcat 没有启动，则启动 Tomcat。 b) 打开浏览器，输入地址 http://localhost:8080/myweb/success.jsp。 c) 出现“您好，欢迎登录网上书店！”表示测试成功。 7. 同样方法在 Web 应用的根路径下创建 failure.jsp。 8. 编写 failure.jsp 的代码，如下： 登录失败 用户名或者口令不正确，请重新登录！ 9. 同样方法访问测试 failure.jsp，出现“用户名或者口令不正确，请重新登录！”表示 测试成功。 步骤 3：创建 JavaBean 1. 创建包 在工程上的【src】点击右键，在弹出菜单中选择【New】→【package】，在 Names 文本框中输入 beans，点击【Finish】。 2. 创建 Java 类 a) 在工程上的【src】→【beans】点击右键，在弹出菜单中选择【New】→【class】， 在 Names 文本框中输入 LoginBean，并选中“public static void main(String[] args)”点击【Finish】

ew Java C1ass 回☒ Java Class Source folder myweb/src Package beans ☐inclosing te Modifiers: ⊙pub1ic Odefault private●protecte ☐abstract☐finl☐ctatig Superelass java lang Object Browss... Interfaces sdd.. Which method stubs would you like to create? ☑public static void mainString[]rgs） Constructors fron superclass Do you want to add red in the propartiss of the current project? Einish☐Cancel b)编写LoginBean的validate方法，如下： public boolean validate(String username,String userpass) if(username==nullluserpass==null) return false: return username.equals(userpass) cd)在LoginBean的main方法中编写代码测试。 public static void main(String[]args){ LoginBean test new LoginBean(); E南的用户名日令运 an,“z ngsan")). System.out.printIn(" 错误的用户名口令，返回 +test.validate("zhangsan","123456)): 右键点击工程中的LoginBean,,弹出菜单选择【Run as】→【Java Application】

b) 编写 LoginBean 的 validate 方法，如下： public boolean validate(String username,String userpass){ if(username==null||userpass==null) return false; return username.equals(userpass); } c) 在 LoginBean 的 main 方法中编写代码测试。 public static void main(String[] args){ LoginBean test = new LoginBean(); System.out.println(" 正确的用户名口令，返回 "+test.validate("zhangsan","zhangsan")); System.out.println(" 错 误 的用户名口令，返 回 "+test.validate("zhangsan","123456")); } 右键点击工程中的 LoginBean，弹出菜单选择【Run as】→【Java Application】

运行Java程序，在控制台出现如下结果，表示测试成功。 正确的用户名口今，返回t 错误的用户名口令，返回fals 步4：创建Servlet 1.创建包 a)在工程上的【src】点击右键，在弹出菜单中选择【New】→【package】,在 Names文本框中输入servlets,点击【Finish】. 2. 创建Sc 国金的【心】)【】点击右谜，在出来中选择e习 【Servlet】,在Name文本框中输入LoginServlet,点击【Next】,出现Create a new Servlet对话框。 b)注意：如果没有【Servlet】则选择【eW】→【Other】,在弹出的菜单中再选 择【MyEclipse】→【eb】→【Servlet】 回x Servlet Wizard Generate/llap web.xml file Servlet/JSP Class Hane servlets.LoginServlets Servlet/TSP Happine URI File Eath of web.xnl /myweb/WebRoot/WEB-INF Browse... Display Nane: This is the display name of my J2 component This is the description of my J2EE component 〈aek☐xt☐inih☐Cancel c)在Create a new Servlet对话框中，修改Servlet/JSP Name为：“LoginServlets”, 点击【Finish】。注意：创建Servlet之后会自动修改配置文件Web.xml。如下：

运行 Java 程序，在控制台出现如下结果，表示测试成功。 正确的用户名口令，返回 true 错误的用户名口令，返回 false 步骤 4：创建 Servlet 1. 创建包 a) 在工程上的【src】点击右键，在弹出菜单中选择【New】→【package】，在 Names 文本框中输入 servlets，点击【Finish】。 2. 创建 Servlet a) 在工程上的【src】→【servlets】点击右键，在弹出菜单中选择【New】→ 【Servlet】，在 Name 文本框中输入 LoginServlet，点击【Next】，出现 Create a new Servlet 对话框。 b) 注意：如果没有【Servlet】则选择【New】→【Other】，在弹出的菜单中再选 择【MyEclipse】→【Web】→【Servlet】。 c) 在 Create a new Servlet 对话框中，修改 Servlet/JSP Name 为：“LoginServlets”， 点击【Finish】。注意：创建 Servlet 之后会自动修改配置文件 web.xml。如下：