在这里寻求一些帮助。我正在做一个小项目，我真的很难为我的移动应用程序创建一个登录系统。我正在为我的数据库使用 jQuery Mobile 和 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> 
最佳答案
我很惊讶有人仍在使用 jQuery Mobile，但我认为我拥有您需要的大部分代码。
几年前，我写了一篇涵盖复杂 jQuery Mobile 授权教程的文章:https://www.gajotres.net/complex-jquery-mobile-authorization-example/
主要思想是从 jQM 客户端发布您的授权信息:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<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.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div data-role="page" id="login" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Login Page</h3>
</div>
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<a href="#login" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" id="back-btn">Back</a>
<h3>Welcome Page</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Page footer</h3>
</div>
</div>
</body>
</html>
将此信息转发到服务器端 PHP。当然你需要处理数据库读/写；我的示例使用某种 ORM，例如 Propel，因为它有大量可用的教程。
<?php
function authorize()
{
//normally this info would be pulled from a database.
//build JSON array
$status = array("status" => "success");
return $status;
}
$possible_params = array("authorization", "test");
$value = "An error has occurred";
if (isset($_POST["action"]) && in_array($_POST["action"], $possible_params))
{
switch ($_POST["action"])
{
case "authorization":
$value = authorize();
break;
}
}
//return JSON array
exit(json_encode($value));
?>
将响应返回给 jQuery Mobile 并根据页面类型，使用以下方法打开适当的页面:
$.mobile.changePage("#second");
这是我教程中的完整 jQM 示例:
var userHandler = {
username : '',
status : ''
}
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
if(activePage.attr('id') === 'login') {
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#username').val().length > 0 && $('#password').val().length > 0){
userHandler.username = $('#username').val();
// Send data to server through the Ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: 'auth.php',
data: {action : 'authorization', formData : $('#check-user').serialize()},
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.loading('show'); // This will show Ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.loading('hide'); // This will hide Ajax spinner
},
success: function (result) {
// Check if authorization process was successful
if(result.status == 'success') {
userHandler.status = result.status;
$.mobile.changePage("#second");
} else {
alert('Logon unsuccessful!');
}
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all necessary fields');
}
return false; // cancel original event to prevent form submitting
});
} else if(activePage.attr('id') === 'second') {
activePage.find('.ui-content').text('Wellcome ' + userHandler.username);
}
});
$(document).on('pagecontainerbeforechange', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
if(activePage.attr('id') === 'second') {
var to = ui.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#login' && userHandler.status === 'success') {
alert('You cant open a login page while youre still logged on!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button if a transition was triggered with a button
$('#back-btn').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
}
});
以上教程是用 jQuery Mobile 1.4.5 编写的。虽然已经有 1.5 版本，但它仍然是一个 alpha 版本，而且我们很可能永远不会看到 1.5 的 RC 版本，所以请坚持使用 1.4.5。
同样，您只需要编写 PHP 数据库处理实现，如果您坚持使用 Propel ORM，那应该不会花费您太多时间。
关于javascript - 如何为 PhoneGap 创建服务器端登录？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52608401/