小白的边学边写,一个基于laravel的APP接口【API】(二)

WBOY
Freigeben: 2016-06-20 12:34:34
Original
969 Leute haben es durchsucht

前言

根据上一篇文章,我们已经吧 dingo/api给安装并且调试好了,那么下一步,就是来完善咱们的API了。

最首要的步骤一定是要先把注册的功能给完善了,好了,那就给第一条正式API起个名字吧——

http://localhost/register
Nach dem Login kopieren

首先先对这条API进行分析。这是一个用户注册的API,新用户通过访问它来注册账号,之后才能有权限进行其他的操作,享受其它的APP服务。那么我们在访问的时候,就应当把正确的信息输入进去,因为客户端是APP,所以要输入的字段应该是这些——(手机号)phone、(密码)password。

那么在一切准备就绪以后,当服务器处理完操作以后,我们又该获得什么callback呢?

接下来就是我自己作为一个新手小白的个人理解了。当注册成功以后,我们应该立即返回确认用户登录的token值,并且作为APP的config变量给储存起来,直到退出时删除,或者超出时间后删除。

分析完毕,开始实践

在开始之前呢,我们要在项目里安装 JWT(JSON WEB TOKEN),这是一种API的验证方式,详细的部分可以去看文档,它的主要作用就是在客户端的用户发出注册和登录的请求之后,返回一串token值,在之后成功登录以后以这个token值作为凭证来验证是否有获取资源的权限。

如何安装请看这个 JWT

确定安装好 JWT以后,首先就来创建路由吧。

首先打开routes.php,修改路由

Route::post('/register', 'Auth\AuthenticateController@register');
Nach dem Login kopieren

然后创建一个控制器,在laravel项目下运行

php artisan make:controller Auth/AuthenticateController
Nach dem Login kopieren

接下来,我们直接用纯html页面当做APP,去测试API,创建新的test文件夹,结构如下

test/├── css/│   └── bootstrap.min.css├── js/│   ├── jquery.min.js│   └── bootstrap.min.js├── fonts/│   ├── glyphicons-halflings-regular.eot│   ├── glyphicons-halflings-regular.svg│   ├── glyphicons-halflings-regular.ttf│   ├── glyphicons-halflings-regular.woff│   └── glyphicons-halflings-regular.woff2└── register.html
Nach dem Login kopieren

在register.html文件里添加内容

<!DOCTYPE html><html lang="zh-CN">    <head>      <meta charset="utf-8">      <meta http-equiv="X-UA-Compatible" content="IE=edge">      <meta name="viewport" content="width=device-width, initial-scale=1">      <title>注册</title>      <link href="css/bootstrap.min.css" rel="stylesheet">    </head>    <body>        <nav class="navbar navbar-default">            <div class="container">                <div class="navbar-header">                    <!-- Collapsed Hamburger -->                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse">                        <span class="sr-only">切换导航</span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                    </button>                    <!-- Branding Image -->                    <a class="navbar-brand" href="#">                        <b>i &middot;</b> APP                    </a>                </div>                <div class="collapse navbar-collapse" id="spark-navbar-collapse">                    <!-- Left Side Of Navbar -->                    <ul class="nav navbar-nav">                        <li><a href="#">登录</a></li>                    </ul>                    <!-- Right Side Of Navbar -->                    <ul class="nav navbar-nav navbar-right">                        <!-- Authentication Links -->                    </ul>                </div>            </div>        </nav>        <div class="container">            <div class="row">                <div class="col-md-8 col-md-offset-2">                    <div class="panel panel-default">                        <div class="panel-heading">注册</div>                        <div class="panel-body">                            <form  id="register" class="form-horizontal">                                <div class="form-group">                                    <label class="col-md-4 control-label">用户名</label>                                    <div class="col-md-6">                                        <input type="text" class="form-control" name="name">                                    </div>                                </div>                                <div class="form-group">                                    <label class="col-md-4 control-label">手机号</label>                                    <div class="col-md-6">                                        <input type="text" class="form-control" name="phone">                                    </div>                                </div>                                <div class="form-group">                                    <label class="col-md-4 control-label">密码</label>                                    <div class="col-md-6">                                        <input type="password" class="form-control" name="password">                                    </div>                                </div>                                <!-- <div class="form-group">                                    <label class="col-md-4 control-label">密码确认</label>                                    <div class="col-md-6">                                        <input type="password" class="form-control" name="password_confirmation">                                    </div>                                </div> -->                                <div class="form-group">                                    <div class="col-md-6 col-md-offset-4">                                        <button type="submit" class="btn btn-primary">                                            <i class="fa fa-btn fa-user"></i>立即注册                                        </button>                                    </div>                                </div>                            </form>                        </div>                    </div>                </div>            </div>        </div>        <script src="js/jquery.min.js"></script>        <script src="js/bootstrap.min.js"></script>        <script type="text/javascript">            var $registerForm = $('#register');            var response;                   $registerForm.submit(function(){                $.ajax({                    type: "post",                    url: "http://localhost/register",                    data: $(this).serialize(),                    async: false,                    dataType:'json',                    success: function(data){                        alert(JSON.stringify(data));                     },                    // complete: function(){                    //     alert('ok');                    // },                    // error: function(XMLHttpRequest, textStatus, errorThrown) {                    //     alert(XMLHttpRequest.status);                    //     alert(XMLHttpRequest.readyState);                    //     alert(textStatus);                    // }                });            });        </script>  </body></html>
Nach dem Login kopieren

在 AuthenticateController里添加如下函数

<?phpnamespace App\Http\Controllers\Auth;use Illuminate\Http\Request;use App\Http\Requests;use App\Http\Controllers\Controller;use JWTAuth;use Tymon\JWTAuth\Exceptions\JWTException;use App\User;class AuthenticateController extends Controller{    public function authenticate(Request $request)    {        // grab credentials from the request        $credentials = $request->only('email', 'password');        try {            // attempt to verify the credentials and create a token for the user            if (! $token = JWTAuth::attempt($credentials)) {                return response()->json(['error' => 'invalid_credentials'], 401);            }        } catch (JWTException $e) {            // something went wrong whilst attempting to encode the token            return response()->json(['error' => 'could_not_create_token'], 500);        }        // all good so return the token        return response()->json(compact('token'));    }    public function register(Request $request) {        $newUser = [             'name' => $request->get('name'),            'phone' => $request->get('phone'),            'password' => bcrypt($request->get('password')),        ];        $user = User::create($newUser);        $token = JWTAuth::fromUser($user);        return response()->json(compact('token'));    }}
Nach dem Login kopieren

例子很简单,就是储存请求的数据然后返回 token值。

这里就不得不来说说我遇到的一个大坑

其实按照以上的代码完全可以将新用户写入数据库的。但是!

token值不能被返回!这就让人很头大了。于是我又看了看文章,发现以上的那些操作叫做跨域请求。在laravel文档里也有提及,对,就是那个叫 jsonp的东东。于是又看了些文章,把ajax方法修改成了这个样子

$.ajax({    type: "get",    url: "http://localhost/register",    data: $(this).serialize(),    async: false,    dataType:'jsonp',    jsonp: 'callback'    success: function(data){        alert(JSON.stringify(data));     },    complete: function(){        alert('ok');    },    error: function(XMLHttpRequest, textStatus, errorThrown) {        alert(XMLHttpRequest.status);        alert(XMLHttpRequest.readyState);        alert(textStatus);    }});
Nach dem Login kopieren

这下又可以写进去了,但是呢!还是没有 token值的出现。。。

而且呢,请求方式也被换成了get,这是为什么呢?后来才知道这是因为 jsonp和 post根本不可能实现,或者说实现起来太难,所以我也就不为难自己了。我到那时就完全的跑偏了。。。又把 ajax的方法改了回去,打开控制台,再试一遍,才发现,原来想要实现跨域,要在请求的 header中加入 Access-Control-Allow-Origin属性。

这下子感觉有希望了,于是立即创建一个 http中间件吧。

php artisan make:middleware AccessMiddleware
Nach dem Login kopieren

在里面写上

<?phpnamespace App\Http\Middleware;use Closure;class AccessMiddleware{    public function handle($request, Closure $next)    {           header('Access-Control-Allow-Origin: *');        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');        header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With');        header('Access-Control-Allow-Credentials: true');        return $next($request);    }}
Nach dem Login kopieren

记得在kernel.php文件中注册中间件哟,在 $routeMiddleware里添加

'access' => \App\Http\Middleware\AccessMiddleware::class,
Nach dem Login kopieren

接下来再来修改路由

Route::group(['middleware' => 'access'], function () {    Route::post('/register','Auth\AuthenticateController@register');});
Nach dem Login kopieren

然后再来测试一下,输入表单,点立即注册,之后 bingo,token值出来了。

用户信息也被正常写入,之后就可以欢快的扩展注册机制啦。

在这里先规划一下吧。首先在控制器内添加表单验证,然后返回不同的 json数据给客户端。但是毕竟我不是专业的,我只是爱好这个才去写这些东西的,关于应该返回什么数据现在脑子里还是一片混乱。 如果有大神偶然间看到了我的这篇文章,希望可以给我一点指导和建议,十分的感谢!

最后

上面的例子完全是我自己看文档+原创给整出来的,如果有错请及时告诉我哟~

上面的例子到最后虽然都实现了,但是我仍然觉得很 low,毕竟个人的智慧还是有限的。如果大家有对这个十分感兴趣,可以联系我,咱们可以一起边学边做,共同进步!我的邮箱: lwx12525@qq.com

如果恰巧大神路过,请务必给我一些指导,小白将万分的感谢 O(∩_∩)O~~

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!