鲨鱼网
使用Titanium php mysql开发登录注册实例
创始人
2024-08-22 10:42:16
0次

 一、数据库

1、使用mysql创建一个数据库--titanium_users

2、新建一个表--users

3、插入一些字段

你也可以直接执行这个SQL文件

  1. --phpMyAdminSQLDump 
  2.  
  3. --version2.10.3 
  4.  
  5. --http://www.phpmyadmin.net 
  6.  
  7. -- 
  8.  
  9. --主机:localhost 
  10.  
  11. --生成日期:2012年04月15日14:57 
  12.  
  13. --服务器版本:5.0.51 
  14.  
  15. --PHP版本:5.2.6 
  16.  
  17. SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO"; 
  18.  
  19. -- 
  20.  
  21. --数据库:`titanium_user` 
  22.  
  23. -- 
  24.  
  25. CREATEDATABASE`titanium_user`DEFAULTCHARACTERSETutf8COLLATEutf8_unicode_ci; 
  26.  
  27. USE`titanium_user`; 
  28.  
  29. ---------------------------------------------------------- 
  30.  
  31. -- 
  32.  
  33. --表的结构`users` 
  34.  
  35. -- 
  36.  
  37. CREATETABLE`users`( 
  38.  
  39. `id`int(11)NOTNULLauto_increment, 
  40.  
  41. `username`varchar(255)collateutf8_unicode_ciNOTNULL, 
  42.  
  43. `password`varchar(32)collateutf8_unicode_ciNOTNULL, 
  44.  
  45. `name`varchar(255)collateutf8_unicode_ciNOTNULL, 
  46.  
  47. `email`varchar(255)collateutf8_unicode_ciNOTNULL, 
  48.  
  49. PRIMARYKEY(`id`) 
  50.  
  51. )ENGINE=MyISAMDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ciCOMMENT='用户表'AUTO_INCREMENT=8; 
  52.  
  53. -- 
  54.  
  55. --导出表中的数据`users` 
  56.  
  57. -- 
  58.  
  59. INSERTINTO`users`VALUES(1,'xiaozhang','asdasd','a4','xiaozhanga4@gmail.com'); 
  60.  
  61. INSERTINTO`users`VALUES(2,'a4','asdasd','xiaozhang','xiaozhanga4@gmail.com'); 
  62.  
  63. INSERTINTO`users`VALUES(3,'1','1','1','1@g.com'); 
  64.  
  65. INSERTINTO`users`VALUES(4,'3','3','3','3@g.cn'); 
  66.  
  67. INSERTINTO`users`VALUES(5,'5','5','5','5@g.cn'); 
  68.  
  69. INSERTINTO`users`VALUES(6,'8','8','8','8@g.cn'); 
  70.  
  71. INSERTINTO`users`VALUES(7,'9','9','9','9@g.cn'); 

二、构建UI

创建titanium工程后，我们首先构建UI，我们的界面从顶层开始，

打开app.js

第一是一个tabGroup，下来有两个tab，每个tab分别有一个window，最后在window里添加一些文本输入框，按钮。

代码如下：

  1. //thissetsthebackgroundcolorofthemasterUIView(whentherearenowindows/tabgroupsonit) 
  2.  
  3. Titanium.UI.setBackgroundColor('#000'); 
  4.  
  5. //创建tabGroup，因为我们的程序将使用两个tab 
  6.  
  7. vartabGroup=Titanium.UI.createTabGroup(); 
  8.  
  9. //创建登录的window 
  10.  
  11. varlogin=Titanium.UI.createWindow({ 
  12.  
  13. title:'登录', 
  14.  
  15. tabBarHidden:true, 
  16.  
  17. url:'login.js' 
  18.  
  19. }); 
  20.  
  21. //创建登录窗口的tab 
  22.  
  23. varloginTab=Titanium.UI.createTab({ 
  24.  
  25. title:"登录", 
  26.  
  27. window:login 
  28.  
  29. }); 
  30.  
  31. //创建注册的window 
  32.  
  33. varaccount=Titanium.UI.createWindow({ 
  34.  
  35. title:'注册', 
  36.  
  37. url:'account.js' 
  38.  
  39. }); 
  40.  
  41. //创建注册窗口的tab 
  42.  
  43. varaccountTab=Titanium.UI.createTab({ 
  44.  
  45. title:'注册', 
  46.  
  47. window:account 
  48.  
  49. }); 
  50.  
  51. //添加登录的tab到tabGroup 
  52.  
  53. tabGroup.addTab(loginTab); 
  54.  
  55. //添加注册的tab到tabGroup 
  56.  
  57. tabGroup.addTab(accountTab); 
  58.  
  59. //打开tabGroup 
  60.  
  61. tabGroup.open(); 

