1.前端界面代码:
denglu.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>
<link href="CSS/denglu.css" rel="stylesheet" type="text/css">
<script type="text/jscript">
function submit()
{
var username=document.getElementById("username");
var password=document.getElementById("password");
var email=document.getElementById("email");
if(username.value=="")
{
alert("用户名不能为空");
username.focus();
return false;
}
if(password.value=="")
{
alert("密码不能为空");
password.focus();
return false;
}
if(email.value=="")
{
alert("邮箱不能为空");
email.focus();
return false;
}
return true;
}
</script>
</head>
<body background="img/body.jpg">
<div id="container">
<div id="top">
<span id="tit_name">会员登录</span>
</div>
<div id="left">
<img src="img/fruit.jpg" width="100%" height="100%" alt="水果盛宴"/>
</div>
<div id="loginbox">
<form method="post" action="login" οnsubmit="return submit();">
<p style="font-size:16px; font-weight:bold">用户名/邮箱:</p>
<input type="text" style="width:350px; height:50px; border:1px solid #CCC" id="username" class="username" name="username" />
<p style="font-size:16px; font-weight:bold">登陆密码:</p>
<input type="password" style="width:350px; height:50px; border:1px solid #CCC" id="password" name="password" />
<p style="font-size:16px; font-weight:bold">绑定的电子邮箱:</p>
<input type="text" style="width:350px; height:50px; border:1px solid #CCC" id="email" name="email" />
<p style="font-size:16px; font-weight:bold"></p>
<input type="submit" style="width:150px; height:60px; background:#06F" value="登 陆" id="buttonone" name="buttonone"/>
<a href="zhuce.jsp">
<input type="button" style="width:150px; height:60px; background:#06F" value="注册" id="buttontwo" name="buttontwo" />
</a>
</form>
</div>
</div>
</body>
</html>
denglu.css
@charset "utf-8";
/* CSS Document */
body {
text-align: center;
font-size: 12px;
font-family: "宋体",Tahoma, Arial, Helvetica, sans-serif;
color: #333;
}
#container{
margin:0px auto;
width:1500px;
height:1130px;
text-align:left;
background:#FFF;
border: 10px solid #0F0;
}
#top{
height:30px;
width:100%;
line-height: 30px;
border-bottom: 1px solid #cacaca;
clear: both;
padding: 25px 0 0;
}
#tit_name
{
display: block;
float: left;
padding: 0 10px;
line-height: 30px;
border-bottom: 1px solid #31e02c;
font-size: 14px;
font-weight: bold;
}
#left{
height:1000px;
width:800px;
float: left;
display: inline;
}
#loginbox
{
float: left;
margin-top:200px;
width: 400px;
padding: 50px;
border: 1px solid #069;
}
.username{
height: 32px;
line-height: 32px;
text-indent: 2px;
border: 1px solid #666;
background: #fff;
}
制作的界面:
2.后端功能的实现
DButil.java
package Login;
import java.sql.DriverManager;
import java.sql.SQLException;
import com.mysql.jdbc.Connection;
public class DButil
{
private static String driver;
private static String url;
private static String username;
private static String password;
static {
driver="com.mysql.jdbc.Driver";
url="jdbc:mysql://localhost:3306/test";
username="root";
password="root";
}
/*
* 打开数据库
*/
public static Connection open()
{
try {
System.out.println("数据库连接成功!");
Class.forName(driver);
return (Connection) DriverManager.getConnection(url,username,password);
} catch (Exception e) {
// TODO Auto-generated catch block
System.out.println("数据库连接失败!");
e.printStackTrace();
}
return null;
}
/*
* 关闭数据库
*/
public static void close(Connection conn)
{
if(conn!=null)
{
try
{
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
ConnectDao.java
package Login;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.mysql.jdbc.PreparedStatement;
public class ConnectDao
{
public int login(String username,String password)
{
int ID=0;
Connection conn=DButil.open();
PreparedStatement pstmt=null;
ResultSet rs=null;
String sql="select id from user where username=? and password=?";
try {
pstmt=(PreparedStatement) conn.prepareStatement(sql);
pstmt.setString(1,username);
pstmt.setString(2,password);
rs=pstmt.executeQuery();
if(rs.next())
{
ID=rs.getInt("id");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return ID;
}
}
login.java
package Login;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.websocket.Session;
public class login extends HttpServlet {
private static final long serialVersionUID = 1L;
public login() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-Type","text/html; charset=utf-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
String email=request.getParameter("email");
PrintWriter out=response.getWriter();
ConnectDao dao=new ConnectDao();
int ID=dao.login(username, password);
if(ID!=0)
{
out.println("欢迎您!"+username);
}
else
{
out.println("登陆失败,请检查输入信息!");
}
}
}
运行截图: