无限星辰工作室-客户无限互联网动力之源

标题: WeX5做的一个简单的登录页面的代码(PHP)转载 [打印本页]

作者: crx349    时间: 2016-3-31 15:57
标题: WeX5做的一个简单的登录页面的代码(PHP)转载
从去年突然想做一个APP,看到了起步的X5,然后花了多月时间学习html5 css javascript经过几个月的学习然后结合X5做了这个APP登录实例,前端X5用的是BootStrap,后端是PHP的代码。

(, 下载次数: 1588)        (, 下载次数: 1579)

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

  54.         };

  55.         return Model;
  56. });
复制代码

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.          $username =Response::_post('username');
  8.          $userpass =Response::_post('userpass');
  9.          
  10.         
  11.         if(!isset($username)||!isset($userpass))
  12.         {
  13.                 Response::show(400,'输入的数据不正确');
  14.         }
  15.         else
  16.         {
  17.                 $connect = Db::getInstance()->connect();
  18.                 $sql="select username,shopname from user where username='".$username."'and password='".md5($userpass)."'";
  19.                 $result = mysql_query($sql,$connect);

  20.                 if(!mysql_num_rows($result))
  21.                 {
  22.                         Response::show(400,'输入的用户名或密码不正确');
  23.                 }
  24.                 else
  25.                 {
  26.                         $results =mysql_fetch_assoc($result);
  27.                         Response::show(200,'success',$results);
  28.                         
  29.                 }
  30.         }
  31.         
  32.         

  33. ?>
复制代码

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. ?>
复制代码

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. ?>
复制代码

作者: crx349    时间: 2016-3-31 16:33
ThinkPHP\Library\Think\Controller\RestController.class.php
修改过的:









欢迎光临 无限星辰工作室-客户无限互联网动力之源 (https://xmspace.net/) Powered by Discuz! X3.4