WeX5做的一个简单的登录页面的代码（PHP）

biyaooo

从去年突然想做一个APP，看到了起步的X5，然后花了多月时间学习html5 css javascript经过几个月的学习然后结合X5做了这个APP登录实例，前端X5用的是BootStrap，后端是PHP的代码。 后端代码借助了 慕课网的视频代码。

     

Login.w文件

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;">  
   
3.   <div component="$UI/system/components/justep/model/model" xid="model1" style="left:6px;top:393px;height:46px;width:143px;">
   
4.   <div component="$UI/system/components/justep/data/data" autoLoad="false" xid="userData" idColumn="username" autoNew="true">
   
5.   <column label="username" name="username" type="String" xid="default1"></column>
   
6.   <column label="userpass" name="userpass" type="String" xid="default2"></column>
   
7.   <column label="Sname" name="Sname" type="String" xid="default3"></column>
   
8.   <column label="Sarea" name="Sarea" type="String" xid="default4"></column>
   
9.   <column label="Sbrand" name="Sbrand" type="String" xid="default5"></column>
   
10.   <column label="Spower" name="Spower" type="String" xid="default6"></column>
    
11.   <column label="Sdepartment" name="Sdepartment" type="String" xid="default7"></column>
    
12.   </div>
    
13.   </div>
    
14.   <span component="$UI/system/components/justep/messageDialog/messageDialog" xid="messageDialog" style="left:9px;top:351px;"></span><div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="0" xid="contents1">
    
15.    <div class="x-contents-content" xid="content1" style="background-image:url(img/loginbg4.jpg);"><div xid="div1" style="margin:10px 50px 0px 50px;" align="center"><img src="img/logo.png" alt="" xid="image1" height="150"></img>
    
16.   </div>
    
17.   <div class="form-vertical" component="$UI/system/components/bootstrap/form/form" xid="form1"><div xid="div12" class="form-group" style="margin-right:auto;margin-left:auto;width:95%;">
    
18.   
    
19.   <label xid="label4" class="sr-only"><![CDATA[用户名]]></label>
    
20.   <div xid="div14" class="input-group"><div xid="div15" class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
    
21.   <input component="$UI/system/components/justep/input/input" class="form-control" xid="username" placeHolder="请输入用户名" bind-ref="userData.ref('username')"></input></div></div><div xid="div13" class="form-group" style="margin-right:auto;margin-left:auto;width:95%;">  <label xid="label5" class="sr-only"><![CDATA[密码]]></label>
    
22.   <div xid="div16" class="input-group"><div xid="div17" class="input-group-addon"><span class="glyphicon glyphicon-edit"></span></div>
    
23.   <input component="$UI/system/components/justep/input/password" class="form-control" xid="password" placeHolder="请输入密码" bind-ref="userData.ref('userpass')"></input>
    
24.   </div></div></div><div component="$UI/system/components/justep/row/row" class="x-row" xid="row4">
    
25.    <div class="x-col" xid="col10" style="text-align:center;"><a component="$UI/system/components/justep/button/button" class="btn btn-success btn-block" label="登录系统" xid="button1" onClick="btnCheckUserLogin">
    
26.    <i xid="i1"></i>
    
27.    <span xid="span1">登录系统</span></a></div>
    
28.    </div>
    
29.   <div xid="div3" style="margin:50px 20px 50px 20px;height:50px;text-align:center;"><span xid="span2"><![CDATA[ © Biyao]]></span>
    
30.   </div>
    
31.   </div></div>
    
32.   </div>

复制代码

Login.js文件

1. define(function(require){
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4.         require("$UI/system/lib/cordova/cordova");
   
5. //        require("$UI/blshopApp/JS/Chart.js");
   
6.         require("cordova!org.apache.cordova.device");
   
7.         
   
8.         var Model = function(){
   
9.                 this.callParent();
   
10.         };
    
11. 
    
12.         
    
13.         Model.prototype.btnCheckUserLogin = function(event){
    
14.                 var userData = this.comp("userData");
    
15.                 //用户名和密码为空提示
    
16.                 if ( $.trim(userData.val("username")) === "" || $.trim(userData.val("userpass")) === "") {
    
17.                         this.comp("messageDialog").show({
    
18.                                 "title" : "温馨提示",
    
19.                                 "message" : "请输入用户名或密码"
    
20.                         });
    
21.                 }
    
22.                 else
    
23.                 {
    
24.                         var self = this;
    
25.                         //ajax校验用户名和密码
    
26.                         $.ajax({
    
27.                                 "type" : "post",
    
28.                                 "async" : false,
    
29.                                 "data":{
    
30.                                         "username":userData.val("username"), //POS提交用户名字段
    
31.                                         "userpass":userData.val("userpass")  //POS提交密码字段
    
32.                                 },
    
33.                                 "dataType" : "json",
    
34.                                 "url" : "http://localhost:8080/checkuserLogin.php", //PHP数据库校验用户名和密码是否正常
    
35.                                 "success" : function(data) {
    
36.                                         if(data['code']==200){          //php返回200，代表后端程序成功返回查询结果
    
37.                                                 localStorage.setItem('username',data['data']['username']);  //登录成功存储用户名到html localStorage
    
38.                                                 localStorage.setItem('shopname',data['data']['shopname']);  //登录成功存储中文名称到html localStorage
    
39.                                                 window.location.href="./index.w";   //登录成功，跳转到APP首页
    
40.                                         }
    
41.                                         else if(data['code']==400) //返回400，代表数据库查询不到记录，用户名或密码
    
42.                                         {
    
43.                                                 self.comp("messageDialog").show({
    
44.                                                 "title" : "温馨提示",
    
45.                                                 "message" : "输入的用户名或密码不正确"
    
46.                                 });
    
47.                                         }        
    
48.                                 },
    
49.                                 "error": function(){
    
50.                                                 alert("数据传输失败！");
    
51.                                         }
    
52.                                 
    
53.                         });
    
54.                 }
    
55. 
    
56.         };
    
57. 
    
58.         return Model;
    
59. });

