バックエンド

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

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

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

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

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

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

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

Laravel Udemy第4弾講座の内容

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

以前アンケート結果

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は少し慣れればかなり描き心地がよく、これからはこれで書いていくことになるなと実感できました。

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

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

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


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

コメント

    • たなか
    • 2022年 10月 09日 9:52am

    もしよろしければフロントエンドについてReactもあると思うのですが、Vue.jsを選定された理由があればお教えいただけますでしょうか?

      • aoki_monpro
      • 2022年 10月 09日 8:16pm

      特に理由はなくて、
      以前からVueを触っていたのでその流れで作った、になります。

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

CAPTCHA


最近の記事

アーカイブ

  1. 生成AI

    Dify講座をリリースしました【非エンジニア向け】
  2. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  3. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  4. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  5. データベース

    MySQLの講座をリリースしました
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
100% Free SEO Tools - Tool Kits PRO