CakePHPとVue-cli2でSPA②コントローラーからVueに変数を渡す

70 回閲覧されました

公開日 : 2024年3月29日
最終更新日 : 2024年4月3日

みなさんこんにちは、jonioです。

前回はCakePHPとVue-cliの連携をしました。

CakePHPとVue-cli2でSPA①CakePHPにVue.jsを導入

みなさんこんにちは、jonioです。 CakePHPにVue […]

今回はCakePHPのコントローラーからVueに変数を渡してブラウザに表示します。

CakePHPの4系をベースに解説しますが3系は一部書き方が違うのでその部分にも触れます。

1 コントローラーからVueに渡す変数
2 default.phpの編集
3 CakePHPの設定
4 routes.php
5 Vue.jsの設定

コントローラーからVueに渡す変数

テーブルの中身の情報を渡します、使うテーブル名はdemoです。

カラムは以下になりますが自分で用意したテーブルを使っても問題ないです。

default.phpの編集

下記のコードに変更してください。

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 * @link          https://cakephp.org CakePHP(tm) Project
 * @since         0.10.0
 * @license       https://opensource.org/licenses/mit-license.php MIT License
 * @var \App\View\AppView $this
 */

$cakeDescription = 'CakePHP: the rapid development php framework';
?>
<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        <?= $cakeDescription ?>:
        <?= $this->fetch('title') ?>
    </title>

    <?= $this->Html->css(['normalize.min', 'milligram.min', 'cake']) ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>

  <?= $this->AssetMix->script('main') ?>

</head>
<body>
    <nav class="top-nav">
        <div class="top-nav-title">
            <a href="<?= $this->Url->build('/') ?>"><span>Cake</span>PHP</a>
        </div>
        <div class="top-nav-links">
            <a target="_blank" rel="noopener" href="https://book.cakephp.org/4/">Documentation</a>
            <a target="_blank" rel="noopener" href="https://api.cakephp.org/4/">API</a>
        </div>
    </nav>
    <main class="main">
        <div class="container">
            <?= $this->fetch('content') ?>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

50行目がないとVue.jsが表示できないです。

CakePHPの設定

今回はDemoコントローラーのindexアクションでブラウザ（http://localhost/demo/index）を表示します。

コントローラーのindexアクションのコードを下記にします。

public function index()
{
  $demos = $this->Demo->find('all')->toArray();

  $this->set(compact('demos')); 

  $this->viewBuilder()->setOption('serialize', ['demos']);

}

7行目はCakePHPのバージョンが4の場合の書き方で3の場合の書き方は下記になります。

$this->set('_serialize', 'demos');

話を戻して、7行目の「demos」は5行目の「demos」と同じにします。

次はindex.phpです、コードを下記にします。

<div id="app"></div>

今回は「http://localhost/demo/index」でVue.jsを表示したいので上記のコードをこのファイルに持ってきました。

routes.php

「CakePHPのプロジェクト > config > routes.php」の編集をします。

<?php
/**
 * Routes configuration.
 *
 * In this file, you set up routes to your controllers and their actions.
 * Routes are very important mechanism that allows you to freely connect
 * different URLs to chosen controllers and their actions (functions).
 *
 * It's loaded within the context of `Application::routes()` method which
 * receives a `RouteBuilder` instance `$routes` as method argument.
 *
 * CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 * @link          https://cakephp.org CakePHP(tm) Project
 * @license       https://opensource.org/licenses/mit-license.php MIT License
 */


//ここから追加
use Cake\Routing\Route\DashedRoute;
use Cake\Routing\RouteBuilder;
//ここまで追加


/*
 * The default class to use for all routes
 *
 * The following route classes are supplied with CakePHP and are appropriate
 * to set as the default:
 *
 * - Route
 * - InflectedRoute
 * - DashedRoute
 *
 * If no call is made to `Router::defaultRouteClass()`, the class used is
 * `Route` (`Cake\Routing\Route\Route`)
 *
 * Note that `Route` does not do any inflections on URLs which will result in
 * inconsistently cased URLs when used with `:plugin`, `:controller` and
 * `:action` markers.
 */
/** @var \Cake\Routing\RouteBuilder $routes */
// $routes->setRouteClass(DashedRoute::class);


//ここから追加
$routes->setExtensions(['json']);
$routes->resources('Demo');
//ここまで追加


