每天坚持学习,菜鸟会变高手的,鼓励下自己的话。。
1、创建HTML和XHTML页面
在NetBeans中,新建文件即可创建。。
貌似都很容易啦,有点HTML基础都可以随便看看的。
2、基于JSP的开发实例--登录模块的实现
登录模块的实现流程
welcome.jsp文件(输入登录信息)---》登录验证(logincheck.jsp)【数据库】--->登录成功?---?成功:失败
2.1 用java DB数据库
首先在窗口中找到服务,
先启动 java DB数据库服务器,再右击数据库--》选择新建连接--》主机名:lochalhost,数据库名MyTest,端口1527 用户名admin 密码admin ---》选择ADMIN ,这样就出现上面深色那一列,选中ADMIN,右击选择”执行命令“,在编辑中输入下面代码:
create table "ADMIN"."USERS"
(
"UserID" INTEGER not null unique,
"UserName" VARCHAR(12) not null unique,
"Password" varchar(20)
)
(
"UserID" INTEGER not null unique,
"UserName" VARCHAR(12) not null unique,
"Password" varchar(20)
)
再执行如下sql语句,插入记录
insert into "USERS"
("UserID","UserName","Password" )
values (1,'zeng','111')
("UserID","UserName","Password" )
values (1,'zeng','111')
查看数据,可以看到
2.2 创建logincheck.jsp文件
新建一个web应用程序项目,名字:JSP_Login.jsp,服务器用tomcat,同前一篇的基础web应用程序 为主项目
建立一个标准的JSP页面(新建文件就可以完成)
代码内容:
<
%@page contentType="text/html" pageEncoding="UTF-8"%>
< %@page import="java.sql.*" %>
<%
String username = request.getParameter("UserName");
String password = request.getParameter("password"); //获取用户输入的用户名和密码
boolean loginsuccess = false; //标记
//数据库连接
Connection con = null;
Statement stmt = null;
ResultSet rs = null;
try{
Class.forName("org.apache.derby.jdbc.ClientDriver");
con = DriverManager.getConnection("jdbc:derby://localhost:1527/MyTest","admin","admin");
stmt = con.createStatement();
< %@page import="java.sql.*" %>
<%
String username = request.getParameter("UserName");
String password = request.getParameter("password"); //获取用户输入的用户名和密码
boolean loginsuccess = false; //标记
//数据库连接
Connection con = null;
Statement stmt = null;
ResultSet rs = null;
try{
Class.forName("org.apache.derby.jdbc.ClientDriver");
con = DriverManager.getConnection("jdbc:derby://localhost:1527/MyTest","admin","admin");
stmt = con.createStatement();
String sql = "select * from USERS where /"UserName/" = '"+ username + "'";
rs = stmt.executeQuery(sql);
while(rs.next()){
if(password.equals(rs.getString("Password"))){
loginsuccess = true;
session.setAttribute("username",username);
}
}
} catch(Exception sqlex1) {
sqlex1.printStackTrace();
} finally {
if(con!=null){
try{
con.close();
}catch(SQLException sqlex2){
sqlex2.printStackTrace();
}
}
}
//如果loginsuccess为true,则进入welcome页面,否则进入error页面
if(loginsuccess){
%>
<jsp:forward page = "welcome.jsp"></jsp:forward>
<%
} else{
%>
<jsp:forward page = "error.jsp"></jsp:forward>
<%
rs = stmt.executeQuery(sql);
while(rs.next()){
if(password.equals(rs.getString("Password"))){
loginsuccess = true;
session.setAttribute("username",username);
}
}
} catch(Exception sqlex1) {
sqlex1.printStackTrace();
} finally {
if(con!=null){
try{
con.close();
}catch(SQLException sqlex2){
sqlex2.printStackTrace();
}
}
}
//如果loginsuccess为true,则进入welcome页面,否则进入error页面
if(loginsuccess){
%>
<jsp:forward page = "welcome.jsp"></jsp:forward>
<%
} else{
%>
<jsp:forward page = "error.jsp"></jsp:forward>
<%
}
%>
%>
可以查看数据的属性对话框,切换到服务,右击
我们刚才建立的,右击其属性,即显示如下图:
2.3 创建Index.jsp文件
要拖入表单,在拖入两个文本框以及两个按钮
直接从面板里拖入即可
对于表单,拖入时,操作要选择logincheck.jsp页面
文本也可以如此拖拽,如
最后,代码为:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP login</title>
</head>
<body>
<h1>请登录系统</h1>
<form name="form" action="logincheck.jsp" method="post">
用户:
<input type="text" name="username" value="zeng" />
<br>
密码:
<input type="password" name="password" value="" />
<p></p>
<input type="submit" value="确认" name="submit" />
<input type="reset" value="" name="reset" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP login</title>
</head>
<body>
<h1>请登录系统</h1>
<form name="form" action="logincheck.jsp" method="post">
用户:
<input type="text" name="username" value="zeng" />
<br>
密码:
<input type="password" name="password" value="" />
<p></p>
<input type="submit" value="确认" name="submit" />
<input type="reset" value="" name="reset" />
</form>
</body>
</html>
</body>
</html>
2.4 创建welcome.jsp文件
同2.3的做法
该文件代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome</title>
</head>
<body bgcolor="#ffffff">
<h1>登录成功</h1>
欢迎您:
<% System.out.println(session.getAttribute("username"));%>
<p></p>
<img src="image/welcome.jpg" width="862" height="344" alt="welcome"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome</title>
</head>
<body bgcolor="#ffffff">
<h1>登录成功</h1>
欢迎您:
<% System.out.println(session.getAttribute("username"));%>
<p></p>
<img src="image/welcome.jpg" width="862" height="344" alt="welcome"/>
</body>
</html>
说明:图片,是在该项目下建立一个文件夹名为:image,复制图片到该文件夹即可,直接复制
如果图片放入,也可以进行拖拽,再选择,当然也可以自己编码。
2.5 创建error.jsp文件
同上
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>error</title>
</head>
<body bgcolor ="#ffffff">
<h1>
<img src="image/error.png" width="256" height="256" alt="error"/>
登录错误,请重试!
</h1>
<p></p>
<p></p>
<a href ="index.jsp">返回,请重新登录</a>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>error</title>
</head>
<body bgcolor ="#ffffff">
<h1>
<img src="image/error.png" width="256" height="256" alt="error"/>
登录错误,请重试!
</h1>
<p></p>
<p></p>
<a href ="index.jsp">返回,请重新登录</a>
</body>
</html>
html的一些标签,可以参看:
http://www.w3school.com.cn/index.html 不错的网站
2.6运行项目
运行前,有两个事情
a、确认MyTest数据库已经启动
b、在项目窗口右键点击JSP_Login项目,选择属性,单击库,添加库,在库中选择Java DB驱动程序 确定<%--