创建登录接口：

创建login.js

代码如下：

  1. //创建win对象指向当前窗口即登录窗口 
  2.  
  3. varwin=Titanium.UI.currentWindow; 
  4.  
  5. //创建用户名文本输入框 
  6.  
  7. varusername=Titanium.UI.createTextField({ 
  8.  
  9. color:'#336699', 
  10.  
  11. top:10, 
  12.  
  13. left:10, 
  14.  
  15. width:300, 
  16.  
  17. height:40, 
  18.  
  19. hintText:'用户名', 
  20.  
  21. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  22.  
  23. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  24.  
  25. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  26.  
  27. }); 
  28.  
  29. //添加用户名文本输入框到当前window 
  30.  
  31. win.add(username); 
  32.  
  33. //创建密码输入框 
  34.  
  35. varpassword=Titanium.UI.createTextField({ 
  36.  
  37. color:'#336699', 
  38.  
  39. top:60, 
  40.  
  41. left:10, 
  42.  
  43. width:300, 
  44.  
  45. height:40, 
  46.  
  47. hintText:'密码', 
  48.  
  49. passwordMask:true, 
  50.  
  51. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  52.  
  53. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  54.  
  55. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  56.  
  57. }); 
  58.  
  59. //添加密码输入框到当前窗口 
  60.  
  61. win.add(password); 
  62.  
  63. //创建登录按钮 
  64.  
  65. varloginBtn=Titanium.UI.createButton({ 
  66.  
  67. title:'登录', 
  68.  
  69. top:110, 
  70.  
  71. width:90, 
  72.  
  73. height:35, 
  74.  
  75. borderRadius:1, 
  76.  
  77. font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14} 
  78.  
  79. }); 
  80.  
  81. //添加登录按钮到当前窗口 
  82.  
  83. win.add(loginBtn); 

创建account.js

