「LaravelとNuxtではじめるSNSシェアアプリ開発」の感想・備忘録

【POD】LaravelとNuxtではじめるSNSシェアアプリ開発

posted with ヨメレバ

寺田晃大/峯岸海インプレスR&D 2020年05月01日頃

点数

68点

感想

LaravelもNuxt.jsも中途半端な内容だった。

本書だけでちゃんとしたWebアプリを作成するのは難しいと思う。

バックエンド

環境構築

Laravelのインストール

curl -s https://laravel.build/backend | bash
書籍ではLaravel 6だが、ここではLaravel9をインストールする。

config/app.phpを編集

'timezone' => 'Asia/Tokyo',  
'locale' => 'ja',  
'faker_locale' => 'ja_JP',

.envを編集

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ogp
DB_USERNAME=root
DB_PASSWORD=pass

docker-compose.ymlを作成

version: '3.1'
services:
   db:
      image: mysql:5.7
      command: >
      --character-set-server=utf8mb4
      --collation-server=utf8mb4_unicode_ci
      --general-log=true
      --general-log-file=/var/log/mysql/general.log
      environment:
      - MYSQL_DATABASE=ogp
      - MYSQL_ROOT_PASSWORD=pass
      - MYSQL_USER=default
      - MYSQL_PASSWORD=password
      - TZ=Asia/Tokyo
      ports:
      - "3306:3306"

データ登録APIの実装

MessageController作成

php artisan make:controller MessageController

namespace App\Http\Controllers;

use App\Models\Message;
use Illuminate\Http\Request;
use DB;
use Illuminate\Support\Str;

class MessageController extends Controller
{
    public function store(Request $request)
    {
        $params = $request->json()->all();
        $uuid = DB::transaction(function () use ($params) {
            $message = new Message();
            $message->uuid = (string)Str::uuid();
            $message->message = $params['message'];
            $message->save();
            return $message->uuid;
        });

        return response()->json($uuid);
    }
}

routes/api.phpに追加

use App\Http\Controllers\MessageController;
// と
Route::post('/messages', [MessageController::class, 'store']);
// Larave8から記述方法が変わったので注意。

マイグレーション

php artisan make:migration create_messages_table

public function up()
{
    Schema::create('messages', function (Blueprint $table) {
        $table->increments('id')->primary();
        $table->uuid('uuid');
        $table->string('message');
        $table->timestamps();
    });
}
// php artisan migrateで実行

Messageモデル作成

php artisan make:model Message

データ取得APIの実装

routes/api.phpに追加

Route::get('/messages/{message}', [MessageController::class, 'show']);

MessageControllerに追加

public function show(Message $message)
{
  return response()->json([
    'message' => $message->message
  ]);
}

フロントエンド

環境構築

インストール

npx nuxi init frontend
書籍ではNuxt 2だが、ここではNuxt 3をインストールする。
cd frontend
npm install
npm run dev

App.jsの修正

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

layouts/default.vueを作成

mkdir layouts
touch layouts/default.vue

<template>
  <header>header</header>
  <hr>
  <slot />
  <hr>
  <footer>footer</footer>
</template>

pages/index.vueを作成

mkdir pages
touch pages/index.vue

<template>
  <h1>index</h1>
</template>

データ登録画面の作成

pages/index.vueを修正

Nuxt 3ではaxiosは不要、useFetchを使う。

<template>
  <h1>index</h1>
  <form>
  <label>あなたのメッセージ</label>
  <input
      class="input"
      name="message"
      v-model="message"
      placeholder="メッセージを入力してください"
  />
    <button type="button" v-on:click="send()">送信</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  methods: {
    async send () {
      const { data } = await useFetch('http://127.0.0.1:8000/api/messages', {
        method: 'POST',
        body: {message: this.message},
      });
    }
  },
}
</script>