1.1 第一步:创建Web应用
选择【File】à【New Project】,进入新建工程界面。
在工程类别中选择【Web】,选择工程中的【Web Application】,进入Web工程设置界面。
各输入元素如下:
Project Name:工程的名字,本例使用WebTest。
Project Location:工程的位置,本例使用E:/lxc/idebook。
Server:Web应用的服务器,下拉框中列出了在服务器管理界面中添加的所有服务器,如果要使用其他服务器,可以通过服务器管理界面添加,本例使用默认的GlassFish V2作为服务器。
Java EE Version:Java EE的版本,下拉框中列出了IDE所支持的Java EE的版本,包括Java EE 5、J2EE 1.4和J2EE 1.3。本例选择Java EE 5作为应用所采用的Java EE版本。
Context Path:web应用的上下文,也就是访问web应用的方式,采用默认值即可。
Set as Main Project复选框:选中。
输入完之后,选择【Next】进入下一个界面。在下一个界面中,选择Web应用使用的框架,如果不选择,直接点击【Finish】。生成的工程的目录结构如图所示:
各文件夹说明如下:
u Web Pages:存放所有的JSP文件、HTML文件等。在开发Web应用过程中,编写的JSP和HTML文件都应该放在这个文件夹中。
u Configuration Files:存放配置文件,对于Web应用都需要一个配置文件web.xml,对于特定的应用服务器,可能会有相应的配置文件,此处使用GlassFish服务器,对应sun-web.xml配置文件。
u Source Packages:存放所有的源文件,在应用开发过程中编写的Servlet和JavaBean都应该放在这个文件夹下。
u Test Packages:存放测试文件。
u Libraries:存放应用所涉及的类库。
u Test Libraries:存放测试相关的类库。
1.2 创建包及JavaBean
选择【Source Packages】,点击右键,选择【New】à【Java Packges】,输入包名:com.idebook.web.model,点击【Finish】。
采用同样的过程创建包:com.idebook.web.controller。
创建JavaBean的过程与前面介绍的创建普通Java类的过程没有区别,生成的代码段如下:
文件名:UserBean.java 备注:通过向导生成的部分代码 /* * 用于判断用户是否是合法的用户。 */
package com.idebook.web.model;
/** * * @author 李绪成 */ public class UserBean {
} |
在类中添加两个成员变量,语句如下:
private String username;
private String userpass;
把两个属性选中,然后点击右键,在弹出式菜单中选择【Refactor】à【Encapsulate Fields…】。如图所示。
之后弹出如图所示界面。
把需要生成的相应的方法前面的复选框选中,然后点击【Refactor】,在类中会生成如下代码:
文件名:UserBean.java 备注:添加的setter方法和getter方法
public String getUsername() { return username; }
public void setUsername(String username) { this.username = username; }
public String getUserpass() { return userpass; }
public void setUserpass(String userpass) { this.userpass = userpass; } |
然后添加业务方法,代码如下:
public boolean getLogin() {
return username.equals("zhangsan") && userpass.equals("wangwu");
}
1.3 创建JSP文件
需要创建两个文件:登录界面和登录之后的界面。前者使用在创建工程的时候生成的index.jsp,后者需要单独创建。
生成的index.jsp文件的代码如下:
文件名:index.jsp <%-- 文 件 名:index 创建时间: 2008-2-12 , 11:10:44 编 写 者:李绪成 --%>
<%@page contentType="text/html" pageEncoding="GB2312"%> <!DOCTYPE HTML PUBLIC "-//W 3C //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> </title> </head> <body> <h2>欢迎登录</h2> </body> </html> |
下面通过IDE提供的功能来编写界面。双击index.jsp文件,会在编辑器中打开该文件,并且会显示“Palette”窗口,“Palette”窗口如下图所示:
注意:如果看不到“Palette”窗口,从主菜单中选择【Window】à【Palette】,或者使用Ctrl+Shift+8。
在这个窗口中列出了常用的HTML标签和JSP标签。
下面完成JSP文件的编写。
u 在<title></title>中添加标题“登录界面”。
u 在<body></body>中添加“<h2>欢迎登录</h2>”
u 添加表单元素:
n 添加Form元素:从右边的中“Palette”窗口,选择HTML Forms类别下的Form,然后拖拽到“<h2>欢迎登录</h2>”的下面,弹出如图所示的窗口。因为没有编写处理文件,只需要把提交方式修改为POST即可。然后点击【OK】,IDE会生成表单的代码。
<form method="POST">
</form>
n 添加表格:从右边的 “Palette”窗口中选择HTML类别下面的Table,然后拖拽到“</form>”之前,弹出如图所示的窗口。把行数改为3,把Border Size修改为0,点击【OK】按钮就可以把表格添加到代码中。如果生成的代码格式不好看,可以在编辑器中点击右键,在弹出式菜单中选择【Format】格式化代码。
n 添加用户名输入框:从右边的“Palette”窗口,选择HTML Forms类别下的Text Input,然后拖拽到表格的第一行第二列位置,然后弹出如图所示的界面。在Name输入框中输入“username”,其他的元素采用默认值,注意类型为text,点击【OK】按钮即可。如果需要设置默认值,可以把值写在Initial Value输入框中。
n 采用同样的方法在第二行第二列的位置添加密码框,不同的是输入元素的类型,应该选择password而不是默认的text。
n 添加提交按钮:从右边的“Palette”窗口选择HTML Forms类别下的Button,然后拖拽到表格的第三行第一列的位置。弹出如图所示的界面,然后在Label输入框中输入“登录”,这是显示在按钮上的字。其他采用默认值,注意Type单选按钮的值为“submit”,下面将要添加的重置按钮会选择“reset”。点击【OK】按钮就可以把登录按钮添加到代码中。
n 添加重置按钮:添加过程与添加提交按钮基本相同,在Label输入框中输入“重写”,Type单选按钮选择“reset”即可。
n 删除表头:从“<thead>”开始,到“</thead>”结束的代码。
n 添加输入提示信息:在第一行第一列的位置输入“用户名:”,在第二行第一列的位置输入“口令”。
u 编写登录失败提示信息,如果登录失败则显示登录失败信息,需要使用表准标签库中的判断标签。
n 添加<c:if>标签:从右边的“Palette”窗口选择JSP类别下面的JSTL If标签,然后拖拽到<html>之前,弹出如图所示的界面。在Condition输入框中输入“not empty errorinfo”,其他的采用默认值即可。如果需要保存判断的结果,可以给出Variable Name的值以及作用范围Scope的值。点击【OK】按钮即可。
n 添加提示信息:在</c:if>之前添加如下代码:
<script> alert("${errorinfo}"); </script> |
n 添加标准标签库:在工程下的Libraries目录上右键点击,在弹出菜单中选择【Add Library】,弹出如图所示界面。在该界面中选择JSTL1.1,然后点击【Add Library】按钮,jstl.jar和standard.jar两个压缩包会添加到工程中。
n 声明标准标签库中的核心标签库:可以使用IDE提供的JSP Completion功能完成。在“<%@page contentType="text/html" pageEncoding="GB2312"%>”代码的下面输入“<%”,会出现如图所示的界面,中间部分是可选的代码,下面部分是对相应代码的解释。使用上下箭头可以选择相应的代码,此处选择第三个。之后生成代码:<%@ taglib %>。忽略错误提示。继续按空格键,会出现如图所示的界面,继续输入p,则帮助列表中只剩下一项,回车即可选择。生成的代码如下:<%@ taglib prefix="" %>,在光标处输入c。然后把光标移动到“%>”之前,继续按空格键,采用同样的方法添加uri属性,然后在输入值的时候使用Ctrl+反斜线,之后会出现系统可以使用的值,选择“http://java.sun.com/jsp/jstl/core”。
通过上面的过程,登录界面就编写完了,完成后的代码如下:
文件名:index.jsp <%-- 文 件 名:index 创建时间: 2008-2-12 , 11:10:44 编 写 者:李绪成 --%>
<%@page contentType="text/html" pageEncoding="GB2312"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <c:if test="${not empty errorinfo}"> <script> alert("${errorinfo}"); </script> </c:if>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>登录界面</title> </head> <body> <h2>欢迎登录</h2> <form method="POST" action="LoginServlet"> <table> <tbody> <tr> <td>用户名:</td> <td><input type="text" name="username" value="" /></td> </tr> <tr> <td>口令:</td> <td><input type="text" name="userpass" value="" /></td> </tr> <tr> <td><input type="submit" value="登录" /></td> <td><input type="reset" value="重写" /></td> </tr> </tbody> </table> </form>
</body> </html> |
编写登录之后的界面,假设登录之后的界面为success.jsp,主要输出一句话即可,编写过程非常简单,不再介绍。
1.4 创建Servlet
在包com.idebook.web.controller上点击右键,在弹出的菜单中选择【New】à【Servlet】。如图所示,然后弹出如图所示的界面。
在Class Name输入框中输入LoginServlet,其他的采用默认值。然后点击【Next >】。进入到如图所示的界面:
采用默认值即可,如果需要添加初始化参数,可以点击右边的【Add】按钮。Servlet Name和URL Pattern都可以修改,前者在配置文件中应该惟一,后者确定了Servlet的访问方式。这些配置信息最终都会添加到配置文件web.xml中,如果之后需要修改也可以直接通过配置文件web.xml进行修改。
生成的代码如下:
文件名:LoginServlet.java /* * To change this template, choose Tools | Templates * and open the template in the editor. */
package com.idebook.web.controller;
import java.io.*; import java.net.*;
import javax.servlet.*; import javax.servlet.http.*;
/** * * @author Administrator */ public class LoginServlet extends HttpServlet {
/** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { /* TODO output your page here out.println("<html>"); out.println("<head>"); out.println("<title>Servlet LoginServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet LoginServlet at " + request.getContextPath () + "</h1>"); out.println("</body>"); out.println("</html>"); */ } finally { out.close(); } }
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code."> /** * Handles the HTTP <code>GET</code> method. * @param request servlet request * @param response servlet response */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }
/** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }
/** * Returns a short description of the servlet. */ public String getServletInfo() { return "Short description"; } // </editor-fold> } |
把processRequest方法中的代码替换成下面的代码:
processRequest中代码 // 获取用户输入信息 String username = request.getParameter("username"); String userpass = request.getParameter("userpass");
// 创建业务模型对象 UserBean user = new UserBean(); // 初始化 user.setUsername(username); user.setUserpass(userpass); // 调用业务方法 boolean login = user.getLogin();
// 根据业务方法的执行结果选择界面对用户响应 String forward; if (login) { forward = "success.jsp"; } else { request.setAttribute("errorinfo", "用户名或者口令不正确!"); forward = "login.jsp"; } // 获取Dispatcher对象 RequestDispatcher dispatcher = request.getRequestDispatcher(forward); // 完成跳转 dispatcher.forward(request, response); |
然后使用Ctrl+Shift+I引入UserBean所在的包。
最后需要修改index.jsp的Form表单元素的action属性。找到下面的代码:
<form method="POST">
修改为:
<form method="POST" action="LoginServlet">
1.5 部署和访问
在访问工程之前,需要把工程部署到服务器上。部署过程如下:选择工程,点击右键,选择【Undeploy and Deploy】,IDE会完成下面的工作:
u 如果服务器没有启动,会先启动服务器;
u 然后编译,并部署文件。
之后可以访问Web应用,访问过程如下:
打开浏览器;
在地址栏输入:http://localhost:8080/helloWeb/HelloServlet,弹出登录界面。
在登录界面输入用户名和口令,如果用户名输入“zhangsan”,口令输入“wangwu”,则进入success.jsp界面,否则返回登录界面并显示登录错误信息。