バックエンド

【Laravel第4弾】Vue.js3(CompositionAPI+ScriptSetup)で顧客管理システム【Udemy】

Laravel講座第4弾になります。

6月頃に受講者の方向けにお願いしたアンケート結果に基づき、

Vue.js3 (CompositionAPI + script setup) + Laravel (Breeze + Inertia)
という開発環境で、

顧客管理システム(CRM)を作ってみるという内容になっています。

時間はトータル12時間、動画本数約115本。

最新クーポン情報はこちら

Laravel Udemy第3弾講座の内容

以前のアンケート結果をもとに講座を作成しております。

以前アンケート結果

Vue.jsはver3.0でCompositionAPIが追加され、
ver3.2 でより簡単に書ける script setup 構文が追加されていますので、

ほぼ全てのコンポーネントで『script setup』で書いております。

■フロントエンド Vue.js3

CompositionAPI + script setup

defineProps, defineEmits, ref, reactive, computed, onMounted, v-show, v-if, v-on, v-bind, v-for

バックエンドはLaravelになりますが、
Vue.jsとの開発環境の作りやすさを優先して、【Laravel Breeze (Inertia) 】で構築しています。

また顧客管理システムということで、
4つのテーブルをjoinしてサブクエリを作った状態をベースにする『グローバルスコープ』や、
中間テーブルを操作する『attach』や『sync』などは
今回初めて扱ったメソッドかなと思います。

■ バックエンド Laravel

LaravelBreeze, Inertia, Ziggy, Link,

Sanctum (API)、クエリスコープ、リレーション(1対多、多対多, attach, sync)、ページネーション、トランザクション、Inertiaミドルウェア、フラッシュメッセージ、バリデーション、カスタムリクエスト、Seeder、Faker、Factory、

■データ分析

期間指定、日別分析、月別分析、デシル分析、RFM分析 など

使っているライブラリは下記です。

yubinbango-core2, micromodal.js, axios, vue-charts-3

■動画収録時の環境

  • PHP 8.0.8
  • Laravel 9.3.0
  • composer 2.2.4
  • vue 3.2.0

無料公開分の動画

■ Laravel Breeze + Inertiaのインストール

■ aタグとLinkコンポーネントの違い

■ Vue.js3の概要

■ スロットと名前付きスロット

■ CRMについて

■ API通信 ( sanctum + axios)

■グローバルスコープ

今回の講座の苦労話

Ajaxでクエリ結果を取得しグラフ描画するのですが、
最初に試した vue3-chartsというライブラリではどうにもうまくいかず(1度目の取得は描画されるけど2度目からは目盛りがおかしくなる)
うんうん試して結果的にライブラリ側のミスだと判断し、

別のvue-charts-3 に変更したらあっさり描画されました。

ライブラリは楽だけれどしっかり試さないといけないですね。

リリース後の追加予定

デシル分析、RFM分析は追加予定です。
(分析はきりがないのでRFM分析くらいまでで一旦止める予定です。)
->追加しました。

Laravel第4弾講座を作成してみて

script setupは少し慣れればかなり描き心地がよく、これからはこれで書いていくことになるなと実感できました。

コンポーネント分割や関数化などまだまだ改善できるとは思いますが、
かなりたくさんの技術を盛り込んでおりますので、

フロントエンド、バックエンド、クエリなどをまとめて習得できる講座になっていると自負しておりますので、
ぜひご活用いただければ幸いです。

最新クーポン情報はこちら


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】
  2. オンライン教材

    【JavaScript】初心者向けの動画をリリースしました【Udemy】
  3. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  4. CG関連

    【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【U…
  5. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
PAGE TOP