Xiaobaiの学習と書き方、laravelベースのAPPインターフェース[API] (2)
- WBOYオリジナル
- 2016-06-20 12:34:34986ブラウズ
はじめに
前の記事によると、dingo/api のインストールとデバッグが完了したので、次のステップは API を改善することです。
最も重要なステップは、まず登録機能を改善することです。それでは、最初の公式 API に名前を付けましょう—
http://localhost/register
まず、この API を分析します。 。これは、新規ユーザーがアクセスすることでアカウントを登録し、他の操作を実行したり、他の APP サービスを楽しむことができるユーザー登録 API です。次に、訪問するときに、クライアントは APP であるため、入力するフィールドは (携帯電話番号) 電話番号、(パスワード) パスワードである必要があります。
すべての準備が整った後、サーバーが操作を完了したら、どのようなコールバックを取得すればよいでしょうか?
以下は初心者としての私の個人的な理解です。登録が成功したら、ユーザーのログインを確認するトークン値をすぐに返し、終了時に削除されるかタイムアウト後に削除されるまで、それを APP の構成変数として保存する必要があります。
分析後、練習を開始します
始める前に、API の検証方法である JWT (JSON WEB TOKEN) をプロジェクトにインストールする必要があります。詳細部分を読むことができます。ドキュメントでは、その主な機能は、クライアント ユーザーが登録とログイン要求を発行した後にトークン値の文字列を返すことです。このトークン値は、リソースを取得する権限があるかどうかを確認するための資格情報として使用されます。
インストール方法はこちらのJWTをご覧ください
JWTがインストールされていることを確認したら、まずルートを作成します。
まず、routes.php を開いてルートを変更します
Route::post('/register', 'Auth\AuthenticateController@register'); 次にコントローラーを作成し、laravel プロジェクトの下で実行します
php artisan make:controller Auth/AuthenticateController
次に、純粋な HTML ページを APP として直接使用して API をテストし、次の構造を持つ新しいテスト フォルダーを作成します:
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
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 ·</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> 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')); }} この例は非常に単純で、要求されたデータを保存し、トークン値を返すものです。
ここで私が遭遇した大きな落とし穴について話さなければなりません
実際、上記のコードによれば、新しいユーザーをデータベースに書き込むことができます。しかし！
トークン値を返すことはできません。これは非常に混乱します。そこで記事をもう一度読んだところ、上記の操作はクロスドメインリクエストと呼ばれていることがわかりました。これは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); }});
これで書けるようになりましたが、なんと!まだトークン値は表示されません。 。 。
また、リクエストメソッドが get に変更されました。これはなぜでしょうか。後で、これは jsonp と post が単純に実装できない、または実装が難しすぎるためであることが分かりました。それで私は恥ずかしがりませんでした。その時までに私は完全に軌道から外れていました。 。 。 ajax メソッドを元に戻し、コンソールを開いて再試行しましたが、クロスドメインを実現するには、リクエスト ヘッダーに Access-Control-Allow-Origin 属性を追加する必要があることがわかりました。
期待が持てるようになったので、早速 http ミドルウェアを作成してみましょう。
php artisan make:middleware AccessMiddleware
<?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); }} 忘れずに kernel.php ファイルにミドルウェアを登録し、$routeMiddleware に
'access' => \App\Http\Middleware\AccessMiddleware::class,次に、変更しますルーティング
Route::group(['middleware' => 'access'], function () { Route::post('/register','Auth\AuthenticateController@register');}); 次に、もう一度テストして、フォームに入力し、[今すぐ登録] をクリックすると、ビンゴとトークンの値が表示されます。
ユーザー情報も通常どおり書き込まれ、登録メカニズムを楽しく拡張できます。
まずはここで計画を立てましょう。まずコントローラーにフォーム検証を追加し、次に別の JSON データをクライアントに返します。しかし結局のところ、私は好きでこれらのことを書いているだけなので、どのようなデータを返すべきかについてはまだ混乱しています。 誰かが私のこの記事を偶然見た場合は、アドバイスやアドバイスをいただければ幸いです。
最後に
上の例は完全に私です。ドキュメントとオリジナルの作品を読んで、自分でコンパイルしました。間違いがあれば、すぐに教えてください〜
上記の例は最終的には実装されましたが、結局のところ、個人的な知恵が非常に低いと感じています。まだ限られています。これに非常に興味がある場合は、私に連絡してください。一緒に学び、進歩することができます。私のメールアドレス: lwx12525@qq.com
マスターが通りかかった場合は、ぜひ小白にご指導ください。O(∩_∩)O~~