NetBeans中Web应用的开发

1.1 第一步:创建Web应用

选择【FileàNew Project】,进入新建工程界面。

在工程类别中选择【Web】,选择工程中的【Web Application】,进入Web工程设置界面。

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 382.5pt; HEIGHT: 263.25pt" type="#_x0000_t75"><imagedata o:title="New Web Application" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"></imagedata></shape>

各输入元素如下:

Project Name:工程的名字,本例使用WebTest

Project Location:工程的位置,本例使用E:\lxc\idebook

ServerWeb应用的服务器,下拉框中列出了在服务器管理界面中添加的所有服务器,如果要使用其他服务器,可以通过服务器管理界面添加,本例使用默认的GlassFish V2作为服务器。

Java EE VersionJava EE的版本,下拉框中列出了IDE所支持的Java EE的版本,包括Java EE 5J2EE 1.4J2EE 1.3。本例选择Java EE 5作为应用所采用的Java EE版本。

Context Pathweb应用的上下文,也就是访问web应用的方式,采用默认值即可。

Set as Main Project复选框:选中。

输入完之后,选择【Next】进入下一个界面。在下一个界面中,选择Web应用使用的框架,如果不选择,直接点击【Finish】。生成的工程的目录结构如图所示:

<shape id="_x0000_i1026" style="WIDTH: 147pt; HEIGHT: 209.25pt" type="#_x0000_t75"><imagedata o:title="Web应用目录结构" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image003.png"><font size="3"></font></imagedata></shape>

各文件夹说明如下:

u Web Pages:存放所有的JSP文件、HTML文件等。在开发Web应用过程中,编写的JSPHTML文件都应该放在这个文件夹中。

u Configuration Files:存放配置文件,对于Web应用都需要一个配置文件web.xml,对于特定的应用服务器,可能会有相应的配置文件,此处使用GlassFish服务器,对应sun-web.xml配置文件。

u Source Packages:存放所有的源文件,在应用开发过程中编写的ServletJavaBean都应该放在这个文件夹下。

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…】。如图所示。

<shape id="_x0000_i1027" style="WIDTH: 306pt; HEIGHT: 276pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image005.png"><font size="3"></font></imagedata></shape>

之后弹出如图所示界面。

<shape id="_x0000_i1028" style="WIDTH: 271.5pt; HEIGHT: 209.25pt" type="#_x0000_t75"><imagedata o:title="添加getter和setter(二)" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image007.png"><font size="3"></font></imagedata></shape>

把需要生成的相应的方法前面的复选框选中,然后点击【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

创建时间:<chsdate w:st="on" year="2008" month="2" day="12" islunardate="False" isrocdate="False"><span lang="EN-US">2008-2-12</span></chsdate>, 11:10:44

编 写 者:李绪成

--%>

<%@page contentType="text/html" pageEncoding="GB2312"%>

<!DOCTYPE HTML PUBLIC "-//W<chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</chmetcnv>//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”窗口如下图所示:

<shape id="_x0000_i1029" style="WIDTH: 108pt; HEIGHT: 228pt" type="#_x0000_t75"><imagedata o:title="Web应用组件Palette" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image009.png"><font size="3"></font></imagedata></shape>

注意:如果看不到“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>

<shape id="_x0000_i1030" style="WIDTH: 213.75pt; HEIGHT: 130.5pt" type="#_x0000_t75"><imagedata o:title="Web应用添加form" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image011.png"><font face="Times New Roman" size="3"></font></imagedata></shape>

n 添加表格:从右边的 “Palette”窗口中选择HTML类别下面的Table,然后拖拽到“</form>”之前,弹出如图所示的窗口。把行数改为3,把Border Size修改为0,点击【OK】按钮就可以把表格添加到代码中。如果生成的代码格式不好看,可以在编辑器中点击右键,在弹出式菜单中选择【Format】格式化代码。

<shape id="_x0000_i1031" style="WIDTH: 276pt; HEIGHT: 162.75pt" type="#_x0000_t75"><imagedata o:title="Web应用插入表格" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image013.png"><font size="3"></font></imagedata></shape>

n 添加用户名输入框:从右边的“Palette”窗口,选择HTML Forms类别下的Text Input,然后拖拽到表格的第一行第二列位置,然后弹出如图所示的界面。在Name输入框中输入“username”,其他的元素采用默认值,注意类型为text,点击【OK】按钮即可。如果需要设置默认值,可以把值写在Initial Value输入框中。

<shape id="_x0000_i1032" style="WIDTH: 243.75pt; HEIGHT: 173.25pt" type="#_x0000_t75"><imagedata o:title="Web应用添加用户名" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image015.png"><font size="3"></font></imagedata></shape>