$routes->scope('/', function (RouteBuilder $builder) {
  /*
  Here, we are connecting '/' (base path) to a controller called 'Pages',
  * its action called 'display', and we pass a param to select the view file
  * to use (in this case, templates/Pages/home.php)...
  */
  $builder->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);

  /*
  * ...and connect the rest of 'Pages' controller's URLs.
  */
  $builder->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);

  $builder->connect('/demo/index', ['controller' => 'Demo', 'action' => 'index'])->setExtensions(['json']);      //この行を追加

  /*
  * Connect catchall routes for all controllers.
  *
  * The `fallbacks` method is a shortcut for
  *
  * ```
  * $builder->connect('/:controller', ['action' => 'index']);
  * $builder->connect('/:controller/:action/*', []);
  * ```
  *
  * You can remove these routes once you've connected the
  * routes you want in your application.
  */
  $builder->fallbacks();
});

/*
 * If you need a different set of middleware or none at all,
 * open new scope and define routes there.
 *
 * ```
 * $routes->scope('/api', function (RouteBuilder $builder) {
 *     // No $builder->applyMiddleware() here.
 *     // Connect API actions here.
 * });
 * ```
 */

54行目の「Demo」はコントローラー名です、今回はDemoコントローラーを使うのでDemoを指定しています。

53行目は71行目に使う為にあります、「->setExtensions([‘json’])」でDemoコントローラーの「$demos」をjsonに変換します。

public function index()
{
  $demos = $this->Demo->find('all')->toArray();       //←これ

  $this->set(compact('demos')); 

  $this->viewBuilder()->setOption('serialize', ['demos']);

}

これで「http://localhost/demo/index.json」にアクセスすると下記の表示になりdemoテーブルの内容をjsonで表示されているのが確認できます。

{
  demos: [
    {
      id: 1,
      title: "title1",
      content: "content1",
      like_flag: true,
      created: null,
      modified: null
    },
    {
      id: 2,
      title: "title2",
      content: "content2",
      like_flag: false,
      created: null,
      modified: null
    },
    {
      id: 3,
      title: "title3",
      content: "content3",
      like_flag: true,
      created: null,
      modified: null
    }
  ]
}

このデータをVueで使えるようにします。

Vue.jsの設定

まずはmain.jsの設定をします。

main.js

エントリーポイントの設定をします。

「CakePHPのプロジェクト > resources > vue_demo > src > App.vue」を最初に呼び出すVueファイルにする為に「CakePHPのプロジェクト > resources > vue_demo > src > main.js」のコードを下記にします。

import Vue from 'vue';
import  App from './App';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

「CakePHPのプロジェクト > resources > vue_demo > src > App.vue」のコードを下記にします。

<template>
  <entry></entry>
</template>

<script>
import Entry from './components/Entry.vue'

export default {
  name: 'App',
  components: {
    Entry
  }
}
</script>

Entry.vueはまだ作成していないので作成します。

Entry.vue

「CakePHPのプロジェクト > resources > vue_demo > src > components」の下の階層にEntry.vueを作成して下記のコードを記述します。

<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      demos   : [],  
    }
  },
  mounted: function(){
    axios.get('http://localhost/demo.json')
      .then(response  => {
            this.demos = response.data;

            console.log(this.demos);
      }) 
      .catch(err => {
          this.status = err.message;
      });
  },
};
</script>

11行目の「http://localhost/demo.json」の「http://localhost/demo」はdemoコントローラーのindexアクションという意味です。

「.json」は付けないといけないんだと思っていいです。

これで「http://localhost/demo/index」にアクセスしてデベロッパーツールを開くとDemoコントローラーのindexアクションにあった「$demos」を取得できているのが確認できます。

それでは$demosの内容をブラウザに表示します、Entry.vueに追記します。



//ここから追加
<template>
  <div>
    <ul>
      <li 
        v-for="demoList in demos" 
        :key="demoList.id"
      >
        <ul>
          <li 
            v-for="demo in demoList" 
            :key="demo.id"
          >
          {{ demo.title }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>
//ここまで追加


<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      demos   : [],  
    }
  },
  mounted: function(){
    axios.get('http://localhost/demo.json')
      .then(response  => {
            this.demos = response.data;

            console.log(this.demos);
      }) 
      .catch(err => {
          this.status = err.message;
      });
  },
};
</script>

これで「http://localhost/demo/index」にアクセスすると下記の表示になります。