JBuilder2005实战JSP之登录页面实现代码[图]
程序员文章站
2024-02-14 19:40:52
通过file->new...->web->双击jsp图标,弹出创建jsp向导的对话框,如下图所示:
图 3 通过向导创建login.jsp ·web module:如果...
通过file->new...->web->双击jsp图标,弹出创建jsp向导的对话框,如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzA4OTc0LmpwZw==)
图 3 通过向导创建login.jsp
·web module:如果一个工程下有多个web模块,你可以通过这儿指定jsp所要加入到的web模块,因为我们的工程中只有一个webmodule,所以是向导将默认设置为webmodule。
·name :键入jsp文件名,你可以键入.jsp后缀,也可以不写后缀,直接键入login就可以了。
generate sample bean选项勾选后jbuilder将生成一个示例的bean并在jsp中引入这个bean。对于初学者来说,可以通过该选项查看jsp如何引用一个bean,而generate error page选项将自动为jsp创建一个配套的错误处理jsp文件,这里,我们不勾选它们。
直接点击finish创建login.jsp,login.jsp文件出现在内容窗格的编译器中,如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzA4NTAzLmpwZw==)
图 4 向导创建的jsp文件
jsp编译窗口的左右两边都有一个可以通过
和
按钮控制的竖栏,左边栏为放置jsp标签和html标签的面板,可以像可视化ui设计器中一样用拖拽方式往jsp文件中放置各种标签,如上图中,我们从面板中选择表单的html标签放置到login.jsp文件中。
而右边竖栏中是jsp文件中当前光标所在标签的属性编译器,如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzA3ODQ1LmpwZw==)
图 5 设置jsp标签属性编辑器
属性编辑器是动态的,光标移到不同的标签上,属性编辑器就显示这个标签所有可设置的属性。如上图中对应的是html 表单标签的属性编辑器,我们将其action属性设置为switch.jsp,指定用post方式发送请求数据。
我们在login.jsp中提供一个用户名下拉框、一个密码输入框以及一个登录提交按钮,其代码如下:
代码清单 4 login.jsp
<%@page contenttype="text/html; charset=gbk" %>
<html>
<head>
<title>login</title>
</head>
<body bgcolor="#ffffff">
<表单 name="表单1" method="post" action="switch.jsp">
用户名: <select name="userid">
<option value="" selected>--登录用户--</option>
<option value="100000">姜子牙</option>
<option value="100001">鲍叔牙</option>
<option value="100002">竖牙</option>
</select>
密 码:<input name="password" type="password">
<input type="submit" name="submit" value="登录">
</表单>
</body>
</html>
表单标签代表网页中的一个表单,表单可以包含多个组件,这些组件的数据在网页表单提交后,以http协议发送给action属性所指定的jsp文件处理。表单的数据一般以post发送,post发送方式对数据量的大小没有限制,且保密性更强。
login.jsp的效果页面如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzA1MTE3LmpwZw==)
图 6 login.jsp录入页面
实战经验:
jsp文件代码包含静态和动态两部分,即一部分是html代码,而另一部分为jsp标签和scriptlet代码。jsp一般是动态逻辑的网页,jbuilder对jsp标签及scriptlet这些动态代码部分支持得非常好,你可以使用codeinsight和taginsight等工具快速而正确地完成编码,同时还可以对jsp进行编译调试。在jsp静态html代码编写及可视化设计方面,jbuilder却显得力不从心,dreamweaver在静态代码和可视化设计方面明显优于jbuilder。
package bookstore;
import java.sql.*;
public class userlist
{
//获取html下拉框的用户列表代码
public static string getuserlisthtml() {
connection conn = null;
stringbuffer sbuf = new stringbuffer();
try {
conn = dbconnection.getconnection();
preparedstatement pstat = conn.preparestatement(
"select user_id,user_name from t_user");
resultset rs = pstat.executequery();
while (rs.next()) {
sbuf.append("<option value='" + rs.getstring("user_id") + "'>" +
rs.getstring("user_name") + "</option>\n");
}
return sbuf.tostring();
} catch (sqlexception ex) {
ex.printstacktrace();
return "";
} finally {
try {
if (conn != null) {
conn.close();
conn = null;
}
} catch (sqlexception ex1) {
}
}
}
}
userlist.java只提供了一个静态的getuserlisthtml()方法,这个方法从后台数据库的t_user表中获取用户记录,并生成html的select组件的选项代码,如第16~17行所示。
在创建这个类后,我们引用该类调整login.jsp的代码,首先在page指令标签中通过import属性引用userlist类,然后将select选项中的内容调整为getuserlisthtml()方法返回的值,如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzE2NDAzLmpwZw==)
图 7 通过codeinsight编写代码
通过表达式标签替换原静态的html代码,值得提起的是,在jsp中也可以象在编写一般的java类中一样使用codeinsight输入代码。调整后的login.jsp的代码如下所示,用粗体表示:
代码清单 6 调整后的login.jsp代码
<%@page contenttype="text/html; charset=gbk" import="bookstore.userlist"%>
<html>
<head>
<title>login</title>
</head>
<body bgcolor="#ffffff">
<表单 name="表单1" method="post" action="switch.jsp">用户名:
<select name="userid">
<option value="" selected>--登录用户--</option>
<%=userlist.getuserlisthtml()%>
</select>
密 码:<input name="password" type="password">
<input type="submit" name="submit" value="登录">
</表单>
</body>
</html>
保存login.jsp后,在内容窗格login.jsp文件标签中点击右键,选择web run using defaults,jbuilder 将启动tomcat 5.0应用服务器,运行于8080端口上,编译并运行login.jsp文件,如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzE3Njg4LmpwZw==)
图 8 在jbuilder中运行login.jsp
jbuilder自动切换到web view视图页中,显示页面的运行效果。但jbuilder的浏览器对网页的支持效果很弱,也不支持javascript脚本。所以在运行login.jsp后,最好通过ie来查看网页的效果,你只需要打开ie,并将jbuilder中的访问login.jsp的地址拷贝到ie的地址栏中就可以了,如下图所示:
![JBuilder2005实战JSP之登录页面实现代码[图] JBuilder2005实战JSP之登录页面实现代码[图]](/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIyMDQwMzE2NDMyLmpwZw==)
图 9 用ie访问jbuilder中运行的login.jsp
此时用户名的下拉框中的用户已经是动态的用户列表中,当t_user表中添加、删除用户时下拉框的用户也会相应地改变。
在运行jsp前最好先单独编译一个这个jsp文件:在内容窗格的jsp文件标签上点击右键,在弹出的菜单中选择make "xxx.jsp",即可完成对jsp文件的编译,及时发现错误。jsp文件和java文件在编辑时,最大的区别是java程序文件一有错误就会在编辑器和结构窗格中列出,但jsp文件的有些错误需要通过编译才能发现。
提示:
由于编译jsp文件需要先将其转换为servlet文件,然后再编译这个中间servlet文件,发生错误后转定向到jsp文件中,所以编译一个jsp文件是比较耗时的,往往比编译一个java文件要花好几倍的时间。在默认的情况下,编译一个工程时,会编译整个工程中所有的jsp,需要消耗大量的时间。所以最好取消在编译工程连带编译jsp文件的设置:通过project->project properties...->build-> 在build设置页中取消check jsps for errors at build-time选项。在确实需要的时候再勾选这个选项,并在编译后及时取消这个选项。通过这样的设置将可以为你的开发赢得不少宝贵的时间。
图 3 通过向导创建login.jsp
·web module:如果一个工程下有多个web模块,你可以通过这儿指定jsp所要加入到的web模块,因为我们的工程中只有一个webmodule,所以是向导将默认设置为webmodule。
·name :键入jsp文件名,你可以键入.jsp后缀,也可以不写后缀,直接键入login就可以了。
generate sample bean选项勾选后jbuilder将生成一个示例的bean并在jsp中引入这个bean。对于初学者来说,可以通过该选项查看jsp如何引用一个bean,而generate error page选项将自动为jsp创建一个配套的错误处理jsp文件,这里,我们不勾选它们。
直接点击finish创建login.jsp,login.jsp文件出现在内容窗格的编译器中,如下图所示:
图 4 向导创建的jsp文件
jsp编译窗口的左右两边都有一个可以通过
而右边竖栏中是jsp文件中当前光标所在标签的属性编译器,如下图所示:
图 5 设置jsp标签属性编辑器
属性编辑器是动态的,光标移到不同的标签上,属性编辑器就显示这个标签所有可设置的属性。如上图中对应的是html 表单标签的属性编辑器,我们将其action属性设置为switch.jsp,指定用post方式发送请求数据。
我们在login.jsp中提供一个用户名下拉框、一个密码输入框以及一个登录提交按钮,其代码如下:
代码清单 4 login.jsp
复制代码 代码如下:
<%@page contenttype="text/html; charset=gbk" %>
<html>
<head>
<title>login</title>
</head>
<body bgcolor="#ffffff">
<表单 name="表单1" method="post" action="switch.jsp">
用户名: <select name="userid">
<option value="" selected>--登录用户--</option>
<option value="100000">姜子牙</option>
<option value="100001">鲍叔牙</option>
<option value="100002">竖牙</option>
</select>
密 码:<input name="password" type="password">
<input type="submit" name="submit" value="登录">
</表单>
</body>
</html>
表单标签代表网页中的一个表单,表单可以包含多个组件,这些组件的数据在网页表单提交后,以http协议发送给action属性所指定的jsp文件处理。表单的数据一般以post发送,post发送方式对数据量的大小没有限制,且保密性更强。
login.jsp的效果页面如下图所示:
图 6 login.jsp录入页面
实战经验:
jsp文件代码包含静态和动态两部分,即一部分是html代码,而另一部分为jsp标签和scriptlet代码。jsp一般是动态逻辑的网页,jbuilder对jsp标签及scriptlet这些动态代码部分支持得非常好,你可以使用codeinsight和taginsight等工具快速而正确地完成编码,同时还可以对jsp进行编译调试。在jsp静态html代码编写及可视化设计方面,jbuilder却显得力不从心,dreamweaver在静态代码和可视化设计方面明显优于jbuilder。
事情的复杂促进了分工,分工的精细促进了专业的发展,在编写jsp时,并不是一旦拥有jbuilder就别无所求了。韩信善兵、萧何善谋,如果能够将dreamweaver和jbuilder结合起来,用dreamweaver开发jsp的可视化部分,用jbuilder开发jsp的动态代码部分,两者互补有无,相得益彰,jsp开发工作将变得更加行云流水。
将用户列表改为动态
目前创建的login.jsp有一个缺陷,假设在数据库后台t_user表中添加其他的用户时,因为用户名下拉框是静态的代码,新创建的用户并不会出现在页面中,因此有必要将用户名列表改为动态的代码,用数据库表t_user的记录动态产生下拉框的数据。
我们通过userlist.ava类来完成这个工作,在工程中创建userlist.java,其代码如下:
代码清单 5 userlist.java
复制代码 代码如下:
package bookstore;
import java.sql.*;
public class userlist
{
//获取html下拉框的用户列表代码
public static string getuserlisthtml() {
connection conn = null;
stringbuffer sbuf = new stringbuffer();
try {
conn = dbconnection.getconnection();
preparedstatement pstat = conn.preparestatement(
"select user_id,user_name from t_user");
resultset rs = pstat.executequery();
while (rs.next()) {
sbuf.append("<option value='" + rs.getstring("user_id") + "'>" +
rs.getstring("user_name") + "</option>\n");
}
return sbuf.tostring();
} catch (sqlexception ex) {
ex.printstacktrace();
return "";
} finally {
try {
if (conn != null) {
conn.close();
conn = null;
}
} catch (sqlexception ex1) {
}
}
}
}
userlist.java只提供了一个静态的getuserlisthtml()方法,这个方法从后台数据库的t_user表中获取用户记录,并生成html的select组件的选项代码,如第16~17行所示。
在创建这个类后,我们引用该类调整login.jsp的代码,首先在page指令标签中通过import属性引用userlist类,然后将select选项中的内容调整为getuserlisthtml()方法返回的值,如下图所示:
图 7 通过codeinsight编写代码
通过表达式标签替换原静态的html代码,值得提起的是,在jsp中也可以象在编写一般的java类中一样使用codeinsight输入代码。调整后的login.jsp的代码如下所示,用粗体表示:
代码清单 6 调整后的login.jsp代码
复制代码 代码如下:
<%@page contenttype="text/html; charset=gbk" import="bookstore.userlist"%>
<html>
<head>
<title>login</title>
</head>
<body bgcolor="#ffffff">
<表单 name="表单1" method="post" action="switch.jsp">用户名:
<select name="userid">
<option value="" selected>--登录用户--</option>
<%=userlist.getuserlisthtml()%>
</select>
密 码:<input name="password" type="password">
<input type="submit" name="submit" value="登录">
</表单>
</body>
</html>
保存login.jsp后,在内容窗格login.jsp文件标签中点击右键,选择web run using defaults,jbuilder 将启动tomcat 5.0应用服务器,运行于8080端口上,编译并运行login.jsp文件,如下图所示:
图 8 在jbuilder中运行login.jsp
jbuilder自动切换到web view视图页中,显示页面的运行效果。但jbuilder的浏览器对网页的支持效果很弱,也不支持javascript脚本。所以在运行login.jsp后,最好通过ie来查看网页的效果,你只需要打开ie,并将jbuilder中的访问login.jsp的地址拷贝到ie的地址栏中就可以了,如下图所示:
图 9 用ie访问jbuilder中运行的login.jsp
此时用户名的下拉框中的用户已经是动态的用户列表中,当t_user表中添加、删除用户时下拉框的用户也会相应地改变。
在运行jsp前最好先单独编译一个这个jsp文件:在内容窗格的jsp文件标签上点击右键,在弹出的菜单中选择make "xxx.jsp",即可完成对jsp文件的编译,及时发现错误。jsp文件和java文件在编辑时,最大的区别是java程序文件一有错误就会在编辑器和结构窗格中列出,但jsp文件的有些错误需要通过编译才能发现。
提示:
由于编译jsp文件需要先将其转换为servlet文件,然后再编译这个中间servlet文件,发生错误后转定向到jsp文件中,所以编译一个jsp文件是比较耗时的,往往比编译一个java文件要花好几倍的时间。在默认的情况下,编译一个工程时,会编译整个工程中所有的jsp,需要消耗大量的时间。所以最好取消在编译工程连带编译jsp文件的设置:通过project->project properties...->build-> 在build设置页中取消check jsps for errors at build-time选项。在确实需要的时候再勾选这个选项,并在编译后及时取消这个选项。通过这样的设置将可以为你的开发赢得不少宝贵的时间。