|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/vuejslaravel11/
课程评论：没有评论
**课程名称：** 使用 Vue、React、Laravel11-12 构建支持发票的订单输入系统，并在 Xserver 上部署，生成 PDF 发票 **课程概述：** 本课程旨在教授学员如何构建一个 Web 应用程序，用于注册和更新客户订单信息。课程重点在于如何无缝地将 Vue 和 React 用于前端，以及 Laravel 用于后端，并通过 Inertia 进行集成。学员将学习如何构建一个功能远超基本 CRUD（创建、读取、更新、删除）的应用程序。 课程分为两个主要部分： * **前半部分**：使用 Vue 构建应用程序。 * **后半部分**：使用 React 构建几乎相同的应用程序。 此外，课程还将详细讲解如何在レンタルサーバー Xserver 上部署和发布所创建的 Web 应用程序。课程内容与 Laravel 11 和 Laravel 12 都兼容（拍摄时为 Laravel 11）。 **课程特点与收益：** 1. **提升用户体验：** 学习如何实现搜索功能和实时数据更新，让用户操作更直观、顺畅，提供超越基本数据增删的复杂操作。 2. **高效数据管理：** 通过数据过滤、详细信息展示和交互式操作，大幅提高数据利用效率。 3. **灵活功能实现：** 学习集成搜索、模态窗口等功能，满足用户多样化需求，应对复杂业务场景。 4. **直观易用性：** 使网站无需页面跳转即可快速访问所需信息，降低学习成本，提高用户满意度。 5. **满足业务需求：** 支持创建符合发票规范的账单，包含税率信息。 **课程内容亮点：** * **支持发票：** 能够生成支持增值税和减税政策的 PDF 发票，并在发票上标注减税商品。 * **高级前端交互：** 实现不经页面跳转即可显示商品信息（如代码、价格、税率），并通过模态窗口搜索并选择商品，然后自动更新至页面。 * **数据计算与处理：** 在详细页面，在控制器中进行金额和税费计算，并将结果传递给 Vue 文件，按税率分类汇总，支持发票需求。 * **技术栈整合：** 学习如何通过 Inertia 将 Vue.js、React 与 Laravel 集成，实现前端与后端的顺畅交互。 * **Laravel 开发实践：** * 使用 Laravel Breeze 创建账户和登录认证功能。 * 利用 Console 工具调试 Laravel 控制器返回的数据。 * 学习如何在 Laravel 中创建表和插入虚拟数据。 * 掌握 Laravel Request 的使用以实现注册时的输入验证。 * 学习如何在控制器端进行数据搜索。 * 理解 Laravel 控制器与 Vue/React 之间的数据交换，实现注册、编辑、删除等操作。 * **JavaScript 前端实践：** * 使用 Vue.js 和 React 构建基本的 CRUD 应用。 * 学习如何从选择框中选择商品，实现无页面跳转的商品信息显示。 * 掌握从字符串搜索客户和商品的方法。 * 学习如何输出和显示多表关联数据。 * 了解如何在选择框中渲染客户表数据。 * 学习如何在 Vue/React 中处理获取到的数据，包括显示、验证和分页。 * 理解 React 的 Interface 概念。 * **部署与发布：** 讲解如何在 Xserver 等レンタルサーバー上部署和发布 Web 应用。 * **实用代码资源：** 所有必要的代码和命令都将提供在每个讲座的资源部分，方便学员复制代码粘贴使用。 **课程时长：** 约 4.5 小时。尽管时长不长，但足以让学员在周末两天内完成一个完整的 Web 应用开发。 **DEMO 链接：** `web-web.work/react1/` (请注意替换 URL 中的特定字符) **DEMO 登录信息：** * **ID:** `test@web-web.work` * **Password:** `testtest`
顧客からのオーダー情報を登録・更新するWEBアプリケーションを作成します。フロントにVUEと REACT、バックエンドにLaravelをInertia経由で違和感なく開発する方法を学ぶことができます。単純なCRUD（Create, Read, Update, Delete）を超えた機能を提供するアプリを提供します。前半はVUEで作成します。後半 ほぼ同じアプリをREACTで作成します。作成したWEBアプリをレンタルサーバーXserverで公開デプロイする方法を説明します。撮影時はLaravel11でしたが、laravel12にも対応しています。web-web．work／react1／ こちらでデモをXサーバーで公開しています。 左のURLのドット、スラッシュを打ち直してブラウザでご確認ください。id: test@web-web.work Password: testtestでご確いただけます。1. ユーザー体験の向上単なるデータの追加や削除にとどまらず、ユーザーのニーズに応じた高度な操作が可能になります。例えば、検索機能やリアルタイムでのデータ更新により、ユーザーはより直感的に操作でき、スムーズな体験が提供されます。2. 効率的なデータ管理単純なCRUD操作ではデータの基本的な管理にとどまりますが、高度な機能により、データのフィルタリングや詳細情報の表示、インタラクティブな操作が可能になります。これにより、データの利用効率が大幅に向上します。3. 柔軟な機能の提供単なるデータの表示や変更だけでなく、検索やモーダルウィンドウなどの追加機能を組み込むことで、ユーザーの様々な要望に応えられる柔軟なシステムが構築できます。これにより、複雑な要件にも対応できます。4. 直感的な操作性ユーザーはページ遷移や複雑な操作なしで、必要な情報に迅速にアクセスできるため、操作が直感的で使いやすくなります。これにより、学習コストが低く、ユーザーの満足度が向上します。8. ビジネスニーズへの適応インボイスに対応した請求書を発行します。カリキュラムの時間は合4.5時間と短いように思えますが、土日の二日間でしっかりWEBアプリが作成できるようになります。また、コードやコマンドは 各レクチャーのリソースにおいておりますので、どんどんコピーアンドペーストをしてください。商品情報には、商品名だけではなく、価格、コード、税率が含まれます。オーダー情報には、顧客、商品１～３が含まれます。ピュアなLaravelでは困難な、ページ遷移なしで商品情報を出力したり、モーダルウインドウで検索して、検索結果から該当する商品を選択するとそれが反映されるなどVueJSらしい処理を加えています。詳細画面では金額の計算や消費税の計算をコントローラーで行い、VUEファイルに渡します。通常税率、軽減税率の区分毎に集計しますので、インボイスにも対応します。詳細画面から請求書としてPDFファイルを出力することができます。請求書には、軽減税率対応品は※印が付きます。Vue.jsとREACTを用いて表示・登録・編集・削除する基本的なCRUDアプリを構築できる。選択ボックスで商品を選択すると、商品詳細情報（コード、価格、税率）をページ遷移無しにブラウザに表示する方法が分かる。顧客や商品を文字列から検索する方法が学べる。複数のテーブルをリレーションしたデータの出力・表示方法が分かる。顧客選択ボックスに顧客テーブルをセレクトボックスに展開する方法が分かる。登録時の誤入力を防止するバリデーションが学べる。バリデーションを実現するためにLaravelのRequestの使い方が分かる。一覧表示のページングが学べる。Laravelのコントローラー側で検索する方法とVue側で検索する方が学べる。Vue.js、ReactとLaravelをInertia経由で操作する方法を学べる。Laravel Breezeでアカウントの作成、ログイン認証機能を作れる。consoleを有効に使ってLaravelのコントローラーから返却されるデータの確認ができる。Vue.js、Reactで取得したデータの表示方法、バリデーション、ページングへの活用方法が分かる。Laravelでのテーブルの作成方法、ダミーデータの挿入方法が分かる。Vue.js、ReactでLaravelにアクセスして、登録・編集・削除処理ができるようになる。ReactのInterfaceの概念が理解できるようになる。