代码如下：

  1. //创建win对象指向当前窗口即登录窗口 
  2.  
  3. varwin=Titanium.UI.currentWindow; 
  4.  
  5. //创建垂直滚动的视图 
  6.  
  7. varscrollView=Titanium.UI.createScrollView({ 
  8.  
  9. contentWidth:'auto', 
  10.  
  11. contentHeight:'auto', 
  12.  
  13. top:0, 
  14.  
  15. showVerticalScrollIndicator:true, 
  16.  
  17. showHorizontalScrollIndicator:false 
  18.  
  19. }); 
  20.  
  21. //添加垂直滚动的视图到当前窗口 
  22.  
  23. win.add(scrollView); 
  24.  
  25. //创建用户名输入框 
  26.  
  27. varusername=Titanium.UI.createTextField({ 
  28.  
  29. color:'#336699', 
  30.  
  31. top:10, 
  32.  
  33. left:10, 
  34.  
  35. width:300, 
  36.  
  37. height:40, 
  38.  
  39. hintText:'用户名', 
  40.  
  41. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  42.  
  43. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  44.  
  45. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  46.  
  47. }); 
  48.  
  49. //添加用户名输入框到垂直滚动的视图 
  50.  
  51. scrollView.add(username); 
  52.  
  53. //创建密码输入框 
  54.  
  55. varpassword1=Titanium.UI.createTextField({ 
  56.  
  57. color:'#336699', 
  58.  
  59. top:60, 
  60.  
  61. left:10, 
  62.  
  63. width:300, 
  64.  
  65. height:40, 
  66.  
  67. hintText:'密码', 
  68.  
  69. passwordMask:true, 
  70.  
  71. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  72.  
  73. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  74.  
  75. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  76.  
  77. }); 
  78.  
  79. //添加密码输入框到垂直滚动的视图 
  80.  
  81. scrollView.add(password1); 
  82.  
  83. //创建确认密码输入框 
  84.  
  85. varpassword2=Titanium.UI.createTextField({ 
  86.  
  87. color:'#336699', 
  88.  
  89. top:110, 
  90.  
  91. left:10, 
  92.  
  93. width:300, 
  94.  
  95. height:40, 
  96.  
  97. hintText:'确认密码', 
  98.  
  99. passwordMask:true, 
  100.  
  101. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  102.  
  103. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  104.  
  105. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  106.  
  107. }); 
  108.  
  109. //添加确认密码输入框到垂直滚动的视图 
  110.  
  111. scrollView.add(password2); 
  112.  
  113. //创建姓名输入框 
  114.  
  115. varnames=Titanium.UI.createTextField({ 
  116.  
  117. color:'#336699', 
  118.  
  119. top:160, 
  120.  
  121. left:10, 
  122.  
  123. width:300, 
  124.  
  125. height:40, 
  126.  
  127. hintText:'姓名', 
  128.  
  129. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  130.  
  131. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  132.  
  133. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  134.  
  135. }); 
  136.  
  137. //添加姓名输入框到垂直滚动的视图 
  138.  
  139. scrollView.add(names); 
  140.  
  141. //创建email输入框 
  142.  
  143. varemail=Titanium.UI.createTextField({ 
  144.  
  145. color:'#336699', 
  146.  
  147. top:210, 
  148.  
  149. left:10, 
  150.  
  151. width:300, 
  152.  
  153. height:40, 
  154.  
  155. hintText:'email', 
  156.  
  157. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  158.  
  159. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  160.  
  161. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  162.  
  163. }); 
  164.  
  165. //添加email输入框到垂直滚动的视图 
  166.  
  167. scrollView.add(email); 
  168.  
  169. //创建注册按钮 
  170.  
  171. varcreateBtn=Titanium.UI.createButton({ 
  172.  
  173. title:'注册', 
  174.  
  175. top:260, 
  176.  
  177. width:130, 
  178.  
  179. height:35, 
  180.  
  181. borderRadius:1, 
  182.  
  183. font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14} 
  184.  
  185. }); 
  186.  
  187. //添加注册按钮到垂直滚动的视图 
  188.  
  189. scrollView.add(createBtn); 

最终效果如下：

三、添加事件

UI构建完成后，我们将为登录注册按钮分别添加点击事件，完成登录注册功能

打开login.js

在代码的最后面加上以下代码：

  1. //创建HTTPClinet对象 
  2.  
  3. varloginReq=Titanium.Network.createHTTPClient(); 
  4.  
  5. //登录按钮事件--打开远程的逻辑操作，发送登录数据给远程文件进行判断处理 
  6.  
  7. loginBtn.addEventListener('click',function(e) 
  8.  
  9. { 
  10.  
  11. if(username.value!=''&&password.value!='') 
  12.  
  13. { 
  14.  
  15. loginReq.open("POST","http://10.0.2.2:8080/post_auth.php"); 
  16.  
  17. varparams={ 
  18.  
  19. username:username.value, 
  20.  
  21. password:password.value 
  22.  
  23. }; 
  24.  
  25. loginReq.send(params); 
  26.  
  27. } 
  28.  
  29. else 
  30.  
  31. { 
  32.  
  33. alert("Username/Passwordarerequired"); 
  34.  
  35. } 
  36.  
  37. }); 
  38.  
  39. //接收远程返回的数据并使用弹出框显示信息 
  40.  
  41. loginReq.onload=function() 
  42.  
  43. { 
  44.  
  45. varjson=this.responseText; 
  46.  
  47. varresponse=JSON.parse(json); 
  48.  
  49. if(response.logged==true) 
  50.  
  51. { 
  52.  
  53. alert("欢迎"+response.name+".你的Email是:"+response.email); 
  54.  
  55. } 
  56.  
  57. else 
  58.  
  59. { 
  60.  
  61. alert(response.message); 
  62.  
  63. } 
  64.  
  65. }; 

打开account.js文件

