saba1024のブログスマートフォン用の表示で見るsaba1024のブログどうでも良い思いついた事とかプログラミング関係のメモとか書いていきます。この広告は、90日以上更新していないブログに表示しています。2017の7日目の記事です。この記事は、以下の5つの投稿で成り立っています。APIを提供できるようになりました。3でいい感じに扱うプラグインなどが有るようですが若干Vue.jsが蚊帳の外っぽい印象です。そこで今回、5回に渡ってGrailsとVue.jsを連携させるサンプルアプリケーションを作ってみます。Vue.js自体は非同期通信のための機能を提供していないので、ココではaxiosを利用します。3.3.1を利用しました。プロジェクト名はgvtodoとして普通にGrailsアプリケーションを作成します。gvtodoインタラクティブモードに入ります。例のごとく初回はライブラリがダウンロードされるのでしばし待機。grails完了したら今回利用する2つのドメイン(ToDoとTag)を生成します。tagそして、生成されたそれぞれのファイルの内容を以下のようにします。}}最後に、application.ymlの先頭のgrailsの部分に、CORSを有効化するべく、以下のように追記します。APIでアクセスすることが出来るようになります。これにて準備は完了です。run-appでGrailsを起動します。アクセスすれば、Grailsの起動ページが表示されます。試しに、http://localhost:8080/todo/、http://localhost:8080/tags/にアクセスしてみてください。何もデータがないので空っぽです。テストデータをcurlを使って適当に登録してみます。再度http://localhost:8080/todo/にアクセスしてみてください。なんと既にデータが登録されていますね!特定のデータにアクセスしたいときはhttp://localhost:8080/todo/1のように末尾にIDを付与します。APIサーバが構築出来る上に、上記のデータは正真正銘データベースに登録されています。デフォルトではGrailsを再起動すればデータは消えるので、初期開発時に非常に重宝します。Vue.jsの準備さて、ビューに関しては全部サーバサイドでゴリゴリ!という時代ではないようですので、Vue.jsを使ってみます。今回、SPAとしてVue.jsアプリケーションを作成していきますので、vue-cliをインストールます。インストールしている方は以下の手順は必要ありません。自分はグローバルにvue-cliをインストールしたくないので、適当なディレクトリにてvue-cliをインストール、そしてその中でvueコマンドを使ってVueアプリケーションを作成する、というスタンスです。いうことで、本当にどこでも良いので適当なディレクトリで以下を実行します。vue-cliこれで準備は完了です。実際にVueアプリケーションを作るのですが、当然フロントエンドなのでGrailsとは別のディレクトリに設置してもいいのですが、今回は作成したGrailsのディレクトリ直下に作成することにします。私の環境では/home/koji/work/grails/gvtodoがGrailsのプロジェクトトップなので、この直下にfrontendという名前でVueアプリケーションを作成します。/home/koji/work/grails/gvtodo/frontendすると以下のような対話シェルが起動されますので、?で始まっている部分の質問に答える必要が有ります。nameに適当な名前を付けるだけで後はデフォルトでいいと思います。これでVueアプリケーションが作成できました。今後は、/home/koji/work/grails/gvtodo/frontend以下にフロントエンド用のVueアプリケーションを記述していきます。(vue-cliインストールに利用した適当なディレクトリは削除してOKです。)なお、Vue.jsはあくまでViewのためのツールなので、サーバとの通信用に別途ライブラリが必要です。今回はaxiosを利用することにします。Grailsプロジェクト配下のVueアプリディレクトリに移動して、axiosをインストールします。axiosこれで完了!と言いたいところなのですが、Vueアプリケーションも自分自身でWebサーバをポート8080で起動するため、Grailsと被ってしまいます。このポートを別のもの(今回は8081)に変更しておきます。8080,という記述があるので、8080を8081に変更するだけでOKです。これで準備完了です!frontendディレクトリ内で、以下のコマンドを実行してVueアプリケーションを起動してください。http://localhost:8081これでブラウザでhttp://localhost:8081にアクセスすればVue.jsアプリケーションが動作していることが確認できます。まとめとりあえずコレでGrailsをVue.js/axiosそれぞれの環境構築が出来ました。次回から実際にGrailsをVue.sj/axiosを連携させてToDoアプリケーションを作成していきます。2017の11日目の記事です。2017の10日目の記事です。2017の9日目の記事です。2017の8日目の記事です。2017の1日目の記事です。月別アーカイブはてなブログをはじめよう!saba1024さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。