p-t-a-p-1 / vuesplash

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-laravel-photo-shared-app

Vue + Vue Router + Vuex + Laravelで写真共有アプリ

まずはチュートリアル進めていって独自機能は後々考えます DBはPostgreSQL

機能要件

  • 写真一覧を表示
  • 写真を投稿(登録ユーザーのみ)
  • 写真にいいねをつける(登録ユーザーのみ)
  • 写真のいいねを外す(登録ユーザーのみ)
  • 写真に付けられたいいねの数を表示する
  • 写真にコメントをつける(登録ユーザーのみ)
  • 写真に付けられたコメントを表示する
  • 会員登録
  • ログイン(登録ユーザーのみ)
  • ログアウト(登録ユーザーのみ)

DB

photosテーブル

列名 特徴 備考
id VARCHAR(255) PRIMARY, UNIQUE, NOT NULL ランダムな文字列
user_id INTEGER NOT NULL, foreign( users(id) ) usersテーブルのidと紐づく
filename VARCHAR(255) NOT NULL 画像ファイル名
created_at TIMESTAMP - -
updated_at TIMESTAMP - -

commentsテーブル

SERIALは自動採番

列名 特徴 備考
id SERIAL PRIMARY, UNIQUE, NOT NULL ID
photo_id VARCHAR(255) NOT NULL, foreign( photos(id) ) コメントされた写真ID
user_id INTEGER NOT NULL, foreign( users(id) ) コメントしたユーザーID
content TEXT NOT NULL コメント本文
created_at TIMESTAMP - -
updated_at TIMESTAMP - -

likesテーブル

列名 特徴 備考
id SERIAL PRIMARY, UNIQUE, NOT NULL ID
photo_id VARCHAR(255) NOT NULL, foreign( photos(id) ) コメントされた写真ID
user_id INTEGER NOT NULL, foreign( users(id) ) コメントしたユーザーID
created_at TIMESTAMP - -
updated_at TIMESTAMP - -

usersテーブル

列名 特徴 備考
id SERIAL PRIMARY, UNIQUE, NOT NULL ID
name VARCHAR(255) NOT NULL ユーザー名
email VARCHAR(255) UNIQUE, NOT NULL メアド
password VARCHAR(255) NOT NULL パスワード
remenber_token VARCHAR(100) - -
email_verified_at TIMESTAMP - 認証された時刻
created_at TIMESTAMP - -
updated_at TIMESTAMP - -

URL設計

API

URL メソッド 認証 処理内容
/api/photos GET - 写真一覧取得
/api/photos POST 🔑 写真投稿
/api/photos/{写真ID} GET - 写真詳細取得
/api/photos/{写真ID}/like PUT 🔑 写真にいいね追加
/api/photos/{写真ID}/like DELETE 🔑 写真にいいね削除
/api/photos/{写真ID}/comments POST 🔑 写真にコメント追加
/api/register POST - 会員登録
/api/login POST - ログイン
/api/logout POST 🔑 ログアウト
/api/user GET 🔑 認証ユーザー取得

フロントエンド(Vue Routerでルーティング)

URL メソッド 認証 処理内容
/ GET - 写真一覧ページ
/photos/{写真ID} GET - 写真詳細ページ
/login GET - ログインページ

その他

URL メソッド 認証 処理内容
/ GET - 最初にHTML返却
/photos/{写真ID}/download GET - 写真のダウンロード

About


Languages

Language:PHP 70.1%Language:Vue 17.3%Language:HTML 11.9%Language:Dockerfile 0.5%Language:Shell 0.3%