在最后的代码加上以下代码：

  1. //定义一个对象用来存储提交数据结果 
  2.  
  3. vartestresults; 
  4.  
  5. //创建验证email的函数 
  6.  
  7. functioncheckemail(emailAddress) 
  8.  
  9. { 
  10.  
  11. varstr=emailAddress; 
  12.  
  13. varfilter=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
  14.  
  15. if(filter.test(str)) 
  16.  
  17. { 
  18.  
  19. testresults=true; 
  20.  
  21. } 
  22.  
  23. else 
  24.  
  25. { 
  26.  
  27. testresults=false; 
  28.  
  29. } 
  30.  
  31. return(testresults); 
  32.  
  33. }; 
  34.  
  35. //创建httpclient对象 
  36.  
  37. varcreateReq=Titanium.Network.createHTTPClient(); 
  38.  
  39. //接收返回的数据 
  40.  
  41. createReq.onload=function() 
  42.  
  43. { 
  44.  
  45. if(this.responseText=="插入失败"||this.responseText=="用户名或电子邮箱已经存在") 
  46.  
  47. { 
  48.  
  49. createBtn.enabled=true; 
  50.  
  51. createBtn.opacity=1; 
  52.  
  53. alert(this.responseText); 
  54.  
  55. } 
  56.  
  57. else 
  58.  
  59. { 
  60.  
  61. varalertDialog=Titanium.UI.createAlertDialog({ 
  62.  
  63. title:'提示', 
  64.  
  65. message:this.responseText, 
  66.  
  67. buttonNames:['确定'] 
  68.  
  69. }); 
  70.  
  71. alertDialog.show(); 
  72.  
  73. alertDialog.addEventListener('click',function(e) 
  74.  
  75. { 
  76.  
  77. win.tabGroup.setActiveTab(0); 
  78.  
  79. }); 
  80.  
  81. } 
  82.  
  83. }; 
  84.  
  85. //按钮事件函数 
  86.  
  87. createBtn.addEventListener('click',function(e) 
  88.  
  89. { 
  90.  
  91. if(username.value!=''&&password1.value!=''&&password2.value!=''&&names.value!=''&&email.value!='') 
  92.  
  93. { 
  94.  
  95. if(password1.value!=password2.value) 
  96.  
  97. { 
  98.  
  99. alert("密码不匹配"); 
  100.  
  101. } 
  102.  
  103. else 
  104.  
  105. { 
  106.  
  107. if(!checkemail(email.value)) 
  108.  
  109. { 
  110.  
  111. alert("请输入有效的电子邮箱"); 
  112.  
  113. } 
  114.  
  115. else 
  116.  
  117. { 
  118.  
  119. createBtn.enabled=false; 
  120.  
  121. createBtn.opacity=0.3; 
  122.  
  123. createReq.open("POST","http://10.0.2.2:8080/post_register.php"); 
  124.  
  125. varparams={ 
  126.  
  127. username:username.value, 
  128.  
  129. password:password1.value, 
  130.  
  131. names:names.value, 
  132.  
  133. email:email.value 
  134.  
  135. }; 
  136.  
  137. createReq.send(params); 
  138.  
  139. } 
  140.  
  141. } 
  142.  
  143. } 
  144.  
  145. else 
  146.  
  147. { 
  148.  
  149. alert("所有字段已经提交"); 
  150.  
  151. } 
  152.  
  153. }); 

四、创建后台逻辑处理文件

我们使用的是PHP，请看