n 采用同样的方法在第二行第二列的位置添加密码框,不同的是输入元素的类型,应该选择password而不是默认的text

n 添加提交按钮:从右边的“Palette”窗口选择HTML Forms类别下的Button,然后拖拽到表格的第三行第一列的位置。弹出如图所示的界面,然后在Label输入框中输入“登录”,这是显示在按钮上的字。其他采用默认值,注意Type单选按钮的值为“submit”,下面将要添加的重置按钮会选择“reset”。点击【OK】按钮就可以把登录按钮添加到代码中。

<shape id="_x0000_i1033" style="WIDTH: 231.75pt; HEIGHT: 184.5pt" type="#_x0000_t75"><imagedata o:title="Web应用添加登录按钮" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image017.png"><font size="3"></font></imagedata></shape>

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】按钮即可。

<shape id="_x0000_i1034" style="WIDTH: 275.25pt; HEIGHT: 109.5pt" type="#_x0000_t75"><imagedata o:title="Web应用添加提示错误信息" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image019.png"><font size="3"></font></imagedata></shape>

n 添加提示信息:在</c:if>之前添加如下代码:

<script>

alert("${errorinfo}");

</script>

n 添加标准标签库:在工程下的Libraries目录上右键点击,在弹出菜单中选择【Add Library】,弹出如图所示界面。在该界面中选择JSTL1.1,然后点击【Add Library】按钮,jstl.jarstandard.jar两个压缩包会添加到工程中。

<shape id="_x0000_i1035" style="WIDTH: 173.25pt; HEIGHT: 152.25pt" type="#_x0000_t75"><imagedata o:title="添加JSTL库" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image021.png"><font size="3"></font></imagedata></shape>

n 声明标准标签库中的核心标签库:可以使用IDE提供的JSP Completion功能完成。在“<%@page contentType="text/html" pageEncoding="GB2312"%>”代码的下面输入“<%”,会出现如图所示的界面,中间部分是可选的代码,下面部分是对相应代码的解释。使用上下箭头可以选择相应的代码,此处选择第三个。之后生成代码:<%@ taglib %>。忽略错误提示。继续按空格键,会出现如图所示的界面,继续输入p,则帮助列表中只剩下一项,回车即可选择。生成的代码如下:<%@ taglib prefix="" %>,在光标处输入c。然后把光标移动到“%>”之前,继续按空格键,采用同样的方法添加uri属性,然后在输入值的时候使用Ctrl+反斜线,之后会出现系统可以使用的值,选择“http://java.sun.com/jsp/jstl/core”。

<shape id="_x0000_i1036" style="WIDTH: 269.25pt; HEIGHT: 222.75pt" type="#_x0000_t75"><imagedata o:title="标签库声明(一)" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image023.png"><font size="3"></font></imagedata></shape>

<shape id="_x0000_i1037" style="WIDTH: 305.25pt; HEIGHT: 220.5pt" type="#_x0000_t75"><imagedata o:title="标签库声明(二)" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image025.png"><font size="3"></font></imagedata></shape>

通过上面的过程,登录界面就编写完了,完成后的代码如下:

文件名:index.jsp

<%--

文 件 名:index

创建时间:<chsdate w:st="on" year="2008" month="2" day="12" islunardate="False" isrocdate="False"><span lang="EN-US">2008-2-12</span></chsdate>, 11:10:44

编 写 者:李绪成

--%>

<%@page contentType="text/html" pageEncoding="GB2312"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W<chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</chmetcnv>//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】。如图所示,然后弹出如图所示的界面。

<shape id="_x0000_i1038" style="WIDTH: 299.25pt; HEIGHT: 184.5pt" type="#_x0000_t75"><imagedata o:title="Web应用创建Servlet" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image027.png"><font size="3"></font></imagedata></shape>

<shape id="_x0000_i1039" style="WIDTH: 382.5pt; HEIGHT: 263.25pt" type="#_x0000_t75"><imagedata o:title="Web应用创建Servlet(二)" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image029.png"><font size="3"></font></imagedata></shape>

Class Name输入框中输入LoginServlet,其他的采用默认值。然后点击【Next >】。进入到如图所示的界面:

<shape id="_x0000_i1040" style="WIDTH: 381.75pt; HEIGHT: 261pt" type="#_x0000_t75"><imagedata o:title="Web应用创建Servlet(三)" src="file:///C:%5CTEMP%5Cmsohtml1%5C01%5Cclip_image031.png"><font size="3"></font></imagedata></shape>

采用默认值即可,如果需要添加初始化参数,可以点击右边的【Add】按钮。Servlet NameURL 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.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值