将前端html框架基本写好了,css样式也大体加上了,现在就开始实现其功能了,也就是最主要的部分,所以就先以最基础的功能开始,即登录,如何实现登录,你可以直接设置一个账号,如果输入框和密码框都是那个账号就可以进入网页,但这明显只是一个假的,真正的登录功能还是需要连接数据库,在数据库的相应表中查询是否存在用户输入的账号,如果存在,再对比其密码是否和数据库中最初始录入的密码相同,这里就主要涉及到了数据库查询的功能,话不多说,直接上代码吧。
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>New Shop</title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/me.css" />
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
.area {
margin: 20px auto 0px auto;
}
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
.oauth-area {
position: absolute;
bottom: 20px;
left: 0px;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.oauth-area .oauth-btn {
display: inline-block;
width: 50px;
height: 50px;
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
margin: 0px 20px;
/*-webkit-filter: grayscale(100%); */
border: solid 1px #ddd;
border-radius: 25px;
}
.oauth-area .oauth-btn:active {
border: solid 1px #aaa;
}
.oauth-area .oauth-btn.disabled {
background-color: #ddd;
}
.login-reg{
font-size: 18px;
display: block;
width: 100%;
height: 40px;
margin-bottom: 10px;
padding: 15px 0
line-height: 1.42;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">登录</h1>
</header>
<br /><br />
<div class=