Web前端HTML+css与JQuery+JSP/Servlet实现登录注册
1、项目搭建结构
2、Mysql数据库要有user用户表
3、连接数据库与关闭数据库工具类
package org.xiaomi.util;
import java.sql.*;
public class BaseDao {
private static final String DRIVER = "com.mysql.jdbc.Driver";
private final String url = "jdbc:mysql://localhost:3306/xiaomi";
private final String user = "root";
private final String password = "root";
//加载驱动
static{
try {
Class.forName(DRIVER);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
//建立连接
public Connection getConnection(){
Connection conn = null;
try {
conn = DriverManager.getConnection(url, user, password);
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
//关闭连接
public void closeAll(Connection conn,Statement stmt,ResultSet rs){
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(stmt!=null){
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//执行查询
public ResultSet executeQuery(String sql,Object[] sz){
Connection conn = getConnection();
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
pstmt = conn.prepareStatement(sql);
if(sz!=null&&sz.length>0){
for (int i = 0; i < sz.length; i++) {
pstmt.setObject(i+1, sz[i]);
}
}
rs = pstmt.executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
return rs;
}
//执行增删改
public boolean executeUpdate(String sql,Object[] sz){
Connection conn = getConnection();
PreparedStatement pstmt = null;
int row = 0;
try {
pstmt = conn.prepareStatement(sql);
if(sz!=null&&sz.length>0){
for (int i = 0; i < sz.length; i++) {
pstmt.setObject(i+1, sz[i]);
}
}
row = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally{
closeAll(conn, pstmt, null);
}
return row>0;
}
}
4、创建user实体类
package org.xiaomi.entity;
/**
* 用户实体类,登录类
* @author 065916
*
*/
public class User {
private int id;
private String name;
private String password;
private String phone;
//无参构造
public User(){}
//有参构造
public User(int id, String name, String password, String phone){
this.id = id;
this.name = name;
this.password = password;
this.phone = phone;
}
//封装提供getter/setter
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
//toString重写
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", password=" + password
+ ", phone=" + phone + "]";
}
}
5、创建user用户接口
package org.xiaomi.dao;
import java.util.List;
import org.xiaomi.entity.User;
/**
* 用户接口类
* @author 065916
*
*/
public interface UserDao {
/**
* 查询用户
* @return
*/
public List<User> getAllUser(int username);
// 接口类
/**
* 对用户进行验证，登录
*
* @param uname
* @param password
* @return
*/
public User checkLogin(User login );
/**
* 添加用户，注册
*
* @param login
* @return
*/
public boolean saveUser(User login);
}
6、创建user实现类
package org.xiaomi.dao.impl;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.xiaomi.dao.UserDao;
import org.xiaomi.entity.User;
import org.xiaomi.util.BaseDao;
public class UserDaoImpl extends BaseDao implements UserDao{
//查询用户
@Override
public List<User> getAllUser(int username) {
//写SQL语句
String sql = "select * from `user` as u inner join userinformation as f on u.`id`=f.`id` where name='?'";
Object[] sz = {username};
//调用查询方法
ResultSet rs = super.executeQuery(sql, sz);
//对象
List<User> list = new ArrayList<User>();
try {
while(rs.next()){
User user = new User(rs.getInt("u.id"),rs.getString("u.name"),rs.getString("u.password"),rs.getString("u.phone"));
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
try {
closeAll(rs.getStatement().getConnection(), rs.getStatement(), rs);
} catch (SQLException e) {
e.printStackTrace();
}
}
return list;
}
//用户验证
@Override
public User checkLogin(User login) {
//第一写SQL语句
String sql = "select * from `user` where name=? and password=?";
//创建Object[] 获取值
Object[] sz = {login.getName(),login.getPassword()};
//第二调用BaseDao的查询方法
ResultSet rs = super.executeQuery(sql, sz);
//第三创建对象给空值
User user2 = null;
try {
while(rs.next()){
user2 = new User();
user2.setId(rs.getInt("id"));
user2.setName(rs.getString("name"));
user2.setPassword(rs.getString("password"));
user2.setPhone(rs.getString("phone"));
}
} catch (SQLException e) {
e.printStackTrace();
}//关闭连接
finally{
try {
closeAll(rs.getStatement().getConnection(), rs.getStatement(), rs);
} catch (SQLException e) {
e.printStackTrace();
}
}
return user2;
}
//添加用户
@Override
public boolean saveUser(User login) {
//第一写SQL语句
String sql = "insert into `user`(name,password,phone) value(?,?,?)";
//第二创建Objectp[]数组，获取添加值
Object[] sz = {login.getName(),login.getPassword(),login.getPhone()};
return super.executeUpdate(sql, sz);
}
}
7、编写逻辑Servlet登录类
package org.xiaomi.servlet;
import java.io.IOException;
import java.util.List;
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 org.xiaomi.dao.UserDao;
import org.xiaomi.dao.impl.UserDaoImpl;
import org.xiaomi.entity.User;
@WebServlet(urlPatterns="/Loginyanzhen.shtml")
public class loginselect extends HttpServlet {
/**
* 登录，servlet
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//编码格式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//1.接收请求
String uname = request.getParameter("uname");
String password = request.getParameter("password");
//以对象为参数进行传参,将得到的参数封装到对象中
User user = new User();
user.setName(uname);
user.setPassword(password);
UserDao dao = new UserDaoImpl();
User u = dao.checkLogin(user);
String contextPath = request.getContextPath();
if(u!=null){
response.sendRedirect(contextPath+"/Gerenindexservlet.shtml");//成功
}else{
response.sendRedirect(contextPath+"/login.jsp");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
8、注册user/Servlet类
package org.xiaomi.servlet;
import java.io.IOException;
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 org.xiaomi.dao.UserDao;
import org.xiaomi.dao.impl.UserDaoImpl;
import org.xiaomi.entity.User;
@WebServlet(urlPatterns="/addUser.html")
public class zhuceaddregservlet extends HttpServlet {
/**
* 注册用户，添加用户Servlet
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置编码格式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//1.获取表单参数
String uname = request.getParameter("username");
String password = request.getParameter("password");
String queren = request.getParameter("repasswprd");
//2.创建Login对象,后，封装属性
User user = new User();
user.setName(uname);
user.setPassword(password);
user.setPhone(queren);
//3.创建Service对象
UserDao servlet = new UserDaoImpl();
boolean isok = servlet.saveUser(user);
//6.写入成功,则跳转到登录页面
if(isok){
request.getRequestDispatcher("/login.jsp").forward(request, response);//成功
}else{
request.getRequestDispatcher("/login.jsp").forward(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
9、Web登录页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/denlu.css">
<script src="js/jquery-1.8.3.js"></script>
<script>
var yanzheng;
$(function () {
//刷新或打开页面首先显示登录表单
$("#azhanghao").css("color","#ff6700");
$("#saoma").hide();
})
$(function () {
//点击切换表单页面
$("#azhanghao").click(function () {
$("#asaoma").css("color","#666");
$("#azhanghao").css("color","#ff6700");
$("#saoma").hide();
$("#zhangHao").show();
$("#BiaoDan").css("margin-bottom","0");
})
})
$(function () {
$("#asaoma").click(function () {
$("#azhanghao").css("color","#666");
$("#asaoma").css("color","#ff6700");
$("#saoma").show();
$("#zhangHao").hide();
$("#BiaoDan").css("margin-bottom","357px");
})
})
$(function () {
$("input[class*=login]").addClass("text");
})
</script>
</head>
<body>
<!--页面布局-->
<div id="yemian">
<!--头标布局-->
<div id="bujuyi">
<div id="h_logo"></div>
</div>
<div id="login_banner_panel" style="background-image: url(./image/83854f0abf1c124c4406166b58862192.jpg), none">
<div id="layout">
<!--登录表单布局↓↓-->
<div id="login-main">
<div id="BiaoDan">
<div>
<a href="javascript:void(0);" style="margin-left: 80px" id="azhanghao">账号登录</a>
<span>|</span>
<a href="javascript:void(0);" id="asaoma">注册登录</a>
</div>
<div id="zhangHao">
<div>
<div>
<div>
<form action="Loginyanzhen.shtml" method="post">
<label for="">
<input class="login_name" type="text" name="uname" placeholder="邮箱/手机号码/小米ID">
</label>
<label for="">
<input class="login_pwd" type="password" name="password" placeholder="密码">
</label>
<div>
<a href="#">
<input class="button" type="submit" value="登录" >
</a>
</div>
</form>
<div class="loginType">
<div>
<a href="">立即注册</a>
<span style="margin: 0px 3px 0px 3px">|</span>
<a href="">忘记密码?</a>
</div>
</div>
</div>
</div>
<!--其他方式登录-->
<div>
<div><span>其他方式登录</span></div>
<div>
<a href="" style="margin-left: 90px;"><i style="background-position: -19px"></i></a>
<a href="" style="background-color: #d32f2f"><i style="background-position: -38px"></i></a>
<a href=""><i style="background-position: -57px;width: 25px"></i></a>
<a href="" style="background-color: #00d20d"><i style="background-position: -83px;width: 24px"></i></a>
</div>
</div>
</div>
</div>
<div id="saoma">
<div>
<div>
<form action="addUser.html" method="post">
<label for="">
<input class="login_name" type="text" placeholder="邮箱/手机号码/小米ID" name="username" id="username" ><span id="username_msg"></span><br>
</label>
<label for="">
<input class="login_pwd" type="text" placeholder="密码" name="password" id="password"><span id="password_msg"></span><br>
</label>
<label for="">
<input class="login_pwd" type="text" placeholder="确认密码" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br>
</label>
<div>
<a href="#">
<input type="submit" class="button" value="注册" onclick="return checkForm()"/><br>
<input type="reset" value="重置">
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--中间布局结束↑↑-->
<!--底部页脚-->
<div id="n-footer">
<div id="kongbai"></div>
<div id="nf-link-area">
<div class="shezhi">
<ul class="neirong">
<li><a>简体</a>|</li>
<li><a>繁体</a>|</li>
<li><a>English</a>|</li>
<li><a>常见问题</a>|</li>
<li><a>隐私政策</a></li>
</ul>
</div>
<div class="shezhi2">
<p class="nf-intro">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//是否为空
function ifnull(txt) {
if (txt.length == 0) {
return true;
}
var $reg = /\s+/;
return $reg.test(txt);
}
//在id为username的元素失去焦点时进行用户名的验证
$("#username").blur(function () {
if (ifnull($(this).val())) {
$("#username_msg").html("用户名不能为空");
} else {
var $reg = /^\w{6,}$/;
if (!$reg.test($("#username").val())) {
$("#username_msg").html("用户名至少要6位哦");
} else {
$("#username_msg").html("√");
}
}
});
//在id为password的元素失去焦点时进行密码的验证
$("#password").blur(function () {
if (ifnull($(this).val())) {
$("#password_msg").html("用户名不能为空");
} else {
var $reg = /^\w{6,}$/;
if (!$reg.test($("#password").val())) {
$("#password_msg").html("密码至少要6位哦");
} else {
$("#password_msg").html("√");
}
}
});
//在id为repassword的元素失去焦点时进行密码的验证
$("#repassword").blur(function () {
if (ifnull($(this).val())) {
$("#repassword_msg").html("请确认密码");
} else {
if ($("#password").val() != $("#repassword").val()) {
$("#repassword_msg").html("两次密码不一致");
} else {
$("#repassword_msg").html("√");
}
}
});
//验证表单
function checkForm() {
//验证用户名
if (ifnull($("#username").val())) {
$("#username_msg").html("用户名不能为空！");
return false;
} else {
var $reg = /^\w{6,}$/;
if (!$reg.test($("#username").val())) {
$("#username_msg").html("用户名至少6位");
return false;
}
}
//验证密码
if (ifnull($("#password").val())) {
$("#password_msg").html("密码不能为空");
return false;
} else {
var $reg = /^\w{6,}$/;
if (!$reg.test($("#password").val())) {
$("#password_msg").html("密码至少6位");
return false;
}
}
//确认密码是否为空
if (ifnull($("#repassword").val())) {
$("#repassword_msg").html("请确认密码");
return false;
}
//验证两次密码是否一致
if ($("#password").val() != $("#repassword").val()) {
$("#repassword_msg").html("两次密码不一致");
return false;
}
return true;
}
</script>
</html>
10、登录页面css代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
*{
padding: 0;
margin: 0;
}
a{
list-style-type: none;
text-decoration: none;
}
#yemian{
width: 100%;
height:690px;
background-color: #ffffff;
}
#bujuyi{
width: 1130px;
height:98px;
margin: 0 auto;
background-color: #ffffff;
}
#h_logo{
width: 200px;
height: 98px;
background: url(../image/mistore_logo.png) no-repeat;
}
/*中间布局开始↓↓*/
#login_banner_panel{
background: #1e2f40;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
width: 100%;
height: 588px;
background-color: #5764e5;
position: absolute;
left: 0;
top: 98px;
background-repeat: no-repeat;
background-position: top center;
}
#layout {
width: 1130px;
height: 556px;
margin: 0 auto;
font-size: 14px;
/*z-index: 0;*/
position: relative;
}
/*登录表单布局 ↓↓*/
#login-main{
width: 418px;
height: 556px;
margin: 32px auto;
background-color: #ffffff;
float: right;
margin-right: 43px;
}
#BiaoDan{
width: 410px;
position: absolute;
bottom: 40px;
/*margin-left: 950px;
margin-right: 180px;*/
background-color: #ffffff;
padding-bottom: 30px;
}
#BiaoDan>div:first-of-type{
height: 83px;
width: 410px;
}
#BiaoDan>div:first-of-type *{
font-size: 24px;
color: #666;
text-align: center;
text-decoration: none;
padding-right: 15px;
line-height: 83px;
}
#zhangHao{
width: 410px;
}
#saoma{
height: 450px;
width: 410px;
position: absolute;
top: 82px;
background-color: white;
}
#zhangHao>div{
width: 410px;
}
#zhangHao>div>div:nth-of-type(1){
width: 355px;
margin: 0 auto;
}
#zhangHao>div>div label{
margin-top: 10px;
display: block;
width: 348px;
height: 50px;
border: 1px solid #e0e0e0;
}
.text{
background: none;
border: 0 none;
padding: 15px;
/* height: 22px; */
width: 318px;
color: #4a4a4a;
display: block;
}
#zhangHao>div>div form>div{
margin-top: 10px;
height: 60px;
width: 350px;
padding-top: 10px;
}
/*按钮*/
.button{
border: 0;
display: block;
background-color: #ff6700;
width: 100%;
line-height: 50px;
text-align: center;
font-size: 14px;
color: white;
}
#zhangHao>div>div .loginType{
/*margin-top: 10px;*/
}
#zhangHao>div>div .loginType>div{
float: right;
}
#zhangHao>div>div .loginType>div>*{
font-size: 14px;
color: #999;
}
#zhangHao>div>div .loginType>div>a:hover{
color: #ff6700;
}
#zhangHao>div>div:nth-of-type(2){
margin-top: 90px;
height: 65px;
}
/*其他登录线*/
#zhangHao>div>div:nth-of-type(2)>div:nth-of-type(1){
margin: 0 auto;
width: 346px;
height: 30px;
border-top: 1px solid #e0e0e0;
text-align: center;
}
#zhangHao>div>div:nth-of-type(2)>div>span{
font-size: 14px;
color: #bbb;
margin-left: 130px;
width: 85px;
display: block;
position: relative;
top: -11px;
background: white;
}
/*其他登录图标*/
#zhangHao>div>div:nth-of-type(2)>div:nth-of-type(2)>a{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 17px;
background-color: #0288d1;
}
#zhangHao>div>div:nth-of-type(2)>div:nth-of-type(2)>a>i{
display: block;
width: 18px;
height: 18px;
vertical-align: middle;
background-image: url(../image/qita.png);
text-align: center;
margin: 4px auto 0;
}
.text1{
height: 22px;
line-height: 22px;
display: inline-block;
width: 220px;
position: relative;
}
.zhuce1{
height: 22px;
line-height: 22px;
padding: 13px 10px 13px 0;
margin-left: 10px;
border-right: 1px solid #e0e0e0;
display: inline-block;
}
.zhuceyanzhen{
width: 110px;
height: 22px;
line-height: 22px;
padding: 13px 10px 13px 0;
display: inline-block;
border-left:1px solid #e0e0e0;
}
.zhuceyanzhen a{
margin-left: 20px;
color: #003ab5;
}
/*扫码登录*/
#saoma>div{
height: 237px;
width: 303px;
margin: 0 auto;
/*margin-top: 102px;*/
text-align: center;
}
#saoma>div>div:nth-of-type(2){
padding-top: 14px;
}
#saoma>div>div:nth-of-type(2)>p{
font-size: 14px;
color: #757575;
}
#saoma>div>div:nth-of-type(2)>p>span{
padding: 0 5px;
color: #ff6700;
}
#saoma>div>div label{
margin-top: 10px;
display: block;
width: 348px;
height: 50px;
border: 1px solid #e0e0e0;
}
#saoma>div{
width: 410px;
}
#saoma>div>div:nth-of-type(1){
width: 355px;
margin: 0 auto;
}
#saoma>div>div label{
margin-top: 10px;
display: block;
width: 348px;
height: 50px;
border: 1px solid #e0e0e0;
}
#saoma>div>div form>div{
margin-top: 10px;
height: 60px;
width: 350px;
padding-top: 10px;
}
/*底部布局 ↓↓↓*/
#n-footer{
width: 100%;
height: 170px;
background-color: #ffffff;
}
#kongbai{
width: 100%;
height: 90px;
background-color: #ffffff;
}
#nf-link-area{
color: #757575;
font-size: 14px;
font-family: arial,"Hiragino Sans GB", "Microsoft YaHei","微軟正黑體","儷黑 Pro", sans-serif;
}
.shezhi{
width: 1130px;
height: 19.5px;
margin: 0 auto;
background-color: #ffffff;
text-align: center;
}
.neirong li{
display: inline-block;
list-style: none;
}
.neirong li a{
padding: 0 10px;
display: inline-block;
}
.shezhi2{
width: 1130px;
height: 44px;
margin: 0 auto;
background-color: #ffffff;
text-align: center;
}
.nf-intro {
padding: 10px;
}
11、登录成功页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'geren.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/geren.css">
<script src="js/jquery-1.8.3.js"></script>
<script src="geren.js"></script>
</head>
<body>
登陆成功
</body>
</html>