首先要安装好jQuery,比较方便,然后是安装好这两个东西(注意要在对应的页面对应好路径)
这是用于读取数据库的操作
实现的效果大概是这个样子:
下面是数据库的定义(我定义的比较简单):
新闻:
栏目:
用户:
下面是代码:
1、登陆界面:(图片自己设路径)
效果如下:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="source/css/style.css">
<title>Land</title>
<script src="jquery-3.4.1.min.js"></script>
<script src="source/layer/layer.js"></script>
</head>
<body>
<div class="whole">
<p class="top">
Please Enter Your New Password
</p>
<div class="input">
<div>
Your Account
</div>
<input type="text" value="" placeholder="用户名/电话号" name="username" ID="username"/>
</div>
<div class="input">
<div>
New Password
</div>
<input type="text" value="" placeholder="密码" name="password" ID="password">
</div>
<input type="button" id="but" value="Finsh">
</div>
<script>
$(function(){
var win_height=$(window).height();
var who_height=$('.whole').height();
$('.whole').animate({
'top':win_height/2-20+'px'},100);
$(window).on('resize',function(){
var win_height=$(window).height();
var who_height=$('.whole').height();
$('.whole').animate({
'top':win_height/2-20+'px'},100);
});
$("#but").click(function(){
var name=$("#username").val();
var pwd=$("#password").val();
$.ajax({
url:"/web2/DemoServlet",
async:true,
type:"post",
data:{
"action":"denglu",
"username":name,
"pwd":pwd
},
success:function(data){
console.log(typeof data);
console.log(data);
data2=data.data;
if(data.code==200&&data2.length!=0){
window.location.href="http://localhost:8080/web2/oneFile.html";
}
else{
layer.msg('密码或用户名错误。。。', function(){
});
}
},
error:function(error){
alert("登陆错误")
}
})
})
})
</script>
</body>
</html>
css:
*{
margin:0;
padding:0;
}
body{
background-image: url("../img/denglu.jpg");
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.whole{
/* 涓�鑸笉瑕佽缃珮 */
width: 30%;
min-width: 300px;
margin: auto;
margin-top:150px ;
/* position: center; */
/* top: 30%; */
background-color: white;
opacity: 0.7;
padding-bottom: 2px;
}
.top{
height:40px;
margin:auto;
font-size:16px;
text-align: center;
line-height:40px;
background: linear-gradient(to left,red,blue);
}
.input{
margin: 10px;
}
.input div{
font-size: 16px;
color: rgb(112, 205, 241);
text-align: center;
line-height:20px;
}
.input input{
margin-top: 10px;
width:84%;
height: 32px;
/* (100-84)/2 */
margin-left: 8%;
border-width:1px;
border:1px solid black;
outline:none;
text-indent:10px;
color:rgb(17, 16, 16);
}
/* , */
.input input:hover{
box-shadow: 2px 2px 2px rgb(158, 154, 154);
}
#but{
width: 84%;
margin:30px auto;
height: 40px;
text-align: center;
background: linear-gradient(to left,red,blue);
font-size: 16px;
color: white;
text-decoration: none;
display: block;
line-height: 40px;
border: 0;
background-color: transparent;
outline: none;
}
#but:hover{
box-shadow:2px 2px wpx black;
}
2、登陆界面要链接好数据库,登陆成功后转到主界面
html:
<!DOCTYPE html