最近刚学习了解jsp的语法及用法，就写了这么一个登陆界面，巩固一下。
开发工具：eclipse及chorm浏览器
一、数据库及jar包准备
eclipse新建项目Login。
新建数据库login_users，在数据库中新建表users，操作语句如下：
先进入mysql用户root，这个因为每个人密码不同，所以自己操作。
建库语句：
create database login_users;
建表语句：
use login_users;
create table users(
id varchar(20) not null,
pw varchar(20) not null,
power varchar(20) not null
）ENGINE=InnoDB DEFAULT charset=utf-8;
在该表中，有三个字段id,pw power,分别表示账号，密码以及权限。
所以先插入一个具有管理权限的超级管理员，id为amin,密码为123456.
语句如下：
insert into users values ('admin','123456','超级管理员');
数据库的准备就到这里。
接下来是jar包的准备：
需要用到额外下载的三个包：
standard.jar、jstl.jar和mysql-connector-java-5.1.44-bin.jar。
前两个包是用到jsp标准标签库，后面一个为jdbc所必需的包。
JSTL 库安装
Apache Tomcat安装JSTL 库步骤如下：
- 从Apache的标准标签库中下载的二进包(jakarta-taglibs-standard-current.zip)。下载地址：http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/
- 下载jakarta-taglibs-standard-1.1.1.zip 包并解压，将jakarta-taglibs-standard-1.1.1/lib/下的两个jar文件：standard.jar和jstl.jar文件拷贝到/WEB-INF/lib/下。
-
接下来我们在 web.xml 文件中添加以下配置：
…… <jsp-config> <taglib> <taglib-uri>http://java.sun.com/jstl/fmt</taglib-uri> <taglib-location>/WEB-INF/fmt.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/fmt-rt</taglib-uri> <taglib-location>/WEB-INF/fmt-rt.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/core</taglib-uri> <taglib-location>/WEB-INF/c.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/core-rt</taglib-uri> <taglib-location>/WEB-INF/c-rt.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/sql</taglib-uri> <taglib-location>/WEB-INF/sql.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/sql-rt</taglib-uri> <taglib-location>/WEB-INF/sql-rt.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/x</taglib-uri> <taglib-location>/WEB-INF/x.tld</taglib-location> </taglib> <taglib> <taglib-uri>http://java.sun.com/jstl/x-rt</taglib-uri> <taglib-location>/WEB-INF/x-rt.tld</taglib-location> </taglib> </jsp-config> ……
使用任何库，你必须在每个JSP文件中的头部包含<taglib>标签。
下载连接mysql的jar包，http://dev.mysql.com/downloads/connector/，详细操作可网上查询，下载完成后将jar包添加到新建的项目Login中来。前期准备到这里结束。
二、编写html登陆界面
首先是登陆界面的编写，采用css+html，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<style type="text/css">
a:link{color:#33CC00;}
a:visited{color:#33CC00;}
a:hover{color:#33CC00;}
a:active{color:#66FFFF;}
.cnt{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:#0033CC;
height:40%;
width:40%;
text-align:center;
}
.cnt>.rgst{
text-align:left;
height:10px;
}
#txt{
height:30px;
width:200px;
margin:2px;
}
#btn{
height:40px;
width:250px;
background-color:#2894FF;
margin:10px;
}
</style>
</head>
<body>
<div class="cnt">
<h2>欢迎登陆</h2>
<form action="login_check.jsp" Method="POST">
账号：<input type="text" id="txt" name="user_id"><br/>
密码：<input type="text" id="txt" name="password"><br/>
<input type="submit" id="btn" name="login" value="登陆">
</form>
<div class="rgst">
<a href="register.html" target="_blank"><font size="1">没有账号？立即注册></font><br/></a>
<a href="rfpw.html" target="_blank"><font size="1">忘记密码？点击修改></font></a>
</div>
</div>
</body>
</html>
运行效果如图：
输入登陆账号和密码，提交表单到login_check.jsp进行表单验证，若账号密码与数据库中的一致，则跳转到login_success.jsp,否则跳转到login_fail.jsp。
login_check.jsp的代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %>
<%request.setCharacterEncoding("utf-8"); %>
<html>
<head>
<title>登陆中</title>
</head>
<body>
<center>
<%! String user_id,pw,power; boolean check;%>
<%! String dburl="jdbc:mysql://localhost:3306/login_users";
String user_name="root";
String password="";
Connection con=null;
PreparedStatement pstm=null;
ResultSet result=null;%>
<%
user_id=request.getParameter("user_id");
pw=request.getParameter("password");
Class.forName("com.mysql.jdbc.Driver");
try{
%>
<%
con=DriverManager.getConnection(dburl,user_name,password);
String query="select power from users where id=? and pw=?";
pstm=con.prepareStatement(query);
pstm.setString(1,user_id);
pstm.setString(2,pw);
result=pstm.executeQuery();
if(result.next()){
check=true;
power=result.getString("power");
}
else check=false;
%>
<%
}catch(Exception e){
e.printStackTrace();
}finally{
try{
result.close();
pstm.close();
con.close();
}catch(Exception e){
}
}
%>
<%
if(check){
%>
<jsp:forward page="login_success.jsp">
<jsp:param name="user_id" value="<%= user_id%>"/>
<jsp:param name="password" value="<%= pw%>"/>
<jsp:param name="power" value="<%=power %>"/>
</jsp:forward>
<%
}else{
%>
<jsp:forward page="login_fail.jsp">
<jsp:param name="user_id" value="-1"/>
<jsp:param name="password" value="-1"/>
<jsp:param name="power" value="-1"/>
</jsp:forward>
<%
}
%>
</center>
</body>
</html>
login_success.jsp的代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%request.setCharacterEncoding("utf-8"); %>
<html>
<head>
<title>登陆成功</title>
<style type="text/css">
a{height:30px;
width:100px;
border:1px solid #99CCFF;
text-decoration:none;}
a:link{background-color:#99FFFF}
a:visited{background-color:#99FFFF}
a:hover{background-color:#99FFFF}
a:active{background-color:#99FF00}
</style>
</head>
<body>
<center>
<h2>欢迎登陆</h2>
<h3>登陆信息</h3>
<%! String user_id,user_pw,user_power; %>
<%
user_id=request.getParameter("user_id");
user_pw=request.getParameter("password");
user_power=request.getParameter("power");
%>
<table border="1">
<tr>
<td>用户名</td>
<td><%=user_id %></td>
</tr>
<tr>
<td>密码</td>
<td><%=user_pw %></td>
</tr>
<tr>
<td>身份</td>
<td><%=user_power %></td>
</tr>
</table>
<%
if(user_id.equals("admin")){
%>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/login_users"
user="root" password=""/>
<sql:query dataSource="${snapshot}" var="result">
SELECT * from users;
</sql:query>
<h3>全部信息</h3>
<table border="1" >
<tr>
<th>账号</th>
<th>密码</th>
<th>身份</th>
</tr>
<c:forEach var="row" items="${result.rows}">
<tr>
<td><c:out value="${row.id}"/></td>
<td><c:out value="${row.pw}"/></td>
<td><c:out value="${row.power}"/></td>
</tr>
</c:forEach>
</table>
<br/>
<a href="manager.jsp" target="_blank">修改用户信息</a>
<%
}
%>
</center>
</body>
</html>
login_fail.jsp的代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>登陆失败</title>
</head>
<body>
<center>
<h2>用户名或密码错误</h2>
</center>
</body>
</html>
以id='admin' pw='123456为例'，运行效果如下:
三、注册账号
点击login.html的注册账号链接，跳转到register.html中，填写账号密码，提交到register.jsp中验证，若数据库中没有此用户，则创建，并跳转到register_success.jsp中，否则创建失败。通过此方式创建用户默认权限为‘用户’。
register.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<style type="text/css">
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:40%;
width:40%;
text-align:center;
}
</style>
</head>
<body>
<div class="center">
<form action="register_check.jsp" Method="POST">
账号:<input type="text" name="r_id"><br/>
密码:<input type="text" name="r_pw"><br/>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
register_check.jsp的代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-8">
<title>验证中</title>
</head>
<body>
<%! String r_id,r_pw,query,power; boolean r_check;%>
<%! String dburl="jdbc:mysql://localhost:3306/login_users?characterEncoding=utf8";
String user_name="root";
String password="";
Connection con=null;
PreparedStatement pstm=null;
ResultSet result=null;%>
<%
power="用户";
r_id=request.getParameter("r_id");
r_pw=request.getParameter("r_pw");
Class.forName("com.mysql.jdbc.Driver");
try{
%>
<%
con=DriverManager.getConnection(dburl,user_name,password);
query="select power from users where id=?";
pstm=con.prepareStatement(query);
pstm.setString(1,r_id);
result=pstm.executeQuery();
if(result.next()){
r_check=true;
}else r_check=false;
%>
<%
}catch(Exception e){
e.printStackTrace();
}
%>
<%
if(r_check==true){
try{
result.close();
pstm.close();
con.close();
}catch(Exception e){
}
%>
<jsp:forward page="register_fail.jsp">
<jsp:param name="r_id" value="-1"/>
<jsp:param name="r_pw" value="-1"/>
<jsp:param name="power" value="-1"/>
</jsp:forward>
<%}else{
try{
query="insert into users values(?,?,?)";
pstm=con.prepareStatement(query);
pstm.setString(1, r_id);
pstm.setString(2, r_pw);
pstm.setString(3,power);
int rs=pstm.executeUpdate();
}catch(Exception e){
e.printStackTrace();
}finally{
try{
pstm.close();
con.close();
}catch(Exception e){
}
}
%>
<jsp:forward page="register_success.jsp">
<jsp:param name="r_id" value="<%= r_id%>"/>
<jsp:param name="r_pw" value="<%= r_pw%>"/>
<jsp:param name="power" value="<%=power %>"/>
</jsp:forward>
<%
}
%>
</body>
</html>
register_success.jsp的代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-8">
<title>注册成功</title>
</head>
<body>
<center>
<h2>注册成功</h2>
</center>
</body>
</html>
register_fail.jsp的代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-8">
<title>已存在该账号</title>
</head>
<body>
<center>
<h2>已存在该账号，请重试</h2>
</center>
</body>
</html>
以创建id='cqh' pw='123'为例，结果如下：
尝试登陆，如图：
因默认权限为‘用户’，所以无法看到其他用户的信息。
四、修改密码
最后一个功能为修改密码。点击login.html中的修改密码链接，跳转到rfpw.html，填写后提交到rfpw_check.jsp中验证，若不存在该账号，则修改失败，跳转带rfpw_fail.jsp，若存在，跳转到rfpw_success.jsp中。
rfpw.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改密码</title>
<style type="text/css">
.cen{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:40%;
width:40%;
text-align:center;
}
</style>
</head>
<body>
<div class="cen">
<form action="rfpw_check.jsp" Method="POST">
账号: <input type="text" name="r_id"><br/>
新密码:<input type="text" name="r_pw"><br/>
<input type="submit" value="修改密码">
</body>
</html>
rfpw_check.jsp的代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-8">
<title>修改中</title>
</head>
<body>
<%! String new_pw,old_id,query;
boolean check;%>
<%
String url="jdbc:mysql://localhost:3306/login_users?characterEncoding=utf-8";
String user_name="root";
String password="";
Connection con=null;
PreparedStatement pstm=null;
ResultSet rs=null;
%>
<%
old_id=request.getParameter("r_id");
new_pw=request.getParameter("r_pw");
Class.forName("com.mysql.jdbc.Driver");
try{
%>
<%
con=DriverManager.getConnection(url, user_name, password);
query="select pw from users where id=?";
pstm=con.prepareStatement(query);
pstm.setString(1,old_id);
rs=pstm.executeQuery();
if(rs.next())
check=true;
else check=false;
%>
<%
}catch(Exception e){
e.printStackTrace();
}
%>
<%
if(check==false){
try{
rs.close();
pstm.close();
con.close();
}catch(Exception e){
}
%>
<jsp:forward page="rfpw_fail.jsp">
<jsp:param name="old_id" value="-1"/>
<jsp:param name="new_pw" value="-1"/>
<jsp:param name="power" value="-1"/>
</jsp:forward>
<%
}else{
try{
query="update users set pw=? where id=?";
pstm=con.prepareStatement(query);
pstm.setString(1,new_pw);
pstm.setString(2,old_id);
int result=pstm.executeUpdate();
}catch(Exception e){
}finally{
try{
pstm.close();
con.close();
}catch(Exception e){
}
}
%>
<jsp:forward page="rfpw_success.jsp">
<jsp:param name="old_id" value="<%=old_id %>"/>
<jsp:param name="new_pw" value="<%=new_pw %>"/>
<jsp:param name="power" value="1"/>
</jsp:forward>
<%
}
%>
</body>
</html>
rfpw_success.jsp的代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-81">
<title>修改密码</title>
</head>
<body>
<h2>修改成功</h2>
</body>
</html>
rfpw_fail.jsp的代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-8">
<title>修改失败</title>
</head>
<body>
<h2>修改密码失败，请确认账号是否存在</h2>
</body>
</html>
以id='cqh',将密码改为'cqh',结果如下：
然后，登陆，结果如下：
由结果可见，修改成功。
五、管理
最后，对超级管理员赋予权限，让其有权限修改用户账号密码。但因为其实现与前面都是大同小异，所以只实现了个按钮跳转而已。附上manager.jsp的代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//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=utf-8">
<title>修改用户信息</title>
</head>
<body>
<center>
</center>
</body>
</html>