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

点数

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
  ]);
}

フロントエンド

環境構築

インストール

  1. npx nuxi init frontend
    書籍ではNuxt 2だが、ここではNuxt 3をインストールする。
  2. cd frontend
  3. npm install
  4. 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>

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です