复制代码

checkuserLogin.php文件  // 用户数据库校验文件

1. <?php
   
2. header("Content-Type: application/json;charset=utf-8");
   
3. header("Access-Control-Allow-Origin:*");
   
4. header("Access-Control-Allow-Methods:POST,GET");
   
5. require_once("./db.php");
   
6. require_once("./Response.php");
   
7. 
   
8.          $username =Response::_post('username');
   
9.          $userpass =Response::_post('userpass');
   
10.          
    
11.         
    
12.         if(!isset($username)||!isset($userpass))
    
13.         {
    
14.                 Response::show(400,'输入的数据不正确');
    
15.         }
    
16.         else
    
17.         {
    
18.                 $connect = Db::getInstance()->connect();
    
19.                 $sql="select username,shopname from user where username='".$username."'and password='".md5($userpass)."'";
    
20.                 $result = mysql_query($sql,$connect);
    
21. 
    
22.                 if(!mysql_num_rows($result))
    
23.                 {
    
24.                         Response::show(400,'输入的用户名或密码不正确');
    
25.                 }
    
26.                 else
    
27.                 {
    
28.                         $results =mysql_fetch_assoc($result);
    
29.                         Response::show(200,'success',$results);
    
30.                         
    
31.                 }
    
32.         }
    
33.         
    
34.         
    
35. 
    
36. ?>

复制代码

db.php    //数据库配置及链接资源文件

1. <?php
   
2. class Db{
   
3.         static private $_instance;
   
4.         static private $_connectSource;
   
5.         private $_dbConfig = array(
   
6.                 'host'=>'127.0.0.1:3306',
   
7.                 'user'=>'root',
   
8.                 'password'=>'x5',
   
9.                 'database'=>'blshopapp'
   
10.         );
    
11.         
    
12.         private function __construct(){
    
13.                         
    
14.         }
    
15.         static public function getInstance()
    
16.         {
    
17.                 if(!(self::$_instance instanceof self))
    
18.                 {
    
19.                         self::$_instance = new self();
    
20.                 }
    
21.                 return self::$_instance;
    
22.         }
    
23.         
    
24.         public function connect()
    
25.         {
    
26.                 if(!self::$_connectSource)
    
27.                 {
    
28.                         self::$_connectSource=mysql_connect($this->_dbConfig['host'],$this->_dbConfig['user'],$this->_dbConfig['password']);
    
29.                 if(!self::$_connectSource)
    
30.                 {
    
31.                         throw new Exception('mysql conncet error'.mysql_error());
    
32.                         //die('mysql conncet error'.mysql_error());
    
33.                 }
    
34.                 mysql_select_db($this->_dbConfig['database'],self::$_connectSource);
    
35.                 mysql_query("set names UTF8",self::$_connectSource);
    
36.                
    
37.                 }        
    
38.                 return self::$_connectSource;
    
39.         }               
    
40. }
    
41. 
    
42. ?>

复制代码

biyaooo

Response.php   //服务器端返回的APP接口数据   支持JSON XML ARRAY

1. <?php
   
