Login.htm为用户登录界面，界面信息包括用户名，密码。然后提交到LoginServlet进行登录检验,要求使用post方式提交，如果用户成功登录，就提示“您好，您已登录到系统”。否则，显示“请输入正确的用户名与密码”，并提供一个转到登录页面的链接。要求，用JDBC连接数据库，假定MySQL数据库的用户名为root,密码为root;写出具体的实现代码。
效果图
代码
<html>
<head>
<meta charset="UTF-8">
<title>先锋图书馆管理系统-登录</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#top{
width: 1000px;
height: 95px;
margin: 0 auto;
margin-top: 25px;
}
#top_top{
width: 1000px;
height: 65px;
background: deepskyblue;
}
#top_top_left{
width: 300px;
height: 65px;
float: left;
}
#top_top_left>label{
width: 200px;
height: 65px;
color: white;
float: right;
}
#top_top_left>#a2{
padding-left: 10px;
padding-top: 20px;
font-size: 16px;
}
#top_bottom{
width: 1000px;
height: 30px;
}
#top_bottom_left{
width: 340px;
height: 30px;
line-height: 30px;
font-size: 12px;
background: skyblue;
color: white;
text-indent: 2em;
float: left;
}
#top_bottom_right{
width: 660px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: blueviolet;
text-align: center;
float: right;
background: lightskyblue;
}
#content{
width: 1000px;
height: 600px;
margin: 0 auto;
background:#587FBA;
}
#content>#text{
width: 1000px;
height: 50px;
line-height: 50px;
padding-top: 100px;
font-size: 36px;
font-family:"楷体";
font-weight: bold;
text-align: center;
}
#content>#login{
width: 480px;
height: 210px;
margin-top: 20px;
margin-left: 260px;
background: #85A0CB;
}
#content>#login>img{
float: left;
}
#content>#login>#select{
width: 305px;
height: 210px;
float: right;
}
#content>#login>#select>div{
width: 230;
height: 30px;
margin-left: 30px;
}
#content>#login>#select>#d1{
margin-top:30px;
margin-bottom: 3px;
}
#content>#login>#select>p{
font-size: 14px;
margin-left: 95px;
}
#bottom{
width: 1000px;
height: 35px;
line-height: 35px;
margin: 0 auto;
background: deepskyblue;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div id="top">
<div id="top_top">
<div id="top_top_left">
<img src="img/test/a13.png" width="78px" height="65px"><label id="a2">先锋图书馆系统管理平台</label>
</div>
</div>
<div id="top_bottom">
<div id="top_bottom_left">当前位置 : 首页 > 系统管理 > 登录</div>
<div id="top_bottom_right">当前时间 : <label id="lable"></label></div>
</div>
</div>
<div id="content">
<div id="text">欢迎登录先锋图书馆管理系统</div>
<div id="login">
<img src="img/test/a14.png" width="175px" height="210px"/>
<form id="select">
<div id="d1">用户名: <input type="text" /></div>
<div>密 码: <input type="password" /></div>
<p>
<input type="radio" name="user" value="read"/>读者
<input type="radio" name="user" value="admin"/>管理员
</p><br/>
<p>
<input type="button" value="确定" style="width: 50px;" onclick="put()"/>
<input type="reset" value="重置" style="width: 50px;"/>
</p>
</form>
</div>
</div>
<div id="bottom">欣欣科技有限公司版权所有</div>
</body>
<script type="text/javascript" src="JQuery/jquery.js"></script>
<script type="text/javascript" src="js/GetCurrentTime.js"></script>
<script>
//验证用户名和密码
function put(){
var d = $("#select>div>input");//获取用户名和密码
var name = d[0].value;
var pass = d[1].value;
var user = null;
var r = document.getElementsByName("user");//获取用户类型
for(i=0;i<r.length;i++){
if(r[i].checked){
user=r[i].value;
}
}
//console.log(name + "," +pass + "," +user);//输出测试
if(user==null){
window.alert("请选择用户类型!");
}else if(user=="admin" && name!="admin"){
window.alter("用户名错误!");
}else if(user=="admin" && name=="admin" && pass!="123456"){
window.alert("密码错误!");
}else if(name=="admin" && pass=="123456" && user=="admin"){
window.location.href="work_02_welcome.html";//在js中在本页面中打开新链接
}else{
window.alert("用户名错误");
}
}
</script>
</html>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2014-06-21
妈的，虽然简单的要死，但是一想想这么多业务代码，才5分，还是算了！自己去百度，百度有很多业务代码的。
第2个回答 2017-07-20
这么简单的,你也不会吗?
第3个回答 2017-07-19
用高级UI根本写不出 的那种界面。必须用canvas自己画
