LAMPサーバで動作することを念頭に、Laravelを使うほど重くはないがミニマルなPHPフレームワークを、ということでdietcakeを選び、Vue.jsとなんとか合わせられないかと試行錯誤。
ディレクトリ構造は以下。
Project/ //@vue/cliで生成されるディレクトリをルートとする
├ public/
│ ├ 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
アルム＝バンド