apicloud apicloud

注册
查看: 22190|回复: 64

[新手教程] 跟着扶孙公子一起写故事汇APP(三)利用Thinkphp做服务端

 

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

[新手教程] 跟着扶孙公子一起写故事汇APP(三)利用Thinkphp做服务端

 
22190 64 | 发表于 2016-3-2 14:55:45 |阅读模式 | |
本帖最后由 孙健 于 2016-3-2 15:46 编辑

好了,上次做的教程是利用作图软件做出效果图,其次把效果图做出Html页面,今天的教程是利用Thinkphp做服务端,这个呢需要一定的THINK基础知识,不过不用担心,THINK官网的文档给我们做了很多解释,复制代码并加上我们的判断即可实现,然后把返回的数据做出JSON就可以了。

首先我们下载好THINKPHP3.2X版本。

我呢喜欢这样设计,也建议大家这样做。

//如果大家没有空间或者服务器的话,我可以给大家推荐一个免费的测试空间。
百度直接搜索网眼免费空间。

我喜欢把项目分离开来,就是多个入口,比如后台入口就是后台,API入口就是API借口,前台入口就是前台。

把TP上传到空间或者服务器,你就会看到以下文件夹。
一个ThinkPHP(TP框架)index.php(默认入口)。

我们首先在目录下建立API入口,

api.php
代码如下:
  1. <?php
  2. // +----------------------------------------------------------------------
  3. // | ThinkPHP [ WE CAN DO IT JUST THINK ]
  4. // +----------------------------------------------------------------------
  5. // | Copyright (c) 2006-2014 http://thinkphp.cn All rights reserved.
  6. // +----------------------------------------------------------------------
  7. // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
  8. // +----------------------------------------------------------------------
  9. // | Author: liu21st <liu21st@gmail.com>
  10. // +----------------------------------------------------------------------

  11. // 应用入口文件

  12. // 检测PHP环境
  13. if(version_compare(PHP_VERSION,'5.3.0','<'))  die('require PHP > 5.3.0 !');

  14. // 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false
  15. define('APP_DEBUG',True);

  16. // 定义应用目录
  17. define('APP_PATH','./API/');

  18. // 引入ThinkPHP入口文件
  19. require './ThinkPHP/ThinkPHP.php';

  20. // 亲^_^ 后面不需要任何代码了 就是如此简单
复制代码


OK,在浏览器输入(http://xxxxx.com/api.php)运行下。

是不时看看
欢迎使用 ThinkPHP

版本 V3.2.3

那么恭喜你入口搭建成功了,然后是不时看到网站目录多了一个文件夹为API。

好了,接下来我们就开始做登陆的服务端。

看到API\Common\Conf这个文件夹下面的config.php

打开编辑,输入连接你的数据库信息。
  1. <?php
  2. return array(
  3.         //数据库配置信息
  4.         'DB_TYPE'   => 'mysql', // 数据库类型
  5.         'DB_HOST'   => 'localhost', // 服务器地址
  6.         'DB_NAME'   => 'thinkphp', // 数据库名
  7.         'DB_USER'   => 'root', // 用户名
  8.         'DB_PWD'    => '', // 密码
  9.         'DB_PORT'   => 3306, // 端口
  10.         'DB_PREFIX' => 'think_', // 数据库表前缀
  11.         'DB_CHARSET'=> 'utf8', // 字符集
  12. );
复制代码


好了,接下来我们就要做个简单测试PHP。

打开API\Home\Controller这个文件
创建一个控制器,名为UserController.class.php

打开编辑,输入以下代码。
  1. <?php
  2. namespace Home\Controller;
  3. use Think\Controller;
  4. class UserController extends Controller {
  5.     public function index(){
  6.         $this->display();
  7.     }
  8.         
  9.         public function login(){
  10.                 if ($_POST['email'] == '1228638059@qq.com'){
  11.                         $data['status']  = 1;
  12.                         $data['msg'] = '账号正确';
  13.                         $this->ajaxReturn($data);
  14.                 }else{
  15.                         $data['status']  = 0;
  16.                         $data['msg'] = '账号错误';
  17.                         $this->ajaxReturn($data);
  18.                 }
  19.         }
  20. }
复制代码
其中这段代码
public function login(){
                if ($_POST['username'] == '1228638059@qq.com'){
                        $data['status']  = 1;
                        $data['msg'] = '账号正确';
                        $this->ajaxReturn($data);
                }else{
                        $data['status']  = 0;
                        $data['msg'] = '账号错误';
                        $this->ajaxReturn($data);
                }
        }

说明判断POST传递过来的数据然后IF进行判断,如果正确返回值为1,如果错误返回值为0


做好了以上的,我们打开浏览器输入地址查看下(http://xxxx.com/api.php/Home/User/login)。
是不是看到以下数据啊
{"status":0,"msg":"\u8d26\u53f7\u9519\u8bef"}
如果解析哈字符串就是 {"status":0,"msg":"账号错误"}。
如果这个步骤做对了,那么你就已经成功一小步了,欢迎收看下一节教程,前端AJAX进行登陆判断。


下面教程就是让前端实现登陆判断
我呢首先要封装一下接口。
在项目中APICLOUD项目中script文件夹中创建一个config.js的接口文件。
代码如下
  1. var FusunIP = "http://myapp.hjwhp.ghco.info";//服务端地址

  2. var FusunAPI=FusunIP+"/";//API接口

  3. //封装接口


  4. var OpenAPI = {

  5. "login":FusunAPI + "/api.php/Home/User/login",


  6. }
复制代码


上面代码的意思就是说我的IP地址是http://myapp.hjwhp.ghco.info,我的API接口地址是/api.php/Home/User/login
那么连接起来就是http://myapp.hjwhp.ghco.info/api.php/Home/User/login


OK   下面就是前端代码了
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>会员登录</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  8.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  9. </head>
  10. <style>
  11.         body{ background-color:#FFFFFF;}
  12.         .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
  13.         .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
  14.        
  15.         .form{ width:280px; margin:auto; margin-top:60px;}
  16.        
  17.         .aui-btn-rows {
  18.     position:0;
  19.     text-align: center;
  20.     padding:0px;
  21. }
  22. .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
  23. .aui-input-addons{ float:right; font-size: 14px; margin-top:20px; color: #999999;}
  24. .aui-btn-rowss{ width:100%;}
  25. </style>
  26. <body>
  27.         <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
  28.         <a class="aui-pull-left">
  29.             <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
  30.         </a>
  31.         <div class="aui-title">登录</div>
  32.         </header>
  33.    
  34.    
  35.     <div class="form">
  36.     <div class="aui-input-row">
  37.         <label class="aui-input-addon">邮箱</label>
  38.         <input name="email" type="text" class="aui-input" id="email" placeholder="注册邮箱"/>
  39.     </div>
  40.     <div class="aui-input-row">
  41.         <span class="aui-input-addon">密码</span>
  42.         <input name="password" type="password" class="aui-input" id="password" placeholder="账户密码"/>
  43.     </div>
  44.      <div class="aui-btn-rowsss">
  45.        <span class="aui-input-addons" onClick="zhmm()">忘记密码?</span>
  46.     </div>
  47.     <div class="aui-btn-rows">
  48.         <div class="aui-btn aui-btn-success" onclick="login()">登 陆</div>
  49.     </div>
  50.     </div>
  51.    
  52. </body>
  53. </html>
  54. <script type="text/javascript" src="../script/api.js"></script>
  55. <script type="text/javascript" src="../script/config.js"></script>
  56. <script type="text/javascript">
  57.     apiready = function () {
  58.             api.parseTapmode();
  59.         var header = $api.byId('header');
  60.         $api.fixStatusBar(header);
  61.         var headerPos = $api.offset(header);
  62.         var body_h = $api.offset($api.dom('body')).h;
  63.     }
  64.    
  65.     function gb(){
  66.      api.closeWin();
  67.     }
  68.        
  69.         //找回密码
  70.         function zhmm(){
  71.          api.openWin({
  72.             name: 'zhmm',
  73.             url: 'user_login_zhmm.html',
  74.             animation:{
  75.             type:"push",                //动画类型(详见动画类型常量)
  76.             duration:400                //动画过渡时间,默认300毫秒
  77.                         }
  78.                 });
  79.     }
  80.    
  81.     //前端登陆代码
  82.            function login(){
  83.                    var email = $api.val($api.byId('email'));//获取表单内容
  84.                    var password = $api.val($api.byId('password'));//获取表单内容
  85.                    api.ajax({
  86.                                     url: OpenAPI.login,
  87.                             method: 'post',
  88.                             timeout: 30,
  89.                             dataType: 'json',
  90.                             returnAll:false,
  91.                             data:{
  92.                                 values: {email: email,password: password}
  93.                             }
  94.            },function(ret,err){
  95.                                    //开始判断用户操作
  96.                                    if(email.length==0){
  97.                                    {api.toast({msg : '用户名不能为空!'});}
  98.                                    } else if(password.length==0){
  99.                                            {api.toast({msg : '密码不能为空!'});}
  100.                                    } else if(ret.status==1){
  101.                                            {api.toast({msg : '登陆成功!'});}
  102.                                    } else if(ret.status==0){
  103.                                            {api.toast({msg : '邮箱或者密码错误!'});}
  104.                                    } else if(ret.status==2){
  105.                                            {api.toast({msg : '该邮箱没有注册!'});}
  106.                                    } else if(err){
  107.                                    {api.toast({msg : ('错误码:' + err.code + ';错误信息:' + err.msg + ';网络状态码:' + err.statusCode)});}
  108.                                    }  
  109.            });
  110.           
  111.            }
  112. </script>
复制代码

其中
var email = $api.val($api.byId('email'));//获取表单内容
var password = $api.val($api.byId('password'));//获取表单内容就是获取我们登陆表单的数据。


url: OpenAPI.login,这个就是获取API连接的地址。


//开始判断用户操作
if(email.length==0){
{api.toast({msg : '用户名不能为空!'});}
} else if(password.length==0){
{api.toast({msg : '密码不能为空!'});}
} else if(ret.status==1){
{api.toast({msg : '登陆成功!'});}
} else if(ret.status==0){
{api.toast({msg : '邮箱或者密码错误!'});}
} else if(ret.status==2){
{api.toast({msg : '该邮箱没有注册!'});}
} else if(err){
{api.toast({msg : ('错误码:' + err.code + ';错误信息:' + err.msg + ';网络状态码:' + err.statusCode)});}
}


这个就是判断啦。
if(email.length==0){
{api.toast({msg : '用户名不能为空!'});}
}
就是说这个输入框中没有输入数据,那么久提示请输入。
else if就是说上面有数据了,那么我接着判断下面的。
ret.status==1这个就是我们PHP中status的返回值。
{api.toast({msg : '邮箱或者密码错误!'});}这个就是提示。


好了知道上面的代码,我们测试下,看是不是如以下图片的。

   
看看是不是这样哦,下面我们关闭网络试试,看是不是提示和我一样。


OK,如果你全部提示和我一样,那么你就是成功的了。

下面给大家普及下一点知识。
下面的如果觉得判断代码(就是登陆失败,登陆成功)这些有点多余,那么可以这样写。
else if(ret){
                                           {api.toast({msg : ret.msg});}
                                   }

这样的效果和判断ret.status==0是一样的。




好了,本次教程就结束啦,下面就是正式进入登陆判断的开发,大家有木有一点小小的激动啊。
真的希望我的教程可以让小白更好的掌握APICLOUD和THINKPHP开发。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

驾校小白

UID:97696

主题:
2
帖子:
17
云币:
124
发表于 2016-6-24 16:44:26 |
为什么我的,打开浏览器输入地址查看下(http://xxxx.com/api.php/Home/User/login)。是一片空白啊,什么都没显示。直接复制你的代码的。完全一样。

点评

:我也遇到了一样的问题,求解 
发表于 2016-9-11 15:04

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 15:46:48 |
longjack 发表于 2016-3-2 15:37
强烈支持,先顶后看,谢谢分享

卖报,卖报,更新啦,速度围观。嘻嘻

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 15:49:40 |

这个你能看懂吧,好像我做得不是很复杂

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 16:36:03 |
longjack 发表于 2016-3-2 16:24
{"status":0,"msg":"null"}
我返回的结果是这个,是什么原因导致的呢

请把你的PHP代码一起发来。NULL就是MSG这个没有填写值

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 17:04:26 |
longjack 发表于 2016-3-2 16:54
是不是我建立的数据库的问题

这个不是的,这个是把用户名写死的,不会涉及到数据库
请把你的全部代码给我看看

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 17:13:10 |

不是这个,是THINKPHP控制器代码

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 17:14:51 |
longjack 发表于 2016-3-2 17:13
其余的 跟你发的代码保持一致,没变动

那也不会错误啊,你确定和我一样,包括入口,控制器这些。

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 17:15:36 |
longjack 发表于 2016-3-2 17:13
其余的 跟你发的代码保持一致,没变动

我觉得你的MSG这个没有填写值或者缺少符号,建议给我看看

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 17:16:57 |

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-2 17:17:38 |

你可以不要MSG    但是STATUS这个必须要,否则APICLOUD就判断不了
您需要登录后才可以回帖 登录 | 立即注册

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