起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 65503|回复: 88

WeX5做的一个简单的登录页面的代码(PHP)

  [复制链接]

33

主题

213

帖子

1154

积分

金牌会员

Rank: 6Rank: 6

积分
1154
QQ
发表于 2015-3-23 23:11:45 | 显示全部楼层 |阅读模式
本帖最后由 biyaooo 于 2015-5-19 18:32 编辑

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

QQ图片20150323230145.png       QQ图片20150323232116.png

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



评分

参与人数 2威望 +56 收起 理由
X5联盟帮扶部 + 50 为突破3万阅读量点赞!
Masion + 6

查看全部评分

33

主题

213

帖子

1154

积分

金牌会员

Rank: 6Rank: 6

积分
1154
QQ
 楼主| 发表于 2015-3-23 23:57:09 | 显示全部楼层
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. ?>
复制代码



点评

后端怎么搞  发表于 2016-6-25 22:18

评分

参与人数 2威望 +50 收起 理由
Masion + 10
X5联盟帮扶部 + 40 赞!

查看全部评分

回复 支持 7 反对 0

使用道具 举报

33

主题

213

帖子

1154

积分

金牌会员

Rank: 6Rank: 6

积分
1154
QQ
 楼主| 发表于 2015-5-20 12:01:14 | 显示全部楼层
luo123xj123 发表于 2015-5-19 11:27
好贴要顶!!!赞!!!
楼主可否把wing的那块也分享下呢。示例里的源码好多,分不清呢
谢谢。新手,见谅。 ...

wing还没有改好,后面整理好了再一起发出来
回复 支持 1 反对 0

使用道具 举报

2

主题

9

帖子

38

积分

新手上路

Rank: 1

积分
38
QQ
发表于 2015-3-24 18:57:21 | 显示全部楼层
1.登陆成功后,登陆名,如何传递给  index.w (主页文件)并显示,

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

点评

我也很关心这个问题呀!不知道哪位大侠有相关方面的经验  发表于 2015-4-5 16:23
回复 支持 1 反对 0

使用道具 举报

1

主题

5

帖子

48

积分

新手上路

Rank: 1

积分
48
发表于 2015-3-24 20:23:08 | 显示全部楼层
我重新回来了,我先来支持下楼主。
回复 支持 反对

使用道具 举报

33

主题

213

帖子

1154

积分

金牌会员

Rank: 6Rank: 6

积分
1154
QQ
 楼主| 发表于 2015-3-25 06:44:05 来自手机 | 显示全部楼层
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

我是这样保存的 是成功的了
回复 支持 反对

使用道具 举报

1

主题

6

帖子

25

积分

新手上路

Rank: 1

积分
25
QQ
发表于 2015-3-25 21:29:58 | 显示全部楼层
谢谢分享
回复

使用道具 举报

377

主题

2593

帖子

5092

积分

论坛元老

Rank: 8Rank: 8

积分
5092
QQ
发表于 2015-3-28 07:56:22 | 显示全部楼层
本帖最后由 Masion 于 2015-3-28 07:57 编辑

biyao,牛人呀最近也在开始接触手机APP
你打代码正是我需要的
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

8

主题

18

帖子

73

积分

初级会员

Rank: 2

积分
73
QQ
发表于 2015-4-6 00:29:27 | 显示全部楼层
请问是怎么插入背景图片的?content里背景图片的路径怎么设置都加载不了图片
回复 支持 反对

使用道具 举报

33

主题

213

帖子

1154

积分

金牌会员

Rank: 6Rank: 6

积分
1154
QQ
 楼主| 发表于 2015-4-7 11:53:37 | 显示全部楼层
lph1991926 发表于 2015-4-6 00:29
请问是怎么插入背景图片的?content里背景图片的路径怎么设置都加载不了图片 ...

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

使用道具 举报

0

主题

4

帖子

17

积分

新手上路

Rank: 1

积分
17
QQ
发表于 2015-4-11 16:15:02 | 显示全部楼层
楼主牛人
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2019-7-19 23:28 , Processed in 0.158957 second(s), 30 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表