创建登录处理文件post_auth.php放在你的服务器里:

  1. //定义数据库连接 
  2.  
  3. $con=mysql_connect('localhost','root','root'); 
  4.  
  5. if(!$con) 
  6.  
  7. { 
  8.  
  9. echo"Failedtomakeconnection."; 
  10.  
  11. exit; 
  12.  
  13. } 
  14.  
  15. //Selectthedatabase.Enterthenameofyourdatabase(notthesameasthetablename) 
  16.  
  17. $db=mysql_select_db('titanium_user'); 
  18.  
  19. if(!$db) 
  20.  
  21. { 
  22.  
  23. echo"Failedtoselectdb."; 
  24.  
  25. exit; 
  26.  
  27. } 
  28.  
  29. //$_POST['username']and$_POST['password']aretheparamnameswesentinourclickeventinlogin.js 
  30.  
  31. $username=$_POST['username']; 
  32.  
  33. $password=$_POST['password']; 
  34.  
  35. //Selecteveythingfromtheuserstablewhereusernamefield==theusernamewepostedandpasswordfield==thepasswordweposted 
  36.  
  37. $sql="SELECT*FROMusersWHEREusername='".$username."'ANDpassword='".$password."'"; 
  38.  
  39. $query=mysql_query($sql); 
  40.  
  41. //Ifwefindamatch,createanarrayofdata,json_encodeitandechoitout 
  42.  
  43. if(mysql_num_rows($query)>0) 
  44.  
  45. { 
  46.  
  47. $row=mysql_fetch_array($query); 
  48.  
  49. $response=array( 
  50.  
  51. 'logged'=>true, 
  52.  
  53. 'name'=>$row['name'], 
  54.  
  55. 'email'=>$row['email'] 
  56.  
  57. ); 
  58.  
  59. echojson_encode($response); 
  60.  
  61. } 
  62.  
  63. else 
  64.  
  65. { 
  66.  
  67. //Elsetheusernameand/orpasswordwasinvalid!Createanarray,json_encodeitandechoitout 
  68.  
  69. $response=array( 
  70.  
  71. 'logged'=>false, 
  72.  
  73. 'message'=>'InvalidUsernameand/orPassword' 
  74.  
  75. ); 
  76.  
  77. echojson_encode($response); 
  78.  
  79. } 
  80.  
  81. ?> 

创建注册处理文件

  1. post_register.php 
  2.  
  3. $con=mysql_connect('localhost','root','root'); 
  4.  
  5. if(!$con) 
  6.  
  7. { 
  8.  
  9. echo"Failedtomakeconnection."; 
  10.  
  11. exit; 
  12.  
  13. } 
  14.  
  15. $db=mysql_select_db('titanium_user'); 
  16.  
  17. if(!$db) 
  18.  
  19. { 
  20.  
  21. echo"Failedtoselectdb."; 
  22.  
  23. exit; 
  24.  
  25. } 
  26.  
  27. $username=$_POST['username']; 
  28.  
  29. $password=$_POST['password']; 
  30.  
  31. $names=$_POST['names']; 
  32.  
  33. $email=$_POST['email']; 
  34.  
  35. $sql="SELECTusername,emailFROMusersWHEREusername='".$username."'ORemail='".$email."'"; 
  36.  
  37. $query=mysql_query($sql); 
  38.  
  39. if(mysql_num_rows($query)>0) 
  40.  
  41. { 
  42.  
  43. echo"Thatusernameoremailalreadyexists"; 
  44.  
  45. } 
  46.  
  47. else 
  48.  
  49. { 
  50.  
  51. $insert="INSERTINTOusers(username,password,name,email)VALUES('".$username."','".$password."','".$names."','".$email."')"; 
  52.  
  53. $query=mysql_query($insert); 
  54.  
  55. if($query) 
  56.  
  57. { 
  58.  
  59. echo"Thanksforregistering.Youmaynowlogin."; 
  60.  
  61. } 
  62.  
  63. else 
  64.  
  65. { 
  66.  
  67. echo"Insertfailed"; 
  68.  
  69. } 
  70.  
  71. } 
  72.  
  73. ?> 

OK！再次运行我们的APP，看最后的效果吧

注册成功界面

注册成功界面

上一篇：报告称Android平板美国份额达42%紧追iPad

下一篇：博通和腾达联手推出双频路由器和Wi-Fi PLC产品

相关内容

热门资讯

PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则，即不考虑来源地提供所有内容和应用的...
各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方，这里我们主要介绍各种千兆交换机的数据接口类型，作为局域网的主要连接设...
粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候，笔者扑哧笑了，不是笑这款笔记本，而是笑这款产品的颜色...
什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中，我们已经阐述了一个重要观点，即：安全要素信息呈现出大数据的特征...
如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力，更是有效的利用了资源，提高了效率。那么我们现在来说一下网络负载...
如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
30分钟搞定iOS自定义相机 最近公司的项目中用到了相机，由于不用系统的相机，UI给的相机切图，必须自定义才可以。就花时间简单研究...
Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...