![レベル３
<hoge-view
:data="{{ $hoge->toJson() }}"
hoge1-url="{{ route('web.hoge1.index') }}"
hoge2-url="{{ route('web.hoge2.store', [$hoge2_id]) }}"
hoge3-url="{{ route('web.hoge3.update', [$hoge3_id]) }}"
hoge4-url="{{ route('web.hoge4.delete', [$hoge4_id]) }}"
hoge5-url="{{ route('web.hoge5.store', [$hoge5_id]) }}"
hoge6-url="{{ route('web.hoge6.store', [$hoge6_id]) }}"
hoge7-url="{{ route('web.hoge7.update', [$hoge7_id]) }}"
hoge8-url="{{ route('web.hoge8.update', [$hoge8_id]) }}"
/>](https://image.slidesharecdn.com/laravel-vue-project-upload-190714061304/85/Laravel-vue-project-upload-11-320.jpg)
![[Service worker] フ?ッシュ通知の使い方](https://cdn.slidesharecdn.com/ss_thumbnails/serviceworker-150405005452-conversion-gate01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Laravel vue-project-upload (20)
More from 小川 昌吾 (20)
Laravel vue-project-upload
- 8. レベル１ ● ログイン画面 ○ formのサブミットで入力値を送信 ○ サーバサイドのバリデーションエラーは Laravelの機能で表示 ○ クライアントサイドバリデーション自作 ベターJQuery的な使い方
- 10. レベル２ ● 動的な画面 ○ やたら動的に増える項目が多いから Vueの恩恵 ○ 配列削除に弱い ■ Keyの壁 ○ Atomic Designの恩恵 ○ vee-validate導入
- 11. レベル３ <hoge-view :data="{{ $hoge->toJson() }}" hoge1-url="{{ route('web.hoge1.index') }}" hoge2-url="{{ route('web.hoge2.store', [$hoge2_id]) }}" hoge3-url="{{ route('web.hoge3.update', [$hoge3_id]) }}" hoge4-url="{{ route('web.hoge4.delete', [$hoge4_id]) }}" hoge5-url="{{ route('web.hoge5.store', [$hoge5_id]) }}" hoge6-url="{{ route('web.hoge6.store', [$hoge6_id]) }}" hoge7-url="{{ route('web.hoge7.update', [$hoge7_id]) }}" hoge8-url="{{ route('web.hoge8.update', [$hoge8_id]) }}" />
- 12. レベル３ ● 項目が増え続ける画面 ○ URLの追加がしんどい ○ そのバケツリレーに心底疲れる ■ Vuexのストアに放り込む ● ziggyの追加 ○ notify messageの表示が怠い問題 ■ EventHubの追加 ● ステップ入力しないといけないような長大画面
- 13. ziggy ● Laravelのルーティング定義をjson形式にする ● Laravelのrouteヘルパーと同じ書き口で書ける ● vuexから呼ぶと気分が微妙になる() Laravel route(‘web.home’) vue route(‘web.home’) vuex this._vm.route(‘web.home’)
- 15. EventHub import EventHub from '@/EventHub' Vue.use(EventHub) ```component.vue this.$eventHub.$on(‘event-name’, (value) => {/* 処理 */}) this.$eventHub.$emit(‘event-name’, value)
- 16. this.$eventHub.$on(‘event-name’, (value) => { // 何か処理 ??? this.$eventHub.$emit(‘return-event-name’, returnValue) }) this.$eventHub.$once(‘return-event-name’, (value) => {処理}) this.$eventHub.$emit(‘event-name’, value) EventHubの応用
- 17. 画面構成 ヘッダーメニュー サ イ ド メ ニ ュ ｜ フッター メインコンテンツ タイトル + beadcrumb タイトル（errorCapturedでのエラーメッセージの表示含む） notification(event Hub) モーダル表示(event Hub)
- 18. バックエンドフロントエンド UIコンポーネント 今現在の要素 Vue + Vuex 言語ファイル ルーティング ファイル
- 19. まとめ ● 簡単すぎる画面からやらない ● サーバサイドFWのリソース -> Vueで使用するリソースを自動生成 ● $refsは積極採用 ● イベントハブは重要 ● Nuxtの仕組みは参考になる
- 20. 課題 ● DBに持ってるデータで入力フォーム生成するとき のデータの取り方 ● 画面遷移以外で画面の表示をガサっと変えたい ○ 今日扱えなかった ○ イベントハブで通知してv-if ○ vue-rouerで履歴登録させないとか出来ると達 成できるんだけど、、情報求む
- 21. 参考 ● Buefy https://buefy.org/ ● ziggy https://github.com/tightenco/ziggy ● generate vue-i18n ?le https://github.com/martinlindhe/laravel-vue-i18n-generator ● VeeValidate https://baianat.github.io/vee-validate/ ● Vue.js入門 基礎から実践アプリケーション開発まで? https://www.amazon.co.jp/dp/4297100916/ref=cm_sw_em_r_mt_dp_U_BKbkDb2XSD6QF ? ?
- 22. おしまい