在这里寻求帮助。我正在做一个小项目,我真的很难为我的移动应用程序创建一个登录系统。我使用jquerymobile和mysql作为我的数据库。
我想做的是:
使用数据库的凭据创建登录(请参见照片)
根据他们是哪种类型的教师或学校,将他们指向各自的teacher.html/school.html文件。
我已经准备好了config.php和connect.php文件,但是我不确定要写什么来检查凭证。
请在下面找到一个片段。
/* Global Font */
* {
font-family: helvetica neue;
}
/* Login landing screen */
# LandingButtons {
font-family: helvetica neue;
position: absolute;
text-align: center;
top: 87%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 1;
margin-left: 1.4vw;
width: 100vw;
}
# registrationButton {
background-color: #4B836E;
color: white;
text-shadow: none;
border: none;
}
# loginButton {
background-color: #5D93CD;
color: white;
text-shadow: none;
border: none;
}
.landingsliderimg {
width: 100vw;
height: 100vh;
}
button.ui-btn.ui-btn-inline {
width: 45%;
}
.button1 {
background-color: #d3c208;
}
.ui-link.ui-btn.ui-btn-a.ui-btn-inline.ui-shadow.ui-corner-all {
width: 37.5%;
}
# popupMenu {
height: 100%;
background-color: red;
}
/* REGISTRATION PAGE */
/* HEADER */
.header {
text-align: center;
font-size: 25px;
vertical-align: middle;
line-height: 40px;
height: 44px;
box-shadow: 0 0 20px 0px #00000042;
}
.header .h1 {
text-align: center;
font-size: 25px;
vertical-align: middle;
line-height: 40px;
height: 44px;
}
.header.ui-header.ui-bar-inherit.ui-header-fixed.slidedown {
background-color: #229aab;
color: white;
text-shadow: none;
font-size: 3vh;
}
.ui-btn-left.ui-link.ui-btn.ui-icon-user.ui-btn-icon-left.ui-shadow.ui-corner-all {
color: #fff;
text-shadow: none;
background-color: #219aab;
border-color: #d8d8d8;
}
# registrationForm {
margin-left: 10vw;
margin-right: 10vw;
margin-top: 3vh;
}
/* Hide / Show Forms */
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Mobile Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--User's CSS -->
<link rel="stylesheet" href="css/login.css" />
</head>
<body>
<!-- Login and register buttons -->
<div data-role="page" id="login">
<div id="LandingButtons">
<a href="#registration" id="registrationButton" data-role="button" data-inline="true" data-theme="a" data-transition="slide">REGISTER</a>
<a href="#popupLogin" id="loginButton" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-theme="a" data-transition="pop">LOGIN</a>
<div data-role="popup" id="popupMenu" data-theme="a">
<div data-role="popup" data-overlay-theme="a" id="popupLogin" data-theme="a" class="ui-corner-all" data-position-to="window">
<form>
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="email">
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password">
<button type="submit" data-icon="check">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Header -->
<div data-role="header" class="header" data-position="fixed">
<a href="#" data-rel="back" data-icon="arrow-l" class="ui-btn-left">Back</a>Registration
</div>
</div>
</body>
</html>
2条答案
按热度按时间4nkexdtk1#
我很惊讶有人还在使用jquerymobile,但我想我已经掌握了您所需要的大部分代码。
几年前,我写了一篇文章,介绍了一个复杂的jquery移动授权教程:https://www.gajotres.net/complex-jquery-mobile-authorization-example/
主要的想法是从jqm客户端发布您的授权信息:
将此信息转发到服务器端php。当然,您需要处理db读/写;我的示例使用了某种orm,例如propel,因为它有大量可用的教程。
将响应返回到jquery mobile,并根据页面类型,使用以下方法打开相应的页面:
下面是我的教程中的一个完整的jqm示例:
上面的教程是用jquerymobile1.4.5编写的。虽然已经有了1.5版本,但仍然是alpha版本,很有可能我们永远不会看到1.5的rc版本,所以还是坚持1.4.5。
同样,您只需要编写phpdb处理实现,如果您坚持使用orm,就不需要花费太多时间。
cig3rfwq2#
我不知道你的php文件看起来像什么,因为你没有提供代码。。。
但这里有一个前端js和html的模型示例。
将js放在head标签之间。
html格式:
希望有帮助。