2.         class Response{
   
3.                 const JSON="json";
   
4.                
   
5.         /**
   
6.         按综合方式输出通信数据
   
7.         *@param integer $code 状态码
   
8.         *@param string $message 提示信息
   
9.         *@param array $data 数据
   
10.         *@param string $data 数据类型
    
11.         *return string
    
12.         */
    
13.                 public static function show($code,$message='',$data=array(),$type=self::JSON)
    
14.                 {
    
15.                         if(!is_numeric($code))
    
16.                         {
    
17.                                 return"";
    
18.                         }
    
19.                         $type=isset($_GET['dataType'])?$_GET['dataType']:'json';
    
20.                                 $result=array(
    
21.                                 'code'=>$code,
    
22.                                 'message'=>$message,
    
23.                                 'data'=>$data,
    
24.                         );
    
25.                        
    
26.                         if($type=='json')
    
27.                         {
    
28.                                 self::json($code,$message,$data);
    
29.                                 exit;
    
30.                         }elseif($type=='array')
    
31.                         {
    
32.                                 var_dump($result);
    
33.                         }elseif($type=='xml')
    
34.                         {
    
35.                                 self::xmlEncode($code,$message,$data);
    
36.                                 exit;
    
37.                         }else
    
38.                         {
    
39.                                 //TODO       
    
40.                         }
    
41.                 }       
    
42.        
    
43.         /**
    
44.         按json方式输出通信数据
    
45.         *@param integer $code 状态码
    
46.         *@param string $message 提示信息
    
47.         *@param array $data 数据
    
48.         *return string
    
49.         */
    
50.         public static function json($code,$message='',$data=array()){
    
51.                 if(!is_numeric($code))
    
52.                 {
    
53.                         return '';
    
54.                 }
    
55.                 $result=array(
    
56.                         'code'=>$code,
    
57.                         'message'=>$message,
    
58.                         'data'=>$data
    
59.                
    
60.                 );
    
61.                 echo json_encode($result);
    
62.                 exit;
    
63.         }
    
64.         /**
    
65.         按xml方式输出通信数据
    
66.         *@param integer $code 状态码
    
67.         *@param string $message 提示信息
    
68.         *@param array $data 数据
    
69.         *return string
    
70.         */       
    
71.         public static function xmlEncode($code,$message='',$data=array()){
    
72.                 if(!is_numeric($code))
    
73.                 {
    
74.                         return'';
    
75.                 }
    
76.                 $result=array(
    
77.                         'code'=>$code,
    
78.                         'message'=>$message,
    
79.                         'data'=>$data,
    
80.                 );
    
81.                
    
82.                 header("Content-Type:text/xml");
    
83.                 $xml = "<?xml version='1.0' encoding='UTF-8'?>\n";
    
84.                 $xml.="<root>\n";       
    
85.                 $xml.=self::xmlToEncode($result);       
    
86.                 $xml.="</root>";
    
87.                
    
88.                 echo $xml;
    
89.         }
    
90.        
    
91.         public static function xmlToEncode($data)
    
92.         {
    
93.                 $xml=$attr="";
    
94.                 foreach($data as $key => $value)
    
95.                 {
    
96.                         if(is_numeric($key)){
    
97.                                 $attr=" id='{$key}'";
    
98.                                 $key="item";       
    
99.                         }
    
100.                         $xml.="<{$key}{$attr}>\n";
     
101.                         $xml.=is_array($value)?self::xmlToEncode($value):$value;
     
102.                         $xml.="</{$key}>";
     
103.                 }
     
104.                 return $xml;
     
105.         }
     
106.        
     
107.         public static function _get($str)
     
108.         {
     
109.                 $val = !empty($_GET[$str]) ? $_GET[$str] : null;
     
110.                 return $val;
     
111.         }
     
112.        
     
113.                 public static function _post($str)
     
114.         {
     
115.                 $val = !empty($_POST[$str]) ? $_POST[$str] : null;
     
116.                 return $val;
     
117.         }
     
118. }
     
119. 
     
120. ?>

复制代码

biyaooo

luo123xj123 发表于 2015-5-19 11:27
好贴要顶！！！赞！！！
楼主可否把wing的那块也分享下呢。示例里的源码好多，分不清呢
谢谢。新手，见谅。 ...

wing还没有改好，后面整理好了再一起发出来

james2

1.登陆成功后，登陆名，如何传递给  index.w （主页文件）并显示，

2. 用户注销登陆 ，应该怎样写。

kookob

我重新回来了，我先来支持下楼主。

biyaooo

james2 发表于 2015-3-24 18:57
1.登陆成功后，登陆名，如何传递给  index.w （主页文件）并显示，

2. 用户注销登陆 ，应该怎样写。 ...

localStorage.setItem('username',data['data']['username']);  //登录成功存储用户名到html localStorage
                                                localStorage.setItem('shopname',data['data']['shopname']);  //登录成功存储中文名称到html localStorage

我是这样保存的 是成功的了

acuier

谢谢分享

Masion

biyao,牛人呀最近也在开始接触手机APP
你打代码正是我需要的

lph1991926

请问是怎么插入背景图片的？content里背景图片的路径怎么设置都加载不了图片

biyaooo

lph1991926 发表于 2015-4-6 00:29
请问是怎么插入背景图片的？content里背景图片的路径怎么设置都加载不了图片 ...

<div class="x-contents-content" xid="content1" style="background-image:url(img/loginbg4.jpg);">这是我背景图片设置的代码

gulay1688

楼主牛人