フォロー機能はLaravelと、Vue.jsで実装してる
フォローボタンと、フォロ数、フォロワー数の連携以外の部分は下記を見れば実装することができる。
https://www.youtube.com/watch?v=ImtZ5yENzgE
フォロー機能については主に下記２点が大事と思う
１．ユーザー登録機能がないとできない。
- Laravelの認証機能で簡単に実現できる
２．DBの設計では多対多であるユーザーテーブルと、プロファイルテーブルを持つことが必要。
npmの準備
LaravelはVue.jsが標準搭載されていまして、前準備はNode.jsをインストールしてnpmの使用
ができるようにするだけ。
- node.jsとnpmのインストール
sudo yum install nodejs npm --enablerepo=epel
- npmのバージョンアップ
npm install -g npm
- Vuexのインストール
コンポーネント間での通信（兄弟コンポーネント）を実現するのにVuexを必要とする。
npm install vuex --save
- 依存パッケージをインストール
cd /path/to/laravel /* Laravelルートディレクトリへ移動 */
npm install
- フロントエンドのビルド
cd /path/to/laravel /* Laravelルートディレクトリへ移動 */
npm run watch
以上でLaravel上のVue.jsがちゃんと動くはず！
ディレクトリの構成
- Laravelのresourcesディレクトリの構成
- views/profiles/index.blade.phpはフォローボタンと、フォロ数、フォロワー数を表示する
- js/app.jsはVueコンストラクタからインスタンスを生成する
- js/components/follow-button.vueはフォローボタンの単一ファイルコンポーネント
- js/components/followers.vueはフォロワー数の単一ファイルコンポーネント
- js/components/following.vueはフォロー数の単一ファイルコンポーネント
- js/store/store.jsはアプリケーションの 状態（state） を保持するVuexを取り込む
ソースコードはgithubにアップする。後ろの部分にリンクを貼る。
Vuex
スコープ関係で他コンポーネントにthisで参照する事ができないが、Vuexを使うことでコンポーネントの間で同一のデータを共有することが出来る。特に非親子コンポーネント間の通信はストアVuexを使わないと混雑になる。
js/store/store.jsについて詳しく説明する
store.js
15行目followUserメソッドはフォローボタンがクリックされた時のアクション、VuexではStoreの状態を変えるactionはすべてstore自身の中にないといけないため、フォローボタンのコンポーネントに書いていない。
１６行目axios.postはaxios(Promise)で非同期通信を行ってる。ここでサーバーにフォローと、フォローの解除を行う処理してる。
17行目はPromiseのthen()を使うコールバック処理、成功した場合は「true」を25行目.thenに渡して、フォローと、フォローの解除をした後のフォロ数、フォロワー数を数えてストアに反映させる。