Laravel+Vue|レコードのIDごとに独立した個別記事ページの作り方

2022年10月12日 2022年10月12日

Vue.jsとLaravelを使う方法。

投稿の個別ページに作り方。

ブログの記事1個1個の一意のURL

みたいなイメージ。

http://hogehoge.com/post/1

にアクセスすると、idが1番に該当する記事が出てくる。

そんな感じ。

ジャンプできる目次

1 バックエンド
2 ルーティング
3 フロントエンド

バックエンド

まずはAPIをつくる。

<?php
//プロジェクトディレクトリ\routes\api.php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\InquiryController;//これ忘れると動かない

//中略

Route::get('/inquiries/{id}', [InquiryController::class, 'single']);

ドメイン/inquiries/記事のレコードのID

の形式でフロントから要求が来たら、

InquiryController

の

singleメソッドが発動する。

該当レコードをそのまま全部返すなら、

//プロジェクトディレクトリ\app\Http\Controllers\InquiryController.php

use App\Models\Inquiry;
//中略
public function single(Inquiry $inquiry,$id){
        $inquiry = Inquiry::find($id);
        return $inquiry;
}

Resourceで成型するならこんなかんじ。

//プロジェクトディレクトリ\app\Http\Controllers\InquiryController.php

use App\Models\Inquiry;
//中略
public function single(Inquiry $inquiry,$id){
        $inquiry = Inquiry::find($id);
        return new InquiryResource($inquiry );
}

ここまで1回ブラウザからapiにアクセスしてみたらいいかも。

何かしらのレコード内容が返ってくれば成功。

APIは呼び出せていることになる。

ブラウザで直接呼び出したときは日本語が文字化けっぽい感じになるけど、気にしなくて大丈夫。

ルーティング

//プロジェクトディレクトリ\resources\js\router.js

import Inquiery from './components/page/Inquiery'//追記
//中略
export default new Router({
    mode: 'history',
    routes: [
            //追記
            {
              path: '/inquiries/:id(\\d+)',
              name: 'inquiery',
              component: Inquiery,
              props: route => ({
                  id: Number(route.params.id)
              })
            },
]

例えば

http://ドメイン/inquiries/1

にブラウザでアクセスしたら

Inquiery.vueのコンポーネントを利用する。

さらにコンポーネントには変数idを1として渡す。

フロントエンド

コンポーネントを作成

//backend\resources\js\components\page\Inquiery.vue
<template>
    <div>
        {{iquiery}}
    </div>
</template>

<script>
    export default {
        props: {
            id: Number,//idはURLから取得
        },

        data() {
            return {    
                iquiery:null,
            };
        },
        mounted(){
            axios.get("/api/inquiries/" + this.id)//api呼び出し
            .then(response => {
                        console.log(response.data.data)
                        this.iquiery = response.data.data
                    })
                    .catch(error => {
                        console.log('失敗')
                    })
        },
        methods: {
        },
    };
</script>
<style scoped>

</style>

id: Number,//idはURLから取得

ブラウザでアクセスするURL内の数値をクエリパラメーターとして読み取って利用しようとしている。

http://ドメイン/inquiries/1が現在ブラウザでアクセスしているURLなら、IDは1になる

みたいな感じ。

axios.get("/api/inquiries/" + this.id)//api呼び出し

の部分は、記事のURLから取得したIDをさっき作ったapiに投げている。

apiの処理により、idが1のレコードの情報が変数 {{iquiery}}に格納される。

これであとはhtmlを好きなように整えれば個別ページは完成。

{{iquiery.id}

とか

{{iquiery.name}

みたいに書けば、指定したカラムの内容を呼び出してあげることができる。

html上ではなく、内で使いたい場合は、created(){ }の中に書けばいい。

↓こんな感じ。

created() {           
         console.log(this.iquiery) 
}

mounted()内に書くと、htmlの描画前に動くのでうまくいかないみたい。