【Laravel × Nuxt】ブログの記事一覧の作成

LaravelとNuxtを使ったヘッドレスのブログを作って行きます。

Laravel ではバックエンドを構築を行い、Nuxtではフロント部分を作成します。

今回行うこと

Laravel
1. 投稿テーブルの作成
2. 投稿の一覧を表示するためのAPIの作成
Nuxt
1. 記事一覧ページの作成
2. APIから記事の取得をし、表示を行う

Laravel
1. 投稿テーブルの作成
2. 投稿の一覧を表示するためのAPIの作成
Nuxt
1. 記事一覧ページの作成
2. APIから記事の取得をし、表示を行う
まとめ
1. 初学者におすすめの参考書

Laravel

投稿テーブルの作成

モデルの作成

まずはモデルの作成を行います。

php artisan make:model Posts

上記のcommandを打てばLaravel 側でModelファイルを作成してくれます。

php artisan make:model Posts —migrationとすればマイグレーションファイルも同時に作成をしてくれます。

中身は、以下のようになっています。

<?php

namespace App\\Models;

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

class Posts extends Model
{
    use HasFactory;
}

マイグレーション

次に、マイグレーションファイルの作成を行います。

php artisan make:migration create_posts_table

上記のcommandを実行することで、マイグレーションフィルの作成が行われます。

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
        });
    }

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

ここまでできるとあとは追加するカラムの追加していきます。

今回追加するカラムは

id：ID
timestamps：タイムスタンプ
user_id：ユーザーID
title：タイトル
content：本文
status：投稿ステータス
tags：タグ（カテゴリ）

項目を追加したあとのファイルは下記のとおりになります。

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->integer("user_id")->comment("ユーザーID");
            $table->string('title')->comment("タイトル");
            $table->string("content")->comment("本文");
            $table->integer("status")->comment("投稿ステータス");
            $table->string("tags")->comment("タグ");
        });
    }

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

また、モデルにも使うカラムの追加を行います。

<?php

namespace App\\Models;

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

class Posts extends Model
{
    use HasFactory;

    /**
     * モデルに関連付けるテーブル
     *
     * @var string
     */
    protected $table = 'posts';

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = ['id', 'user_id', 'content', 'status', 'tags'];
}

投稿の一覧を表示するためのAPIの作成

コントローラ

php artisan make:controller PostsController

上記commandで、コントローラファイルの作成ができます。

<?php

namespace App\\Http\\Controllers;

use Illuminate\\Http\\Request;
use App\\Models\\Posts;
use Illuminate\\Support\\Facades\\DB;

class PostsController extends Controller
{

    /**
     * postテーブルからすべてのデータを取得
     * @return \\Illuminate\\Http\\Response
     */
    public function getPostData() {
        $posts = DB::table('posts')->get();

        return $posts;
    }
}

Modelから投稿データのすべてのデータを取得します。

ルーターの設定

Route::get('/posts', [PostsController::class, 'getPostData'])->name('posts');

Nuxt

次はフロント側のページの作成を行います。

記事一覧ページの作成

今回はTOPページを一覧ページとするので、page/index.vueファイルの作成を行います。

まず静的ページの作成をし、その後にAPIのレスポンスを受け取り投稿のタイトルとタグを表示していきます。

<template lang="pug">
  .container
    h1 記事一覧
    ul.content-list
      li
				span 1
				span tags
				h2 記事タイトル
</template>

<script>
export default {
}
</script>

<style lang="stylus">
.container
  h1
    font-size rem(24px)
    line-height: rem(32px)
    padding-left 10px
    border-left: 3px solid #409EFF
  .content-list
    margin-top: 30px
    li
      display: flex
      align-items: center
      span
        margin-left: 15px
        &:first-child
          margin-left: 0
      .tag
        padding 5px 8px
        background: #409EFF
        color: color-white
        border-radius: 5px
        margin-right: 10px
</style>

APIから記事の取得をし、表示を行う

APIのレスポンスを受けとるために、axiosを使って通信を行います。

<template lang="pug">
  .container
    h1 記事一覧
    ul.content-list
      li(v-for="item in response" :key="item.id")
        span {{ item.id }}
        span.tag {{ item.tags }}
        h2 {{item.title }}
</template>

<script>
export default {
  data() {
    return {
      response: '',
    }
  },
  mounted() {
    this.getPostsData()
  },
  methods: {
    getPostsData() {
      this.$axios
        .get(this.$axios.defaults.baseURL + 'posts')
        .then((response) => {
          this.response = response.data
        })
    }
  },
}
</script>

cssは割愛

APIのベースURLの設定

this.$axios.defaults.baseURLはAPIのベースURLを設定しています。

今回はLaravel のビルドインサーバーで通信を行う想定なので、http://127.0.0.1:8000/api/と設定をします。

nuxt.config.jsに書きを追加

axios: {
  prefix: process.env.API_BASE_URL,
  proxy: true
},

.envに下記を追加

API_BASE_URL=http://127.0.0.1:8000/api/

これでベースURLの設定は完了です。

APIの受け取り

methods: {
  getPostsData() {
    this.$axios
      .get(this.$axios.defaults.baseURL + 'posts')
      .then((response) => {
        this.response = response.data
      })
  }
},

今回は必ず投稿のデータが受け取れる前提でプログラムを組んで行きます。

まずは、データを受け取るためのURLを設定し、レスポンスを受け取ります。

受け取った、データをresponseに代入しそのデータをフロント側で表示します。

まとめ

Laravel
1. 投稿テーブルの作成
2. 投稿の一覧を表示するためのAPIの作成
Nuxt
1. 記事一覧ページの作成
2. APIから記事の取得をし、表示を行う

初学者におすすめの参考書

リンク