最近两天给公司做了一个小小的App应用，先是看中了PhoneGap的平台，想用PhoneGap平台来开发这个App。
但是写着写着发现了PhoneGap的代码还不如原来的AppCan的代码简洁。而且AppCan的代码上传到服务器可以打包Android的App和iPhone的App一举两得了。
下面介绍一下最简单的登录页面和注册页面的实现方式和代码:
一、登录页面： login_content.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | <!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="login_content/css/main.css">
</head>
<body class="um-vp bc-bg" ontouchstart onload="useLoad()">
<div class="ub ub-ver uinn-a3 ub-fv">
<div class="ub ub-ver uinn uinn-at1">
<form method="get" action="http://express.ytwoo.cn/api/login" onsubmit="login();return false;">
<div class="umar-a uba bc-border c-wh">
<div class="ub ub-ac ubb umh5 bc-border ">
<div class=" uinput ub ub-f1">
<div class="uinn fa fa-user sc-text"></div>
<input placeholder="手机号" type="number" name="uname" id="text_0" class="ub-f1">
</div>
</div>
<div class="ub ub-ac umh5 bc-border ">
<div class=" uinput ub ub-f1">
<div class="uinn fa fa-lock sc-text"></div>
<input placeholder="密码" type="password" id="text_1" name="pswd" class="umw4 ub-f1">
</div>
</div>
</div>
<div class="ub ub-ver">
<div class="uinn-at1">
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="login" onclick="login();">
登录
</div>
</div>
<div class="uinn-at2 ub sc-text-active ulev-4" onclick="openRegister()">
<div class="ub-f1">
立即注册
</div>
</div>
</div>
<button type="submit"class="uinvisible"></button>
</form>
</div>
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.initBounce();
})
function login() {
var uname = document.getElementById("text_0").value;
var pswd = document.getElementById("text_1").value;
if(uname == "" || pswd == ""){
appcan.window.openToast("请输入用户名和密码！", 3000, '5', '0');
return;
}
if(uname == "" || pswd == ""){
uexWindow.alert("提示","请输入用户名和密码！","确定");
return;
}else{
appcan.request.postForm($("form"), function(data) {
appcan.window.openToast("正在登录中……", 5000, '5', '0');
setTimeout(function(){
},5000);
data = eval("(" + data + ")");
if(data.code == "1"){
var user_id=data.data.user_id;
var login_times = data.data.login_times;
var count_building = data.data.count_building;
var count_community = data.data.count_community;
var count_customers = data.data.count_customers;
appcan.locStorage.setVal("user_id", user_id);
appcan.locStorage.setVal("user_name", uname);
appcan.locStorage.setVal("password", pswd);
appcan.locStorage.setVal("login_times", login_times);
appcan.locStorage.setVal("count_building", count_building);
appcan.locStorage.setVal("count_community", count_community);
appcan.locStorage.setVal("count_customers", count_customers);
//setCookie("username",uname);
//setCookie("password",pswd);
// var path="wgt://data/ytwuserInfo.txt";
// uexFileMgr.createFile('1',path);
// var content = uname + "," + pswd;
// uexFileMgr.openFile('1',path,'1');
// uexFileMgr.writeFile('1','1',content);
// uexFileMgr.closeFile('1');
//uexWindow.alert("提示","登录成功！","确定");
setTimeout(function(){
appcan.window.open({
name : 'index',
data : 'index.html',
});
},100);
}else if(data.code == "0"){
uexWindow.alert("提示","用户名或密码不正确！","确定");
}else{
uexWindow.alert("提示","服务器错误，请重试！","确定");
}
}, function(err) {
uexWindow.alert("提示","连接服务器失败！","确定");
});
}
}
function useLoad(){
var username=appcan.locStorage.getVal("username");
var password=appcan.locStorage.getVal("password");
if(username!=null && password!=null){
document.getElementById("text_0").value = username;
document.getElementById("text_1").value = password;
}else{
document.getElementById("text_0").value = null;
document.getElementById("text_1").value = null;
}
}
function useCookie(){
var username=getCookie("username");
var password=getCookie("password");
if(username!=null && password!=null){
document.getElementById("text_0").value = username;
document.getElementById("text_1").value = password;
}else{
document.getElementById("text_0").value = null;
document.getElementById("text_1").value = null;
}
}
//打开注册页面
function openRegister(){
appcan.window.open({
name : 'register',
data : 'register.html',
});
}
function setCookie(NameOfCookie, value, expiredays)
{
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
function getCookie(NameOfCookie)
{
if (document.cookie.length > 0){
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1){
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}
function delCookie (NameOfCookie)
{
if (getCookie(NameOfCookie)) {
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie = NameOfCookie + "=" + "; expires="+date.toGMTString();
}
}
</script>
</html> |
2.注册页面： register_content.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="register_content/css/main.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div class="c-wh uinnh5">
<form method="get" action="http://express.ytwoo.cn/api/register">
<div class="uba uc-a1 bc-border">
<div class="ub uinn5 bc-border ubb">
<div class="ub ub-ac uw-reg ulev-app1">
手机号码
</div>
<div class="ub ub-ac ub-f1">
<div class="uinput ub ub-f1">
<input placeholder="请输入您常用的手机号码" type="number" id="mobile" name="mobile" class="ub-f1">
</div>
</div>
</div>
<div class="ub uinn5 b-d8 ubb">
<div class="ub ub-ac uw-reg ulev-app1">
设置密码
</div>
<div class="ub ub-ac ub-f1">
<div class="uinput ub ub-f1">
<input placeholder="输入6~20位字符" type="password" id="password" name="password" class="ub-f1">
</div>
</div>
</div>
<div class="ub uinn5">
<div class="ub ub-ac uw-reg ulev-app1">
确认密码
</div>
<div class="ub ub-ac ub-f1">
<div class="uinput ub ub-f1">
<input placeholder="再次输入设置的密码" type="password" id="check_password" name="check_password" class="ub-f1">
</div>
</div>
</div>
</div>
<div class="uinn-at1">
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="register">
注册
</div>
</div>
<br>
<div class="uinn-at2 ub sc-text-active ulev-4" onclick="openLogin()">
<div class="ub-f1">
返回登录页面
</div>
</div>
</form>
</div>
</body>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.listview.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.initBounce();
})
appcan.button("#register", "ani-act", function() {
var mobile = document.getElementById("mobile").value;
var password = document.getElementById("password").value;
var check_password = document.getElementById("check_password").value;
if(mobile == ""){
//appcan.window.openToast("请输入手机号码！", 3000, '5', '0');
uexWindow.alert("提示","请输入手机号码！","确定");
return;
}
if(password == ""){
//appcan.window.openToast("请输入密码！", 3000, '5', '0');
uexWindow.alert("提示","请输入密码！","确定");
return;
}
if(check_password == ""){
//appcan.window.openToast("请输入确认密码！", 3000, '5', '0');
uexWindow.alert("提示","请输入确认密码！","确定");
return;
}
if(check_password != password){
//appcan.window.openToast("密码不一致，请重新输入！", 3000, '5', '0');
uexWindow.alert("提示","密码不一致，请重新输入！","确定");
return;
}
if(mobile != "" && password != "" && check_password != "" && password == check_password){
appcan.request.postForm($("form"), function(data) {
data = eval("(" + data + ")");
if(data.code == "1"){
var uid=data.data.user_id;
//uexWindow.alert("提示","注册成功！","确定");
appcan.window.openToast("注册成功！", 3000, '5', '0');
setTimeout(function(){
appcan.window.open({
name : 'login',
data : 'login.html',
});
},3000);
document.getElementById("mobile").value = "";
document.getElementById("password").value = "";
document.getElementById("check_password").value = "";
}else if(data.code == "0"){
uexWindow.alert("提示","手机号码格式不正确！","确定");
}else if(data.code == "2"){
uexWindow.alert("提示","该手机已经注册了！","确定");
}else if(data.code == "3"){
uexWindow.alert("提示","数据库操作失败！","确定");
}else{
uexWindow.alert("提示",data.content,"确定");
}
}, function(err) {
uexWindow.alert("提示","连接服务器失败！","确定");
});
}
})
//返回登录页面
function openLogin(){
appcan.window.open({
name : 'login',
data : 'login.html',
});
}
</script>
</html> |
3. 服务器端的登录和注册代码（CI框架中）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | public function login() { $uname = (isset($_REQUEST['uname']) ? ($_REQUEST['uname']) : ""); $uname = trim($uname); $pswd = (isset($_REQUEST['pswd']) ? ($_REQUEST['pswd']) : ""); $pswd = md5(trim($pswd)); $response = array("code"=>0,"content"=>"帐号和密码不正确"); $login_info = $this->db->query("SELECT user_id,user_name,mobile,login_times FROM ytwusers_users WHERE user_name = '$uname' AND password = '$pswd'")->result_array(); if(count($login_info) > 0){ $this->db->where('user_id', $login_info[0]['user_id']); $data = array('last_login_time' => time(),'login_times' => $login_info[0]['login_times'] + 1); $this->db->update("ytwusers_users", $data); $response['code'] = 1; $response['content'] = '登录成功'; $_SESSION['user_name'] = $uname; $_SESSION['user_id'] = $login_info[0]['user_id']; $back_data = array_merge($login_info[0], $data); $count_building = $this->db->query("select count(building_id) as count from ytwusers_building where create_person = " . $login_info['0']['user_id'])->row_array(); $count_building = $count_building['count']; $count_community = $this->db->query("select count(community_id) as count from ytwusers_community where create_person = " . $login_info['0']['user_id'])->row_array(); $count_community = $count_community['count']; $count_customers = $this->db->query("select count(customer_id) as count from ytwusers_customers where create_person = " . $login_info['0']['user_id'])->row_array(); $count_customers = $count_customers['count']; $back_data['count_building'] = $count_building; $back_data['count_community'] = $count_community; $back_data['count_customers'] = $count_customers; $log_info = array("log_time" => time(), "creater" => $login_info[0]['user_id'], "log_IP" => $this->get_ip(), "log_content" => $uname . " 在 " . date("Y-m-d H:i:s") . " 登录系统!"); $this->db->insert("ytwusers_log", $log_info); $response['data'] = $back_data; } exit(json_encode($response)); } public function register() { $mobile = (isset($_REQUEST['mobile']) ? ($_REQUEST['mobile']) : ""); $mobile = trim($mobile); $password = (isset($_REQUEST['password']) ? ($_REQUEST['password']) : ""); $password = md5(trim($password)); if(!preg_match("/^0{0,1}(13[0-9]|14[0-9]|15[0-9]|18[0-9])[0-9]{8}$/", $mobile)){ $response['code'] = 0; $response['content'] = '手机号码格式不正确！'; exit(json_encode($response)); } $check_exist = $this->db->query("SELECT count(`user_name`) as count FROM ytwusers_users WHERE user_name = '$mobile'")->row_array(); if($check_exist['count'] > 0){ $response['code'] = 2; $response['content'] = '该手机已经注册了！'; exit(json_encode($response)); } $data = array("user_name" => $mobile, "password" => $password, "mobile" => $mobile, "create_time" => time(), "update_time" => time(), "status" => 1); if($this->db->insert("ytwusers_users", $data)){ $user_id = $this->db->insert_id(); $data['user_id'] = $user_id; $response['code'] = 1; $response['content'] = '注册成功'; $response['data'] = $data; $log_info = array("log_time" => time(), "creater" => $user_id, "log_IP" => $this->get_ip(), "log_content" => $mobile . " 在 " . date("Y-m-d H:i:s") . " 注册帐号!"); $this->db->insert("ytwusers_log", $log_info); exit(json_encode($response)); }else{ $response['code'] = 3; $response['content'] = '数据库操作失败！'; exit(json_encode($response)); } } |
- 本文固定链接: http://www.web8899.com/web_develop/html5/757.html
- 转载请注明: 郑 国华 于 WEB终结者 发表
这个作者貌似有点懒，什么都没有留下。