理系公務員のプログラミング日記

axios + Restful API によって連携させる

Laravel側で本のタイトル、価格を配信するAPIを作成し、それをVue側でaxiosで受け取ります。

バックエンド（Laravel）からAPIを用意する

まずは、バックエンド側から配信するAPIを用意します。

モデルの作成

モデルを作成するコマンドに、--migrationオプションを付けることで、モデルとマイグレーションファイルを同時に作成できます。（便利）

php artisan make:model Book --migration

Laravel8 では、作成したモデルはapp/Modelsフォルダに追加されます。

app/Models/Book.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    protected $fillable = [
        'title',
        'price',
    ];
}

create_books_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('books', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('books');
    }
}

シードファイルの作成

シードを作成します。

php artisan make:seeder BooksTableSeeder

シードファイルを編集

database/seeders/BooksTableSeeder

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class BooksTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $param = [
            'title' => '坊ちゃん',
            'price' => '500'
        ];
        DB::table('books')->insert($param);
    
        $param = [
            'title' => 'こころ',
            'price' => '600'
        ];
        DB::table('books')->insert($param);

        $param = [
           'title' => '三四郎',
            'price' => '450'
        ];
        DB::table('books')->insert($param);
    }
}

このBooksTablseSeederを登録します。

seeds/DatabaseSeeder.php

<?php
namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        $this->call(BooksTableSeeder::class);
    }
}

最後にデータベースの設定を忘れず行ってください。(.envファイル)

完了したら、マイグレーションを実行します。

マイグレーションの実行

php artisan migrate --seed

コントローラーの作成

-apiを付けて、コントローラーファイルを作成します。

php artisan make:controller BookController --api

作成されたapiのコントローラを、api専用のルーティングに登録します。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

// Laravel8から使うコントローラのuseが必要
use App\Http\Controllers\BookController;

// Laravel8から書き方が変更された
// apiに対応したrestfulにしておく
Route::apiResource('/books',BookController::class);

ルーティングが完了しているか確認します

php artisan route:list

+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
| Domain | Method    | URI                 | Name          | Action                                                     | Middleware                               |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
|        | GET|HEAD  | /                   |               | Closure                                                    | web                                      |
|        | GET|HEAD  | api/books           | books.index   | App\Http\Controllers\BookController@index                  | api                                      |
|        | POST      | api/books           | books.store   | App\Http\Controllers\BookController@store                  | api                                      |
|        | GET|HEAD  | api/books/{book}    | books.show    | App\Http\Controllers\BookController@show                   | api                                      |
|        | PUT|PATCH | api/books/{book}    | books.update  | App\Http\Controllers\BookController@update                 | api                                      |
|        | DELETE    | api/books/{book}    | books.destroy | App\Http\Controllers\BookController@destroy                | api                                      |
|        | GET|HEAD  | api/user            |               | Closure                                                    | api                                      |
|        |           |                     |               |                                                            | App\Http\Middleware\Authenticate:sanctum |
|        | GET|HEAD  | sanctum/csrf-cookie |               | Laravel\Sanctum\Http\Controllers\CsrfCookieController@show | web                                      |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+

コントローラの設定

APIの発信を行うために、getでapi/booksにアクセスした時に表示されるindexアクションを設定します。

indexアクションではテーブルの本のリストを全て表示します。

BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
// 追加
use App\Models\Book;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $books = Book::all();
        // eloquantをそのままreturnすると、jsonに変換してくれる。
        return $books;
    }

api/bookにアクセスして、APIを表示できるか確認してください。

フロントエンド（Vue）からaxiosでAPIを取得する

ここからはVue（フロントエンド）側の設定になります。

vueのファイルを変更するときは、常にwatchを動かしてコンパイルしてください。

npm run watch

axiosを利用してこのAPIのデータを取得します。

composition APIを使ってコンソールに表示します。

App.vue

import { reactive } from "vue";
import HelloWorld from "./components/HelloWorld";

import axios from "axios";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    const data = reactive({
      message: "Hello Vue!!!!!!!!",
    });
    const url = "サーバーのURL/api/books";
    const getAPI = async () => {
      const result = await axios.get(url);
      console.log(result);
    };

    getAPI();

    return {
      data,
      getAPI,
    };
  },
};

トップページにアクセスして、Vue側で取得できているか確認してください。