コンテンツにスキップするには Enter キーを押してください

CakePHP3 + Vue2で簡単SPAをつくる

こんにちは、Fusic二年目吉野です。

今回は、CakePHP3とVue2でSPAを構築するまでを紹介します。

Vueの環境を構築するのは、vue-cliが非常に便利ですが、vue-cliだとフロント側のみのコード生成になります。

また、PHPのフレームワークとしては、Laravelは公式でVueを採用しているため、使用するまでのハードルが低いですが、CakePHP3はハードルが高いです。

CakePHPとVueをうまく組み合わせるには、webpackやBabelなど、たくさんのJSプラグインの知識が必要です。

  

今回は、手軽にCakePHP3+Vue2の環境を作ることができる、Cake_Webpacker を使って、CakePHP3+Vue2の環境を作っていきたいと思います。

  

環境

  • PHP
  • MySQL
       

  

初期設定

READMEにそって、まずはリポジトリをCloneします。


$ git clone git@github.com:ayasamind/cake_webpacker.git

次にcomposer installをします。
composerが入っていない方は公式サイトからダウンロードしてください。


$ php composer.phar install

次にyarnを使ってpackage.jsonにあらかじめ記述してあるモジュールをインストールします。

こちらも、yarnがない方はダウンロードをしてください。

https://yarnpkg.com/lang/ja/


$ yarn

最後に、src/Template/Layouts/default.ctpファイルの中に以下の一文を追加します。
ドメイン(localhost)は自分のCakePHPを置いているドメインに変更します。

<script src='http://localhost:3000/bundle.js'></script>

  

  

動かしてみる

webpackのサーバーを立ち上げます。

$ yarn run dev

コンパイルがされ、プロジェクトのディレクトリにブラウザからアクセスすると

Vueの初期画面が表示されます。

これで一応、SPAが完成しています。

ページを追加してみる

まずはフロント側からつくります。

src/Javascript/router/index.js


import HelloWorld from '../components/HelloWorld.vue';
// 追記
import SamplePage from '../pages/SamplePage.vue';

const router = new VueRouter({
    // mode: 'history',
    routes: [
      {
        path: '/',
        component: HelloWorld
      },
			// 追記
			{
			  path: '/sample/,
				component: SamplePage
			}
    ]
})    
export default router

src/Javascript/pages/SamplePage.vue を新規作成

<template>
    <div>
        <h2>サンプルページ</h2>
        <p></p>
    </div>
</template>

<script>
export default {

}
</script>

これで、/sampleにアクセスすると

ページが追加されていることが確認できます。

PHPからデータを受け取る

せっかくCakePHP3とVue2を両立させたので、データの受け渡しをしてみます。

既にCakePHP側には以下のようなHomeControllerのindexアクションがあります。

	public function index()
    {
        $home = "Hello Cake Webpacker!";

        $this->set(['data' => $home, '_serialize' => 'data']);
    }

このデータをVue側で受け取ります。

先ほど作成した、SamplePage.vueを変更していきます。


<template>
    <div>
        <h2>サンプルページ</h2>
        <p>{{ comment }}</p>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            comment: ''
        }
    },
    created() {
        this.getData();
    },
    methods: {
        async getData() {
            const data = await axios.get('home/index.json')
            .catch(err => console.log(err))
            this.comment = data.data;
        }
    }
}
</script>


axiosを利用してPHPからデータを受け取ります。

以下のような画面が表示されます。

これでPHPからVueへのデータの受け渡しができました。

以上、CakePHP3とVue2を簡単に両立させてみました。

お時間あれば是非試してみてください!

Fusicエンジニア。Webアプリケーションやブロックチェーンプログラミングをしています。PHP, Vue.js, Solidity etc..

コメントする

コメントを残す

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