一、数据库
1、使用mysql创建一个数据库--titanium_users
2、新建一个表--users
3、插入一些字段
你也可以直接执行这个SQL文件
- --phpMyAdminSQLDump
- --version2.10.3
- --http://www.phpmyadmin.net
- --
- --主机:localhost
- --生成日期:2012年04月15日14:57
- --服务器版本:5.0.51
- --PHP版本:5.2.6
- SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO";
- --
- --数据库:`titanium_user`
- --
- CREATEDATABASE`titanium_user`DEFAULTCHARACTERSETutf8COLLATEutf8_unicode_ci;
- USE`titanium_user`;
- ----------------------------------------------------------
- --
- --表的结构`users`
- --
- CREATETABLE`users`(
- `id`int(11)NOTNULLauto_increment,
- `username`varchar(255)collateutf8_unicode_ciNOTNULL,
- `password`varchar(32)collateutf8_unicode_ciNOTNULL,
- `name`varchar(255)collateutf8_unicode_ciNOTNULL,
- `email`varchar(255)collateutf8_unicode_ciNOTNULL,
- PRIMARYKEY(`id`)
- )ENGINE=MyISAMDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ciCOMMENT='用户表'AUTO_INCREMENT=8;
- --
- --导出表中的数据`users`
- --
- INSERTINTO`users`VALUES(1,'xiaozhang','asdasd','a4','xiaozhanga4@gmail.com');
- INSERTINTO`users`VALUES(2,'a4','asdasd','xiaozhang','xiaozhanga4@gmail.com');
- INSERTINTO`users`VALUES(3,'1','1','1','1@g.com');
- INSERTINTO`users`VALUES(4,'3','3','3','3@g.cn');
- INSERTINTO`users`VALUES(5,'5','5','5','5@g.cn');
- INSERTINTO`users`VALUES(6,'8','8','8','8@g.cn');
- INSERTINTO`users`VALUES(7,'9','9','9','9@g.cn');
二、构建UI
创建titanium工程后,我们首先构建UI,我们的界面从顶层开始,
打开app.js
第一是一个tabGroup,下来有两个tab,每个tab分别有一个window,最后在window里添加一些文本输入框,按钮。
代码如下:
- //thissetsthebackgroundcolorofthemasterUIView(whentherearenowindows/tabgroupsonit)
- Titanium.UI.setBackgroundColor('#000');
- //创建tabGroup,因为我们的程序将使用两个tab
- vartabGroup=Titanium.UI.createTabGroup();
- //创建登录的window
- varlogin=Titanium.UI.createWindow({
- title:'登录',
- tabBarHidden:true,
- url:'login.js'
- });
- //创建登录窗口的tab
- varloginTab=Titanium.UI.createTab({
- title:"登录",
- window:login
- });
- //创建注册的window
- varaccount=Titanium.UI.createWindow({
- title:'注册',
- url:'account.js'
- });
- //创建注册窗口的tab
- varaccountTab=Titanium.UI.createTab({
- title:'注册',
- window:account
- });
- //添加登录的tab到tabGroup
- tabGroup.addTab(loginTab);
- //添加注册的tab到tabGroup
- tabGroup.addTab(accountTab);
- //打开tabGroup
- tabGroup.open();
创建登录接口:
创建login.js
代码如下:
- //创建win对象指向当前窗口即登录窗口
- varwin=Titanium.UI.currentWindow;
- //创建用户名文本输入框
- varusername=Titanium.UI.createTextField({
- color:'#336699',
- top:10,
- left:10,
- width:300,
- height:40,
- hintText:'用户名',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加用户名文本输入框到当前window
- win.add(username);
- //创建密码输入框
- varpassword=Titanium.UI.createTextField({
- color:'#336699',
- top:60,
- left:10,
- width:300,
- height:40,
- hintText:'密码',
- passwordMask:true,
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加密码输入框到当前窗口
- win.add(password);
- //创建登录按钮
- varloginBtn=Titanium.UI.createButton({
- title:'登录',
- top:110,
- width:90,
- height:35,
- borderRadius:1,
- font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
- });
- //添加登录按钮到当前窗口
- win.add(loginBtn);
创建account.js
代码如下:
- //创建win对象指向当前窗口即登录窗口
- varwin=Titanium.UI.currentWindow;
- //创建垂直滚动的视图
- varscrollView=Titanium.UI.createScrollView({
- contentWidth:'auto',
- contentHeight:'auto',
- top:0,
- showVerticalScrollIndicator:true,
- showHorizontalScrollIndicator:false
- });
- //添加垂直滚动的视图到当前窗口
- win.add(scrollView);
- //创建用户名输入框
- varusername=Titanium.UI.createTextField({
- color:'#336699',
- top:10,
- left:10,
- width:300,
- height:40,
- hintText:'用户名',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加用户名输入框到垂直滚动的视图
- scrollView.add(username);
- //创建密码输入框
- varpassword1=Titanium.UI.createTextField({
- color:'#336699',
- top:60,
- left:10,
- width:300,
- height:40,
- hintText:'密码',
- passwordMask:true,
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加密码输入框到垂直滚动的视图
- scrollView.add(password1);
- //创建确认密码输入框
- varpassword2=Titanium.UI.createTextField({
- color:'#336699',
- top:110,
- left:10,
- width:300,
- height:40,
- hintText:'确认密码',
- passwordMask:true,
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加确认密码输入框到垂直滚动的视图
- scrollView.add(password2);
- //创建姓名输入框
- varnames=Titanium.UI.createTextField({
- color:'#336699',
- top:160,
- left:10,
- width:300,
- height:40,
- hintText:'姓名',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加姓名输入框到垂直滚动的视图
- scrollView.add(names);
- //创建email输入框
- varemail=Titanium.UI.createTextField({
- color:'#336699',
- top:210,
- left:10,
- width:300,
- height:40,
- hintText:'email',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加email输入框到垂直滚动的视图
- scrollView.add(email);
- //创建注册按钮
- varcreateBtn=Titanium.UI.createButton({
- title:'注册',
- top:260,
- width:130,
- height:35,
- borderRadius:1,
- font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
- });
- //添加注册按钮到垂直滚动的视图
- scrollView.add(createBtn);
最终效果如下:
三、添加事件
UI构建完成后,我们将为登录注册按钮分别添加点击事件,完成登录注册功能
打开login.js
在代码的最后面加上以下代码:
- //创建HTTPClinet对象
- varloginReq=Titanium.Network.createHTTPClient();
- //登录按钮事件--打开远程的逻辑操作,发送登录数据给远程文件进行判断处理
- loginBtn.addEventListener('click',function(e)
- {
- if(username.value!=''&&password.value!='')
- {
- loginReq.open("POST","http://10.0.2.2:8080/post_auth.php");
- varparams={
- username:username.value,
- password:password.value
- };
- loginReq.send(params);
- }
- else
- {
- alert("Username/Passwordarerequired");
- }
- });
- //接收远程返回的数据并使用弹出框显示信息
- loginReq.onload=function()
- {
- varjson=this.responseText;
- varresponse=JSON.parse(json);
- if(response.logged==true)
- {
- alert("欢迎"+response.name+".你的Email是:"+response.email);
- }
- else
- {
- alert(response.message);
- }
- };
打开account.js文件
在最后的代码加上以下代码:
- //定义一个对象用来存储提交数据结果
- vartestresults;
- //创建验证email的函数
- functioncheckemail(emailAddress)
- {
- varstr=emailAddress;
- varfilter=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
- if(filter.test(str))
- {
- testresults=true;
- }
- else
- {
- testresults=false;
- }
- return(testresults);
- };
- //创建httpclient对象
- varcreateReq=Titanium.Network.createHTTPClient();
- //接收返回的数据
- createReq.onload=function()
- {
- if(this.responseText=="插入失败"||this.responseText=="用户名或电子邮箱已经存在")
- {
- createBtn.enabled=true;
- createBtn.opacity=1;
- alert(this.responseText);
- }
- else
- {
- varalertDialog=Titanium.UI.createAlertDialog({
- title:'提示',
- message:this.responseText,
- buttonNames:['确定']
- });
- alertDialog.show();
- alertDialog.addEventListener('click',function(e)
- {
- win.tabGroup.setActiveTab(0);
- });
- }
- };
- //按钮事件函数
- createBtn.addEventListener('click',function(e)
- {
- if(username.value!=''&&password1.value!=''&&password2.value!=''&&names.value!=''&&email.value!='')
- {
- if(password1.value!=password2.value)
- {
- alert("密码不匹配");
- }
- else
- {
- if(!checkemail(email.value))
- {
- alert("请输入有效的电子邮箱");
- }
- else
- {
- createBtn.enabled=false;
- createBtn.opacity=0.3;
- createReq.open("POST","http://10.0.2.2:8080/post_register.php");
- varparams={
- username:username.value,
- password:password1.value,
- names:names.value,
- email:email.value
- };
- createReq.send(params);
- }
- }
- }
- else
- {
- alert("所有字段已经提交");
- }
- });
四、创建后台逻辑处理文件
我们使用的是PHP,请看
创建登录处理文件post_auth.php放在你的服务器里:
- //定义数据库连接
- $con=mysql_connect('localhost','root','root');
- if(!$con)
- {
- echo"Failedtomakeconnection.";
- exit;
- }
- //Selectthedatabase.Enterthenameofyourdatabase(notthesameasthetablename)
- $db=mysql_select_db('titanium_user');
- if(!$db)
- {
- echo"Failedtoselectdb.";
- exit;
- }
- //$_POST['username']and$_POST['password']aretheparamnameswesentinourclickeventinlogin.js
- $username=$_POST['username'];
- $password=$_POST['password'];
- //Selecteveythingfromtheuserstablewhereusernamefield==theusernamewepostedandpasswordfield==thepasswordweposted
- $sql="SELECT*FROMusersWHEREusername='".$username."'ANDpassword='".$password."'";
- $query=mysql_query($sql);
- //Ifwefindamatch,createanarrayofdata,json_encodeitandechoitout
- if(mysql_num_rows($query)>0)
- {
- $row=mysql_fetch_array($query);
- $response=array(
- 'logged'=>true,
- 'name'=>$row['name'],
- 'email'=>$row['email']
- );
- echojson_encode($response);
- }
- else
- {
- //Elsetheusernameand/orpasswordwasinvalid!Createanarray,json_encodeitandechoitout
- $response=array(
- 'logged'=>false,
- 'message'=>'InvalidUsernameand/orPassword'
- );
- echojson_encode($response);
- }
- ?>
创建注册处理文件
- post_register.php
- $con=mysql_connect('localhost','root','root');
- if(!$con)
- {
- echo"Failedtomakeconnection.";
- exit;
- }
- $db=mysql_select_db('titanium_user');
- if(!$db)
- {
- echo"Failedtoselectdb.";
- exit;
- }
- $username=$_POST['username'];
- $password=$_POST['password'];
- $names=$_POST['names'];
- $email=$_POST['email'];
- $sql="SELECTusername,emailFROMusersWHEREusername='".$username."'ORemail='".$email."'";
- $query=mysql_query($sql);
- if(mysql_num_rows($query)>0)
- {
- echo"Thatusernameoremailalreadyexists";
- }
- else
- {
- $insert="INSERTINTOusers(username,password,name,email)VALUES('".$username."','".$password."','".$names."','".$email."')";
- $query=mysql_query($insert);
- if($query)
- {
- echo"Thanksforregistering.Youmaynowlogin.";
- }
- else
- {
- echo"Insertfailed";
- }
- }
- ?>
OK!再次运行我们的APP,看最后的效果吧
注册成功界面
注册成功界面