环境准备
首先，需要准备以下文件：
1. jquery.min.js：可以去官网下载具体版本，网站：Download jQuery | jQuery
2. bootstrap.min.js：可以去官网下载具体版本，网站：https://v3.bootcss.com/
3. jquery.validate.js： 可以去官网下载具体版本，网站: http://validatejs.org/#downloads
4. jdbc相关的连接包、Gson转换包、建表语句、需要在本机安装mysql数据库
5. 也可直接访问百度网盘获取项目：
地址：链接：https://pan.baidu.com/s/1TFqcj72i2nErvSKatAd-4Q?pwd=dv2r
提取码：dv2r
详细代码以及解析
数据库建表语句
CREATE TABLE
t_bk_user
(
uid INT NOT NULL AUTO_INCREMENT,
upname VARCHAR(20),
urname VARCHAR(120),
upwd VARCHAR(20),
uphone VARCHAR(20),
uaddr VARCHAR(120),
uhobby VARCHAR(120),
uemail VARCHAR(120),
PRIMARY KEY (uid)
)
ENGINE=InnoDB DEFAULT CHARSET=utf8 DEFAULT COLLATE=utf8_general_ci;前端登录代码实现
执行效果：
HTML具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 水平表单</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="lform" class="lform">
<div id="bdv1">
<form class="form-horizontal" role="form" id="loginform" >
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="upname" id="upname"
placeholder="请输入名字" style="width: 300px;" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" name="upwd" class="form-control" id="upwd"
placeholder="请输入姓" style="width: 300px;" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label"><span id="ltips"></span></label>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" style="width: 300px; color: black; background-color: #269ABC;"><b>登录</b></button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>JS代码：
$(function(){
$("#loginform").validate({
rules:{
upname:{
required:true,
rangelength:[6,12]
},
upwd:{
required:true,
rangelength:[6,12]
}
},
messages:{
upname:{
required:"用户名不能为空！",
rangelength:"用户名长度必须在6-12位之间"
},
upwd:{
required:"密码不能为空！",
rangelength:"密码长度必须在6-12位之间"
}
},
onfocusout: function(element) {
$(element).valid();
},
submitHandler:function(form){
$.ajax({
type: 'GET',
url: "http://localhost:8080/Ajaxd01/userController.do?",
dataType:"jsonp",
jsonp:"aaa",
data:"upname="+$("#upname").val()+"&"+"upwd="+$("#upwd").val(),
success: function(info){
if(info=="pwdRight"){
location.href="table.html";
}else{
$("#ltips").text("用户名或密码错误!");
$("#ltips").css("color","red");
}
},
error: function(XmlHttpRequest, textStatus, errorThrown){
alert("ERROR");
}
});
}
});
})
css代码：
.lform{
border: 1px solid;
background-color: white;
width: 100%;
height: 100%;
background: url(../img/loginbgi1.jpeg) no-repeat ;
background-size: 100% 100%;
background-attachment: fixed;
}
#bdv1{
width: 500px;
height: 300px;
background-color: white;
margin-top: 360px;
margin-left: 800px;
}
#loginform{
width: 500px;
height: 300px;
padding-top: 100px;
margin-left: 50px;
}
后端代码实现：
地址：链接：https://pan.baidu.com/s/1TFqcj72i2nErvSKatAd-4Q?pwd=dv2r
提取码：dv2r