首页 > WEB前端 > HTML5 > AppCan实现登录注册页面
2015
03-10

AppCan实现登录注册页面

最近两天给公司做了一个小小的App应用,先是看中了PhoneGap的平台,想用PhoneGap平台来开发这个App。

但是写着写着发现了PhoneGap的代码还不如原来的AppCan的代码简洁。而且AppCan的代码上传到服务器可以打包Android的App和iPhone的App一举两得了。

下面介绍一下最简单的登录页面和注册页面的实现方式和代码:

一、登录页面: login_content.html

login

 

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

register

 

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']) : &quot;&quot;);
		$uname = trim($uname);
		$pswd = (isset($_REQUEST['pswd']) ? ($_REQUEST['pswd']) : &quot;&quot;);
		$pswd = md5(trim($pswd));
 
		$response = array(&quot;code&quot;=&gt;0,&quot;content&quot;=&gt;&quot;帐号和密码不正确&quot;);
		$login_info = $this-&gt;db-&gt;query(&quot;SELECT user_id,user_name,mobile,login_times FROM ytwusers_users WHERE user_name = &#39;$uname&#39; AND password = &#39;$pswd&#39;&quot;)-&gt;result_array();
		if(count($login_info) &gt; 0){
			$this-&gt;db-&gt;where(&#39;user_id&#39;, $login_info[0]['user_id']);
			$data = array(&#39;last_login_time&#39; =&gt; time(),&#39;login_times&#39; =&gt; $login_info[0]['login_times'] + 1);
			$this-&gt;db-&gt;update(&quot;ytwusers_users&quot;, $data);
			$response['code'] = 1; 
			$response['content'] = &#39;登录成功&#39;;
			
			$_SESSION['user_name'] = $uname;
			$_SESSION['user_id'] = $login_info[0]['user_id'];
 
			$back_data = array_merge($login_info[0], $data);
			$count_building = $this-&gt;db-&gt;query(&quot;select count(building_id) as count from ytwusers_building where create_person = &quot; . $login_info['0']['user_id'])-&gt;row_array();
			$count_building = $count_building['count'];
			$count_community = $this-&gt;db-&gt;query(&quot;select count(community_id) as count from ytwusers_community where create_person = &quot; . $login_info['0']['user_id'])-&gt;row_array();
			$count_community = $count_community['count'];
			$count_customers = $this-&gt;db-&gt;query(&quot;select count(customer_id) as count from ytwusers_customers where create_person = &quot; . $login_info['0']['user_id'])-&gt;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(&quot;log_time&quot; =&gt; time(),
							  &quot;creater&quot; =&gt; $login_info[0]['user_id'],
							  &quot;log_IP&quot; =&gt; $this-&gt;get_ip(),
							  &quot;log_content&quot; =&gt; $uname . &quot;&quot; . date(&quot;Y-m-d H:i:s&quot;) . &quot; 登录系统!&quot;);
			$this-&gt;db-&gt;insert(&quot;ytwusers_log&quot;, $log_info);
 
			$response['data'] = $back_data;
		}
 
		exit(json_encode($response));
	}
 
	public function register()
	{
		$mobile = (isset($_REQUEST['mobile']) ? ($_REQUEST['mobile']) : &quot;&quot;);
		$mobile = trim($mobile);
		$password = (isset($_REQUEST['password']) ? ($_REQUEST['password']) : &quot;&quot;);
		$password = md5(trim($password));
 
		if(!preg_match(&quot;/^0{0,1}(13[0-9]|14[0-9]|15[0-9]|18[0-9])[0-9]{8}$/&quot;, $mobile)){
			$response['code'] = 0;
			$response['content'] = &#39;手机号码格式不正确!&#39;;
			exit(json_encode($response));
		}
 
		$check_exist = $this-&gt;db-&gt;query(&quot;SELECT count(`user_name`) as count FROM ytwusers_users WHERE user_name = &#39;$mobile&#39;&quot;)-&gt;row_array();
		if($check_exist['count'] &gt; 0){
			$response['code'] = 2;
			$response['content'] = &#39;该手机已经注册了!&#39;;
			exit(json_encode($response));
		}
 
		$data = array(&quot;user_name&quot; =&gt; $mobile, &quot;password&quot; =&gt; $password, &quot;mobile&quot; =&gt; $mobile, &quot;create_time&quot; =&gt; time(), &quot;update_time&quot; =&gt; time(), &quot;status&quot; =&gt; 1);
 
		if($this-&gt;db-&gt;insert(&quot;ytwusers_users&quot;, $data)){
			$user_id = $this-&gt;db-&gt;insert_id();
			$data['user_id'] = $user_id;
			$response['code'] = 1;
			$response['content'] = &#39;注册成功&#39;;
			$response['data'] = $data;
 
			$log_info = array(&quot;log_time&quot; =&gt; time(),
							  &quot;creater&quot; =&gt; $user_id,
							  &quot;log_IP&quot; =&gt; $this-&gt;get_ip(),
							  &quot;log_content&quot; =&gt; $mobile . &quot;&quot; . date(&quot;Y-m-d H:i:s&quot;) . &quot; 注册帐号!&quot;);
			$this-&gt;db-&gt;insert(&quot;ytwusers_log&quot;, $log_info);
 
			exit(json_encode($response));
		}else{
			$response['code'] = 3;
			$response['content'] = &#39;数据库操作失败!&#39;;
			exit(json_encode($response));
		}
	}

 

最后编辑:
作者:郑 国华
这个作者貌似有点懒,什么都没有留下。

留下一个回复