dietcake(spongecake)とVue.jsを合わせる

LAMPサーバで動作することを念頭に、Laravelを使うほど重くはないがミニマルなPHPフレームワークを、ということでdietcakeを選び、Vue.jsとなんとか合わせられないかと試行錯誤。 ディレクトリ構造は以下。

Project/                             //@vue/cliで生成されるディレクトリをルートとする
    ├ piblic/
    │    ├ app/                      //dietcake(spongecake)のルート
    │    │   ├ config/
    │    │   ├ controllers/
    │    │   ├ helpers/
    │    │   ├ lib/
    │    │   ├ models/               //設定ファイル読み出し等
    │    │   ├ tmp/
    │    │   ├ view/
    │    │   │    ├ default/
    │    │   │    └ layouts/
    │    │   ├ webroot/              //公開ディレクトリ(バックエンド)
    │    │   ├ app_controller.php
    │    │   ├ app_exeption.php
    │    │   ├ app_layout.php
    │    │   └ app_model.php
    │    ├ vendor/                   //composer packages
    │    ├ index.html                //Vueの基本HTML
    │    └ favicon.ico
    ├ src/                           //フロントのソース(Vue.js)
    │   ├ assets/                    //画像、scssなどのアセット
    │   ├ components/                //Vueコンポーネント
    │   ├ views/                     //Vueのレイアウト
    │   ├ App.vue
    │   ├ main.js
    │   ├ router.js                  //Vue Router
    │   └ store.js                   //Vuex
    ├ .babel.config.js 等(@vue/cliで生成)
    └ readme.md, composer.json, package.json 等
こんな感じで想定し、環境構築。なお、composer.jsonには

{
    "config": {
        "vendor-dir": "public/vendor"
    },
}
と記述することで、vendorディレクトリの生成される場所を変更させています。

dietcake(spongecake)の準備


> composer create-project dietcake/spongecake cakeapp/
dietcake/spongecake – Packagistをインストールしようと思ったのですが、最終的にcomposer.jsonを調整する必要があるので普通にvueapp/public内部にクローンした後にcomposer.jsonの情報を書き換え。

dietcakeでバックエンド処理

設定ファイル読み出し(yamlのパース)やCRSF対策などの準備を行う。また、postされたデータのエラーチェックをして、バックエンドの処理を担うなど。

最初に行ったVueの準備


> npm i -D @vue/cli
で必要そうなパッケージをインストール。vue-cliは3.0系です。ついでに

> npm i -D axios bootstrap bootstrap-honoka copyfiles mkdirp npm-run-all rimraf
で使いそうなパッケージもインストール。 package.jsonにnpm scriptsを記述し、準備。
> vue create vueapp

Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
する。
> cd vueapp
> npm run serve
でOK。最初からscssがコンパイルできるのでOK。

Vue.jsでフロントエンド処理

Vue.jsではフロントエンドを記述。axiosからGETリクエストを飛ばして設定ファイルを読んだり、いろいろ処理を行う。バリデーションなどを行い、正常なデータは再びaxiosを通してpostする。開発中はvue-cliのnpm run serveで確認しながらコーディング。

参考

composer

DietCake

symfony/yaml

PHPでjson

yubinbango

vue-cli

Vueからaxios

Vue周り

JavaScriptのPromise