Laravel Restful Back Endを使用してReactアプリを構築する：パート1、Laravel 9 API

LaravelとReactは、最新のWebアプリケーションの構築に使用される2つの一般的なWeb開発技術です。 Laravelは顕著にサーバー側のPHPフレームワークですが、Reactはクライアント側のJavaScriptライブラリです。このチュートリアルでは、LaravelとReactの両方の紹介として機能し、それらを組み合わせて最新のWebアプリケーションを作成します。

このチュートリアルでは、Laravelの最新バージョンであるバージョン9を使用して、安定したバックエンドAPIを作成します。フロントエンドは、Reactで記述されたコンポーネントで構成されます。機知に富んだ製品リストアプリケーションを構築します。チュートリアルの最初の部分では、Laravelの概念とバックエンドに焦点を当てます。始めましょう。

はじめに

Laravelは、現代のWeb向けに開発されたPHPフレームワークです。構成パラダイムよりも慣習を支持する表現的な構文があります。 Laravelには、すぐにプロジェクトを開始するために必要なすべての機能があります。しかし、個人的には、PHPを使用して開発をまったく異なるエクスペリエンスとワークフローに変えるため、Laravelが好きです。

一方、ReactはFacebookが単一ページのアプリケーションを構築するために開発した人気のJavaScriptライブラリです。 Reactは、各コンポーネントがアプリケーションのUIの一部を説明するコンポーネントにビューを分解するのに役立ちます。コンポーネントベースのアプローチには、コンポーネントの再利用可能性とモジュール性の追加の利点があります。

Laravel and React？

Web向けに開発している場合、サーバーとクライアントの両方に単一のコードベースを使用する傾向がある場合があります。ただし、すべての企業が、開発者に選択した技術を自由に使用するわけではなく、正当な理由があるわけではありません。プロジェクト全体にJavaScriptスタックを使用することは現在の標準ですが、サーバー側とクライアント側に2つの異なるテクノロジーを選択することを妨げるものはありません。実際、かなりよく。 Laravelは、もう1つのJavaScriptフレームワークであるVue.jsのサポートを文書化していますが、より人気があるため、フロントエンドにReactを使用します。また、ReactまたはLaravelのいずれかで以前に経験がある場合は、このチュートリアルを最大限に活用できるようになります。ただし、両方のフレームワークを初めて使用する場合は、心配しないでください。チュートリアルは初心者の観点から書かれており、多くの問題なく追いつくことができるはずです。 Githubでチュートリアルのソースコードを見つけることができます。

laravelプロジェクトのインストールとセットアップ

Laravelを始める前に、PHPと作曲家の両方を地元のマシンにインストールしていることを確認してください。これは、LaravelがPHPに基づいており、Composerを使用してすべての依存関係を管理するためです。マシンにComposerをインストールするときは、Composerがグローバルにアクセスできるように、パス環境変数に追加するオプションを選択してください。 

作曲家がインストールされたら、次のように新鮮なLaravelプロジェクトを生成できるはずです：

composer create-project laravel/laravel example-app<br>

すべてがうまくいった場合、ProductsControllerの開発サーバーでアプリケーションを提供できるはずです。

routes/api.php新しいインポートとルートを使用しています。気付いていない場合は、製品のインスタンスをコントローラーメソッドに注入しました。これは、Laravelの暗黙の結合の例です。 Laravelは、モデルインスタンス名 product $ product

をURIセグメント名 {product}<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;?php&lt;br&gt;&lt;br&gt;namespace App\Http\Controllers;&lt;br&gt;&lt;br&gt;use Illuminate\Http\Request;&lt;br&gt;use App\Product;&lt;br&gt;&lt;br&gt;class ProductsController extends Controller&lt;br&gt;{&lt;br&gt;&lt;br&gt; public function index()&lt;br&gt; {&lt;br&gt; return Product::all();&lt;br&gt; }&lt;br&gt;&lt;br&gt; public function show(Product $product)&lt;br&gt; {&lt;br&gt; return $product;&lt;br&gt; }&lt;br&gt;&lt;br&gt; public function store(Request $request)&lt;br&gt; {&lt;br&gt; $product = Product::create($request-&gt;all());&lt;br&gt;&lt;br&gt; return response()-&gt;json($product, 201);&lt;br&gt; }&lt;br&gt;&lt;br&gt; public function update(Request $request, Product $product)&lt;br&gt; {&lt;br&gt; $product-&gt;update($request-&gt;all());&lt;br&gt;&lt;br&gt; return response()-&gt;json($product, 200);&lt;br&gt; }&lt;br&gt;&lt;br&gt; public function delete(Product $product)&lt;br&gt; {&lt;br&gt; $product-&gt;delete();&lt;br&gt;&lt;br&gt; return response()-&gt;json(null, 204);&lt;br&gt; }&lt;br&gt;&lt;br&gt;}&lt;br&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>と一致させようとします。一致が見つかった場合、製品モデルのインスタンスがコントローラーアクションに注入されます。データベースに製品がない場合、404エラーが返されます。最終結果は以前と同じですが、コードが少なくなります。<strong></strong>郵便配達員またはVSコードを開き、製品のエンドポイントが機能するはずです。 <code> accept：application/json<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// Include this at the file top:&lt;br&gt;use App\Http\Controllers\ProductsController;&lt;br&gt;&lt;br&gt;/**&lt;br&gt;**Basic Routes for a RESTful service:&lt;br&gt;**Route::get($uri, $callback);&lt;br&gt;**Route::post($uri, $callback);&lt;br&gt;**Route::put($uri, $callback);&lt;br&gt;**Route::delete($uri, $callback);&lt;br&gt;**&lt;br&gt;*/&lt;br&gt;&lt;br&gt;&lt;br&gt;Route::get('products', 'ProductsController@index');&lt;br&gt;&lt;br&gt;Route::get('products/{product}', 'ProductsController@show');&lt;br&gt;&lt;br&gt;Route::post('products','ProductsController@store');&lt;br&gt;&lt;br&gt;Route::put('products/{product}','ProductsController@update');&lt;br&gt;&lt;br&gt;Route::delete('products/{product}', 'ProductsController@delete');&lt;br&gt;&lt;br&gt;&lt;br&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>ヘッダー有効になっていることを確認してください。<p> <code>Product $product検証と例外処理{product}

存在しないリソースに向かうと、これが表示されます。代わりにサーバーにJSON応答を返したい場合は、デフォルトの例外処理動作を変更する必要があります。 laravelには、

app/exceptions/handler.phpAccept : application/jsonにある例外ハンドリング専用のハンドラークラスがあります。クラスには主に2つの方法があります： report（）

および render（）<h2>。 <code>レポート メソッドは、例外イベントのレポートとログのログに役立ちますが、レンダリングメソッドは、例外が発生したときに応答を返すために使用されます。 JSON応答を返すようにレンダリングメソッドを更新します：

また、

composer create-project laravel/laravel example-app<br>

Laravelを使用すると、一連の検証ルールを使用して着信HTTP要求を検証し、検証が失敗した場合にJSON応答を自動的に返すこともできます。検証のロジックは、コントローラー内に配置されます。 IlluminateHttpRequestオブジェクトは、検証ルールを定義するために使用できる検証メソッドを提供します。 app/http/controllers/productscontroller.php。ただし、APIには、認証や不正なユーザーへのアクセスの制限などの基本的な機能がありません。 Laravelは、認証のためにすぐに使用できるサポートを受けており、APIを構築するのは比較的簡単です。認証APIを演習として実装することをお勧めします。

<?php<br><br>namespace App\Http\Controllers;<br><br>use Illuminate\Http\Request;<br>use App\Product;<br><br>class ProductsController extends Controller<br>{<br><br>    public function index()<br>	{<br>	    return Product::all();<br>	}<br><br>	public function show(Product $product)<br>	{<br>	    return $product;<br>	}<br><br>	public function store(Request $request)<br>	{<br>	    $product = Product::create($request->all());<br><br>	    return response()->json($product, 201);<br>	}<br><br>	public function update(Request $request, Product $product)<br>	{<br>	    $product->update($request->all());<br><br>	    return response()->json($product, 200);<br>	}<br><br>	public function delete(Product $product)<br>	{<br>	    $product->delete();<br><br>	    return response()->json(null, 204);<br>	}<br><br>}<br>

バックエンドが完了したので、フロントエンドの概念に焦点を移します。このシリーズの2番目の投稿はこちらでご覧ください：

以上がLaravel Restful Back Endを使用してReactアプリを構築する：パート1、Laravel 9 APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。