apicloud apicloud

注册
查看: 11264|回复: 28

[新手教程] 跟着扶孙公子一起写故事汇APP(四)THINK实现前端登陆与注册

入门司机

UID:59844

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

中秋节一周年

[新手教程] 跟着扶孙公子一起写故事汇APP(四)THINK实现前端登陆与注册

11264 28 | 发表于 2016-3-2 21:17:08 |阅读模式 | |
跟着扶孙公子一起写故事汇APP(四)THINK实现前端登陆与注册

OK,前面的教会大家实现API.AJAX与THINK服务端的判断,那么接下来的教程就好做了,今天要实现的功能就是登陆和注册。

代码可能有多余的,但是大家不要在意那些细节,只要实现功能就好。

                                                          ——————数据表数据————————

id(用户ID)  email(用户邮箱) password(用户密码) username(用户昵称)  xb(用户性别)  nl(用户年龄)

                                                          ———————————————————

先来讲前端吧,首先看到我们的登陆代码。
  • <!doctype html>
  • <html>
  • <head>
  •     <meta charset="utf-8">
  •     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  •     <title>会员登录</title>
  •     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  •     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  • </head>
  • <style>
  •         body{ background-color:#FFFFFF;}
  •         .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
  •         .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
  •         .form{ width:280px; margin:auto; margin-top:60px;}
  •         .aui-btn-rows {
  •     position:0;
  •     text-align: center;
  •     padding:0px;
  • }
  • .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
  • .aui-input-addons{ float:right; font-size: 14px; margin-top:20px; color: #999999;}
  • .aui-btn-rowss{ width:100%;}
  • </style>
  • <body>
  •         <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
  •         <a class="aui-pull-left">
  •             <span class="aui-iconfont aui-icon-left"></span>
  •         </a>
  •         <div class="aui-title">登录</div>
  •         </header>
  •     <div class="form">
  •     <div class="aui-input-row">
  •         <label class="aui-input-addon">邮箱</label>
  •         <input name="email" type="text" class="aui-input" id="email" placeholder="注册邮箱"/>
  •     </div>
  •     <div class="aui-input-row">
  •         <span class="aui-input-addon">密码</span>
  •         <input name="password" type="password" class="aui-input" id="password" placeholder="账户密码"/>
  •     </div>
  •      <div class="aui-btn-rowsss">
  •        <span class="aui-input-addons">忘记密码?</span>
  •     </div>
  •     <div class="aui-btn-rows">
  •         <div class="aui-btn aui-btn-success">登 陆</div>
  •     </div>
  •     </div>
  • </body>
  • </html>
  • <script type="text/javascript" src="../script/api.js"></script>
  • <script type="text/javascript" src="../script/config.js"></script>
  • <script type="text/javascript">
  •     apiready = function () {
  •             api.parseTapmode();
  •         var header = $api.byId('header');
  •         $api.fixStatusBar(header);
  •         var headerPos = $api.offset(header);
  •         var body_h = $api.offset($api.dom('body')).h;
  •     }
  •     function gb(){
  •      api.closeWin();
  •     }
  •         //找回密码
  •         function zhmm(){
  •          api.openWin({
  •             name: 'zhmm',
  •             url: 'user_login_zhmm.html',
  •             animation:{
  •             type:"push",                //动画类型(详见动画类型常量)
  •             duration:400                //动画过渡时间,默认300毫秒
  •                         }
  •                 });
  •     }
  •     //前端登陆代码
  •            function login(){
  •                    var email = $api.val($api.byId('email'));//获取表单内容
  •                    var password = $api.val($api.byId('password'));//获取表单内容
  •                    api.ajax({
  •                                     url: OpenAPI.login,
  •                             method: 'post',
  •                             timeout: 30,
  •                             dataType: 'json',
  •                             returnAll:false,
  •                             data:{
  •                                 values: {email: email,password: password}
  •                             }
  •            },function(ret,err){
  •                                    //开始判断用户操作
  •                                    if(email.length==0){
  •                                    {api.toast({msg : '用户名不能为空'});}
  •                                    } else if(password.length==0){
  •                                            {api.toast({msg : '密码不能为空'});}
  •                                    } else if(ret.status==1){
  •                                            {api.toast({msg : ret.email});}
  •                                            //登陆成功后执行下面的操做
  •                                             $api.setStorage('email', ret.email);        // 储存登陆的邮箱
  •                                    } else if(ret.status==0){
  •                                            {api.toast({msg : '密码错误'});}
  •                                    } else if(ret.status==-1){
  •                                            {api.toast({msg : '该邮箱没有注册'});}
  •                                    } else if(err){
  •                                    {api.toast({msg : ('错误码:' + err.code + ';错误信息:' + err.msg + ';网络状态码:' + err.statusCode)});}
  •                                    }
  •            });
  •            }
  • </script>

复制代码

以上代码我会一条一条的讲解。
var email = $api.val($api.byId('email'));//获取表单内容
var password = $api.val($api.byId('password'));//获取表单内容
这里前面讲解了就是获取表单信息。

pi.ajax({
url: OpenAPI.login,
method: 'post',
timeout: 30,
dataType: 'json',
returnAll:false,
data:{
values: {email: email,password: password}
}
},function(ret,err){
//开始判断用户操作
if(email.length==0){
{api.toast({msg : '用户名不能为空'});}
} else if(password.length==0){
{api.toast({msg : '密码不能为空'});}
} else if(ret.status==1){
{api.toast({msg : ret.email});}
//登陆成功后执行下面的操作
$api.setStorage('email', ret.email);        // 储存登陆的邮箱

} else if(ret.status==0){
{api.toast({msg : '密码错误'});}
} else if(ret.status==-1){
{api.toast({msg : '该邮箱没有注册'});}
} else if(err){
{api.toast({msg : ('错误码:' + err.code + ';错误信息:' + err.msg + ';网络状态码:' + err.statusCode)});}
}
});


这里就是AJAX与THINKPHP的判断。
上面用户名为空这些好像前面都讲解了吧。

下面的判断也是讲解了的。
//登陆成功后执行下面的操作
else if(ret.status==1){

$api.setStorage('email', ret.email);        // 储存登陆的邮箱
}


这里的意思就是储存登陆成功的信息(这个以后用得到,比如首页判断登陆成功或者没有登陆)。

好了上面的如果你看过我前面的教程,应该都懂了,

下面来讲解THINKPHP的代码。
  • //登陆API接口
  •         public function login(){
  •                 $email = $_POST['email'];
  •                 $password = $_POST['password'];
  •                 $user = M("user");
  •                 $userinfo = $user->where("email ='$email'")->find();
  •                 if(!empty($userinfo)){
  •                 if($userinfo['password'] == md5($password)){
  •                         $data['email'] = $email;
  •                         $data['status']  = 1;
  •                         $data['msg'] = '登陆成功';
  •                         $this->ajaxReturn($data);
  •                 }else{
  •                         $data['status']  = 0;
  •                         $data['msg'] = '登陆失败';
  •                         $this->ajaxReturn($data);
  •                 }
  •                 }else{
  •                         $data['status']  = -1;
  •                         $data['msg'] = '该邮箱没有注册';
  •                         $this->ajaxReturn($data);
  •                 }
  •         }

复制代码

在控制器里面加入上面的代码。
$email = $_POST['email'];
$password = $_POST['password'];


这个是获取POST传递过来的值。

$user = M("user");


这个是打开user数据表

$userinfo = $user->where("email ='$email'")->find();


这个就是进行查询。

下面的IF就是判断,如果有就返回JSON数值。没有也返回相对应的数值。


——————————以上就是登陆的教程——————————————





下面讲解注册的教程,还是先讲解前端。
在教程开始之前,先写好接口,一样的打开上次我教大家封装的接口文件。


var OpenAPI = {
}
里面加入以下代码
"reg":FusunAPI + "api.php/Home/User/reg",

加上的效果就是
var OpenAPI = {
"reg":FusunAPI + "api.php/Home/User/reg",
}



OK,下面开始前端讲解

  • <!doctype html>
  • <html>
  • <head>
  •     <meta charset="utf-8">
  •     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  •     <title>会员注册</title>
  •     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  •     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  • </head>
  • <style>
  •         body{ background-color:#FFFFFF;}
  •         .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
  •         .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
  •         .form{ width:280px; margin:auto; margin-top:60px;}
  •         .aui-btn-rows {
  •     position:0;
  •     text-align: center;
  •     padding:0px;
  • }
  • .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
  • </style>
  • <body>
  •         <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
  •         <a class="aui-pull-left">
  •             <span class="aui-iconfont aui-icon-left"></span>
  •         </a>
  •         <div class="aui-title">注册</div>
  •         </header>
  •     <div class="form">
  •     <div class="aui-input-row">
  •         <label class="aui-input-addon">邮箱</label>
  •         <input name="email" type="text" class="aui-input" id="email" placeholder="注册邮箱"/>
  •     </div>
  •     <div class="aui-input-row">
  •         <span class="aui-input-addon">密码</span>
  •         <input name="password" type="password" class="aui-input" id="password" placeholder="请输入密码"/>
  •     </div>
  •         <div class="aui-input-row">
  •         <span class="aui-input-addon">昵称</span>
  •         <input name="username" type="text" class="aui-input" id="username" placeholder="请输入昵称"/>
  •     </div>
  •     <div class="aui-btn-rows">
  •         <div class="aui-btn aui-btn-success">注 册</div>
  •     </div>
  •     </div>
  • </body>
  • </html>
  • <script type="text/javascript" src="../script/api.js"></script>
  • <script type="text/javascript" src="../script/config.js"></script>
  • <script type="text/javascript">
  •     apiready = function () {
  •             api.parseTapmode();
  •         var header = $api.byId('header');
  •         $api.fixStatusBar(header);
  •         var headerPos = $api.offset(header);
  •         var body_h = $api.offset($api.dom('body')).h;
  •     }
  •     function gb(){
  •      api.closeWin();
  •     }
  •         /**
  •         function reg(){
  •              var email = $api.val($api.byId('email'));//获取表单内容
  •                    var password = $api.val($api.byId('password'));//获取表单内容
  •                    var username = $api.val($api.byId('username'));//获取表单内容
  •                    api.ajax({
  •                    url:OpenAPI.reg,
  •                    method: 'post',
  •                            timeout: 30,
  •                            dataType: 'json',
  •                            returnAll:false,
  •                            data:{
  •                                 values: {email: email,password: password,username: username}
  •                             }
  •            },function(ret,err){
  •                            if(email.length==0){
  •                                    {api.toast({msg : '邮箱不能为空'});}
  •                                    } else if(password.length==0){
  •                                            {api.toast({msg : '密码不能为空'});}
  •                                    } else if(username.length==0){
  •                                            {api.toast({msg : '请输入昵称'});}
  •                                    } else if(ret.status==1){
  •                                            {api.toast({msg : '注册成功'});}
  •                                            //登陆成功后执行下面的操作
  •                                            api.openWin({
  •                                             name: 'login',
  •                                             url: 'user_login_frm.html',
  •                                             animation:{ type:"push", duration:400 }});
  •                                             api.closeWin();
  •                                    } else if(ret.status==0){
  •                                            {api.toast({msg : '该邮箱已经注册'});}
  •                                    } else if(err){
  •                                    {api.toast({msg : err.msg});}
  •                                    }
  •            });
  •     }
  •     **/
  •            function reg(){
  •                    var email = $api.val($api.byId('email'));//获取表单内容
  •                    var password = $api.val($api.byId('password'));//获取表单内容
  •                    var username = $api.val($api.byId('username'));//获取表单内容
  •                    if(email.length==0){
  •                                    {api.toast({msg : '邮箱不能为空'});}
  •                                    } else if(password.length==0){
  •                                            {api.toast({msg : '密码不能为空'});}
  •                                    } else if(username.length==0){
  •                                            {api.toast({msg : '请输入昵称'});}
  •                                    } else{
  •                                            api.ajax({
  •                                    url:OpenAPI.reg,
  •                                                    method: 'post',
  •                                                            timeout: 30,
  •                                                            dataType: 'json',
  •                                                            returnAll:false,
  •                                                            data:{
  •                                                                 values: {email: email,password: password,username: username}
  •                                                             }
  •                            },function(ret,err){
  •                                            if(ret.status==0){
  •                                                    {api.toast({msg : '该邮箱已注册'});}
  •                                            }else if(ret.status==1){
  •                                                    {api.toast({msg : '注册成功'});}
  •                                            }
  •                            });
  •                                    }
  •            }
  • </script>

复制代码



至于上面的和登陆的差不多,也是获取表单,然后依次判断,然后提示该判断的结果。

下面讲解THINK服务端代码

  • //注册API接口
  •         public function reg(){
  •                 $user=M('user');
  •                 $email = $_POST['email'];
  •                 $userinfo = $user->where("email ='$email'")->find();
  •                                 if(!empty($userinfo)){
  •                                         $data['status']  = 0;
  •                                         $data['msg'] = '该邮箱已注册';
  •                                         $this->ajaxReturn($data);
  •                                 }else{
  •                                         if($user->add($_POST)){
  •                                         $data['status']  = 1;
  •                                         $data['msg'] = '注册成功';
  •                                         $this->ajaxReturn($data);
  •                                         }
  •                                 }
  •         }

复制代码



还是和登陆差不多,打开数据表。

$email = $_POST['email'];

上面为什么只有获取一条POST的数据啊,因为我们在注册的时候就要查询这条数据在数据表中是否存在。

if($user->add($_POST))


这个的意思就是说POST里面传递过来的数据然后添加到数据表中。

OK,服务端的密码是明文,没有经过MD5加密的,至于THINKPHP登陆注册加密你自己加上即可。

至于找回密码和检测邮箱是否存在一样的,检测到OK,执行下一步,就是PHP发送邮箱给他修改密码。自己发挥吧。么么哒

————————————OK了,代码就是这个样子,你们可以动手试试看哦——————————————

效果如下面。

[size=0.83em]
S60302-205911[1].jpg (97.17 KB, 下载次数: 0)
[color=rgb(153, 153, 153) !important]2 分钟前 上传






是不是和我一样啊,嘻嘻、
2

查看全部评分

驾校小白

UID:97696

主题:
2
帖子:
17
云币:
124
发表于 2016-6-25 22:14:01 |
本帖最后由 智网 于 2016-6-25 22:15 编辑

我等登陆输什么都是错误码3错误信息:服务器返回数据格式错误,网络状态码:200 ,

API地址  :http://www.9vm.cn/api.php/home/user/login
代码:
<?php
namespace Home\Controller;
use Think\Controller;
class UserController extends Controller {
    public function index(){
        $this->display();
    }
     
   public function login(){
                $username = $_POST['username'];
                $password = $_POST['password'];
                $user = M("ucenter_member");
                $userinfo = $user->where("username ='$username'")->find();
                if(!empty($userinfo)){
                if($userinfo['password'] == md5($password))/*$password ? '' : md5(sha1($password).ThinkUCenter))md5($password, UC_AUTH_KEY))*/{
                        $data['username'] = $username;
                        $data['status']  = 1;
                        $data['msg'] = '登陆成功';
                        $this->ajaxReturn($data);
                }else{
                        $data['status']  = 0;
                        $data['msg'] = '登陆失败';
                        $this->ajaxReturn($data);
                }
                }else{
                        $data['status']  = -1;
                        $data['msg'] = '该用户还没有注册';
                        $this->ajaxReturn($data);
                }
        }


   public function reg(){
                $user=M('ucenter_member');
                $username = $_POST['username'];
                $userinfo = $user->where("username ='$username'")->find();
                                if(!empty($userinfo)){
                                        $data['status']  = 0;
                                        $data['msg'] = '该用户已注册';
                                        $this->ajaxReturn($data);
                                }else{
                                        if($user->add($_POST)){
                                        $data['status']  = 1;
                                        $data['msg'] = '注册成功';
                                        $this->ajaxReturn($data);
                                        }
                                }
       }
}
?>


应该就是api接口的问题帮我看看。

驾校小白

UID:244874

主题:
0
帖子:
11
云币:
69
发表于 2016-3-3 15:31:28 |
我来顶你,一定要顶

驾校小白

UID:7002

主题:
0
帖子:
16
云币:
83
发表于 2016-3-3 18:16:12 |
""reg":FusunAPI + "/api.php/Home/User/reg",

驾校小白

UID:270034

主题:
1
帖子:
0
云币:
42
发表于 2016-3-3 19:48:45 来自手机 |
顶一个

主题:
1
帖子:
3
云币:
82
发表于 2016-3-4 10:24:25 |
太棒啦

驾校小白

UID:244874

主题:
0
帖子:
11
云币:
69
发表于 2016-3-4 12:17:02 |
期待继续更新,文章列表页还有文章详情页,都搞起,加油fusun

新手上路

UID:138654

主题:
11
帖子:
97
云币:
342
发表于 2016-3-5 01:49:07 |
很想要一份 THinkPHP+APICloud 的案例,谢谢楼主

主题:
38
帖子:
144
云币:
234
发表于 2016-3-5 05:16:54 |
收藏,给力

新手上路

UID:303032

主题:
14
帖子:
99
云币:
266
发表于 2016-4-21 11:38:50 |
如果 我用PHP查询数据然后 调用到 App客户端 显示的话 应该怎么做

驾校小白

UID:5268

主题:
1
帖子:
0
云币:
53
发表于 2016-4-22 10:41:00 来自手机 |
先支持,顶
123下一页
您需要登录后才可以回帖 登录 | 立即注册

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