Vue.jsとPhpで見積りシステム（２）〜Laravel導入編〜

今回はバックエンドAPI側を作成していきます。
バックエンドはphpの人気があるフレームワークLaravelを使います。現時点で最新環境のVersion6.4を利用しますが、Version5系でも同じように動作するはずです。

このAPIサーバは認証機能などは考慮ません、誰でも見積もりを作成できるようにログイン機能を必要としないためです。
※通常ユーザー登録を必要とする仕組みは、ログインが成功するとトークンを発行し、このトークンを使って承認する仕組みになります。

Laravelインストール
APIの作成
1. ルーティングの作成
2. コントローラの作成

Laravelインストール

インストールの前にLaravel Valetを使うとPHPの開発環境を簡単に作ることができます。
Laravel Valet 6.0 Laravel
osx catalinaでphpの7.1〜7.3をいつでも切り替え可能にする。 | Web屋さんの覚書

% composer create-project --prefer-dist laravel/laravel mitsumori-api

・・・
・・・
phpunit/phpunit suggests installing phpunit/php-invoker (^2.0.0)
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
> @php artisan key:generate --ansi
Application key set successfully.

インストールが完了したらブラウザで動作を確認します。
MacでLaravelを開発するならLaravel Valet　がおすすめです。
インストール方法は[]()こちら

APIの作成

APIの種類を記述します

CPUの一覧の取得
マザーボードの一覧の取得
グラッフィクボードの一覧の取得
HDDの一覧の取得
PCケース一覧の取得

ルーティングの作成

今回のバックエンドシステムはAPIとして動作するので画面を持ちません（管理画面を除く）そのため
routes/api.phpファイルにルーティングを記述します。

% vi routes/api.php
<?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::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::middleware(['cors'])->group(function () {
    // CPUの取得
    Route::get('cpu', 'ApiController@get_cpu');
    // マザーボード
    Route::get('mother_board/{cpu?}', 'ApiController@get_mother_board');
    // グラフィックカード
    Route::get('video_card', 'ApiController@get_video_card');
    // ハードディスク
    Route::get('storage', 'ApiController@get_storage');
    // ケース
    Route::get('pc_case','ApiController@get_pc_case');
    // 税率取得
    Route::get('tax','ApiController@get_tax');
});

コントローラの作成

Laravel側のコントローラーを作成します。ここは最終的にデータベース化しますが、とりあえずモックで作成します。

php artisan make:controller ApiController

ルーティングに対応したメソッドを作成します。

% vi app/Http/Controllers/ApiController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ApiController extends Controller
{
    /**
     * CPU一覧の取得
     */
    public function get_cpu(){
        $response = [
            ['id'=>1,'name'=>'すごいCPU','price'=>50000],
            ['id'=>2,'name'=>'普通のCPU','price'=>10000],
            ['id'=>3,'name'=>'イマイチなCPU','price'=>3000],
        ];
        return $response;
    }

    /**
     * マザーボード一覧の取得
     */
    public function get_mother_board(){
        $response = [
            ['id'=>1,'name'=>'すごいマザーボード','price'=>30000],
            ['id'=>2,'name'=>'普通のマザーボード','price'=>12000],
            ['id'=>3,'name'=>'イマイチなマザーボード','price'=>5000],
        ];
        return $response;
    }

    /**
     * フラフィックカード一覧の取得
     */
    public function get_video_card(){
        $response = [
            ['id'=>1,'name'=>'すごいビデオカード','price'=>60000],
            ['id'=>2,'name'=>'普通のビデオカード','price'=>8000],
            ['id'=>3,'name'=>'イマイチなビデオカード','price'=>2000]
        ];
        return $response;
    }

    /**
     * ストレージ一覧の取得
     */
    public function get_storage(){
        $response = [
            ['id'=>1,'name'=>'すごいSSD','price'=>20000],
            ['id'=>2,'name'=>'普通のHDD','price'=>5000],
            ['id'=>3,'name'=>'イマイチなSDカード','price'=>800]
        ];
        return $response;
    }

    /**
     * PCケース一覧の取得
     */
    public function get_pc_case(){
        $response = [
            ['id'=>1,'name'=>'すごいケース','price'=>12000],
            ['id'=>2,'name'=>'普通のケース','price'=>3000],
            ['id'=>3,'name'=>'イマイチなケース','price'=>1500]
        ];
        return $response;
    }

    /**
     * 税率
     */
    public function get_tax(){
        $response = [
            'rate'=>10
        ];
        return $response;
    }
}

正しくルートが登録されたか確認する

% php artisan route:list
+--------+----------+-------------------------+------+-----------------------------------------------------+--------------+
| Domain | Method   | URI                     | Name | Action                                              | Middleware   |
+--------+----------+-------------------------+------+-----------------------------------------------------+--------------+
|        | GET|HEAD | /                       |      | Closure                                             | web          |
|        | GET|HEAD | api/cpu                 |      | App\Http\Controllers\ApiController@get_cpu          | api,cors     |
|        | GET|HEAD | api/mother_board/{cpu?} |      | App\Http\Controllers\ApiController@get_mother_board | api,cors     |
|        | GET|HEAD | api/pc_case             |      | App\Http\Controllers\ApiController@get_pc_case      | api,cors     |
|        | GET|HEAD | api/storage             |      | App\Http\Controllers\ApiController@get_storage      | api,cors     |
|        | GET|HEAD | api/tax                 |      | App\Http\Controllers\ApiController@get_tax          | api,cors     |
|        | GET|HEAD | api/user                |      | Closure                                             | api,auth:api |
|        | GET|HEAD | api/video_card          |      | App\Http\Controllers\ApiController@get_video_card   | api,cors     |
+--------+----------+-------------------------+------+-----------------------------------------------------+--------------+

ブラウザで確認する。
http://mitsumori-api/api/cpu
["\u3059\u3054\u3044CPU","\u666e\u901a\u306eCPU","\u30a4\u30de\u30a4\u30c1\u306aCPU"]