内容
以下の順番にまとめます。
1. MacへのXAMPP+Laravelインストール
2. ユーザログイン機能の追加
[3. MVCとルーティングの説明]
(https://qiita.com/sonrisa/items/809adf872e6fb3657f81)
[4. ユーザリストの表示]
(https://qiita.com/sonrisa/items/929486929ed8d851a24e)
[5. ユーザリストのペジネーション表示]
(https://qiita.com/sonrisa/items/86efb8caebe207ab8fa8)
6. ユーザ管理APIの追加 ←いまここ
7. Vue.jsとAPIベースのユーザ管理アプリの追加準備
8. Vue.jsとAPIベースのユーザ管理アプリの追加
[9. Vue.jsとAPIベースのユーザ管理アプリへのペジネーション追加]
(https://qiita.com/sonrisa/items/d58c56b638924d8c6810)
[10. APIへのJWTAuth認証の追加]
(https://qiita.com/sonrisa/items/97c1f3e8491f76dc2ce2)
11. Vue.jsとAPIベースのユーザ管理アプリへの認証の追加
6. ユーザ管理APIの追加
ここでは、Vue.jsというJavaScriptベースのシングルページアプリケーション構築ライブラリとREST APIの組み合わせのWebアプリケーションを開発します。そのためにまずはユーザ一覧表示、ユーザ情報詳細表示、ユーザ情報更新、ユーザ削除といったユーザ管理を行うAPIを作成します。
6.1 APIを実装したコントローラを作成
下記のとおり「app/Http/Controllers/UserController.php」を作成します。
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
class UserController extends Controller
{
public function index() // ユーザ一覧を返します
{
$users = User::all();
return $users;
}
public function show($id) // ユーザIDをキーにユーザ情報詳細を返します
{
$user = User::findOrFail($id);
return $user;
}
public function update(Request $request, $id) // ユーザIDをキーにユーザ情報を更新します
{
$user = User::findOrFail($id);
$user->update($request->all());
return $user;
}
public function store(Request $request) // ユーザを追加します
{
$user = new User;
$user->name = $request['name'];
$user->email = $request['email'];
$user->password = bcrypt($request['password']);
$user->save();
return $user;
}
public function destroy($id) // ユーザIDをキーにユーザ情報を削除します
{
$user = User::findOrFail($id);
$user->delete();
return '';
}
}
6.2 APIのルーティングを設定
下記の通り「routes/api.php」にAPIのURIとコントローラの設定を行います。
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group([], function () {
Route::resource('users', 'UserController');
});
「php artisan route:list」コマンドを実行して、APIのルーティングが追加されていることを確認します。
...
| | GET|HEAD | api/users | users.index | App\Http\Controllers\UserController@index | api |
| | POST | api/users | users.store | App\Http\Controllers\UserController@store | api |
| | GET|HEAD | api/users/create | users.create | App\Http\Controllers\UserController@create | api |
| | GET|HEAD | api/users/{user} | users.show | App\Http\Controllers\UserController@show | api |
| | PUT|PATCH | api/users/{user} | users.update | App\Http\Controllers\UserController@update | api |
| | DELETE | api/users/{user} | users.destroy | App\Http\Controllers\UserController@destroy | api |
| | GET|HEAD | api/users/{user}/edit | users.edit | App\Http\Controllers\UserController@edit | api |
...
「app/Http/Controllers/UserController.php」で実装されている関数は、「index/show/update/store/destroy」ですが、ルーティングには「create」や「edit」が定義されています。「create」は「store」とほぼ同義ですが、HTTPメソッドが異なります。「create」は「GET|HEAD」、「store」は「POST」に反応して実行されます。
6.3 APIのエラー処理を追加
ここまでで発生しそうなAPIのエラーを想像してみると、「ルーティングで認められていないHTTPメソッドが呼ばれ」たり、「ルーティングで定義されていないURIが呼ばれ」たり、「値のないIDが呼ばれ」たりするケースが考えられます。これらのエラー処理は「app/Exceptions/Handler.php」の「render」メソッドに記載します。
... (中略)
/**
* Render an exception into an HTTP response.
*
* @param \Illuminate\Http\Request $request
* @param \Exception $exception
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $exception)
{
// ここから追記
// ルーティングで認められていないHTTPメソッドが呼ばれたケース
if(basename(str_replace('\\','/',get_class($exception)))=='MethodNotAllowedHttpException') {
return response()->json(['error'=>'HTTP Method Not Allowed'],405);
}
// ルーティングで定義されていないURIが呼ばれたケース
if(basename(str_replace('\\','/',get_class($exception)))=='NotFoundHttpException') {
return response()->json(['error'=>'URI Not Found'],404);
}
// 値のないIDが呼ばれたケース
if(basename(str_replace('\\','/',get_class($exception)))=='ModelNotFoundException') {
return response()->json(['error'=>'Record Not Found'],404);
}
// ここまで追記
return parent::render($request, $exception);
}
}
6.4 APIの実行
作成したAPIがうまく動くか確認します。例のごとく「php artisan serve」を実行してuserauthを起動します。
ブラウザから http://localhost:8000/api/users にアクセスし、JSONのレスポンスが表示されることを確認します。
ここではブラウザにChromeを使っており、JSONViewというプラグインを追加しているためJSONが整形されて表示されます。おすすめです。
以下、curlコマンド（HTTPメソッドを実行するコマンド）とjqコマンド（JSONデータをパースして人が見やすい形式でインデントしてくれるコマンド）を使って「index/show/update/store/destroy」を試します。curlコマンドやjqコマンドがない場合は「brew install curl」や「brew install jq」でインストールしてください。
index(GET|HEAD):
ユーザ一覧を返します
$ curl -X GET http://localhost:8000/api/users 2>/dev/null | jq
[
{
"id": 1,
"name": "test1",
"email": "test1@test.com",
"created_at": "2018-07-09 13:43:53",
"updated_at": "2018-07-09 13:43:53"
},
{
"id": 2,
"name": "test2",
"email": "test2@test.com",
"created_at": "2018-07-09 13:43:53",
"updated_at": "2018-07-09 13:43:53"
},
{
"id": 3,
"name": "test3",
"email": "test3@test.com",
"created_at": "2018-07-09 13:43:54",
"updated_at": "2018-07-09 13:43:54"
}
]
show(GET|HEAD):
ユーザIDをキーにユーザ情報詳細を返します。以下はURI「api/users/2」で指定したとおりユーザIDが2のユーザ情報を取得しています。
$ curl -X GET http://localhost:8000/api/users/2 2>/dev/null | jq
{
"id": 2,
"name": "test2",
"email": "test2@test.com",
"created_at": "2018-07-09 13:43:53",
"updated_at": "2018-07-09 13:43:53"
}
存在しないユーザIDを4に指定して実行してみます。
$ curl -X GET http://localhost:8000/api/users/4 2>/dev/null | jq
{
"error": "Record Not Found"
}
store(POST): ユーザを追加します
ヘッダーにコンテンツタイプがJSONであることを指定して（-H "Content-type: application/json")とJSON形式のデータをPOSTします。
$ curl -H "Content-type: application/json" -X POST -d '{"name":"test4","email":"test4@test.com","password":"(uhBnji9"}' http://localhost:8000/api/users | jq
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 181 0 118 100 63 704 376 --:--:-- --:--:-- --:--:-- 706
{
"name": "test4",
"email": "test4@test.com",
"updated_at": "2018-07-09 14:02:48",
"created_at": "2018-07-09 14:02:48",
"id": 4
}
update(PUT|PATCH):
ユーザIDをキーにユーザ情報を更新します。以下は、ユーザIDが2のユーザ名を"test2"から"test02"に更新します。
$ curl -H "Content-type: application/json" -X PUT -d '{"name":"test02"}' http://localhost:8000/api/users/2 | jq
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 136 0 119 100 17 674 96 --:--:-- --:--:-- --:--:-- 676
{
"id": 2,
"name": "test02",
"email": "test2@test.com",
"created_at": "2018-07-09 13:43:53",
"updated_at": "2018-07-09 14:03:20"
}
destroy(DELETE):
ユーザIDをキーにユーザ情報を削除します。以下は、ユーザIDが3のユーザを削除します。
$ curl -H "Content-type: application/json" -X DELETE http://localhost:8000/api/users/3
削除されたことを確認します。
$ curl -X GET http://localhost:8000/api/users 2>/dev/null | jq
[
{
"id": 1,
"name": "test1",
"email": "test1@test.com",
"created_at": "2018-07-09 13:43:53",
"updated_at": "2018-07-09 13:43:53"
},
{
"id": 2,
"name": "test02",
"email": "test2@test.com",
"created_at": "2018-07-09 13:43:53",
"updated_at": "2018-07-09 14:03:20"
},
{
"id": 4,
"name": "test4",
"email": "test4@test.com",
"created_at": "2018-07-09 14:02:48",
"updated_at": "2018-07-09 14:02:48"
}
]
以上、ひととおりのAPIをcurlコマンドで試しました。APIのテストにはPOSTMANというChromeのプラグインも使いやすいです。興味のある方は試してみてください。
以上、「6. ユーザ管理APIの追加」が完了です。
次は、「7. Vue.jsとAPIベースのユーザ管理アプリの追加準備」です。
参考URL
参考1.POSTMANの使い方 https://www.webprofessional.jp/master-api-workflow-postman/
参考2.JSONView https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc