آموزش برنامه های Fullstack را با VueJS3 Springboot3 Bootstrap5 بسازید

سرفصل ها و درس ها

مقدمه، نصب و راه اندازی Introduction, Installation and Setup

• معرفی دوره Course Introduction

• درباره مربی شما About your Instructor

• نصب Nodejs و VS Code Editor Installing Nodejs and VS Code Editor

• در حال نصب Vue CLI Installing Vue CLI

• ایجاد برنامه جدید VueJS-3 Creating new VueJS-3 app

• برنامه را اجرا کنید و از طریق مرورگر به آن دسترسی پیدا کنید Run and access the app via browser

• نصب وابستگی های npm Installing the npm dependencies

• نصب جاوا و IDE Installing Java and IDE

• نصب ابزار Postman Tool Installing Postman Tool

• نصب سرور پایگاه داده MySQL Installing MySQL Database Server

• ایجاد پروژه SpringBoot با وابستگی های مورد نیاز Creating SpringBoot project with required dependencies

در حال توسعه REST API مبتنی بر Springboot 3 Developing Springboot 3 based REST API

• وارد کردن پروژه به IDE و تنظیم JDK Importing Project to IDE and Setting JDK

• افزودن پیکربندی JPA Database H2 Spring Data Adding H2 Database Spring Data JPA configuration

• ایجاد کلاس JPA Entity با فیلدهای مختلف Creating the JPA Entity class with different fields

• ایجاد کلاس DTO برای لایه ارائه Creating the DTO class for presentation layer

• معماری 7.0 لایه و بسته های مختلف 7.0-Layered architecture and various packages

• ایجاد رابط مخزن Creating the Repository Interface

• ایجاد کلاس کنترلر Creating Controller class

• در حال توسعه POST API Endpoint Developing POST API Endpoint

• در حال توسعه نقطه پایانی GET All API Developing the GET All API endpoint

• در حال توسعه GET Detail API Endpoint Developing GET Detail API Endpoint

• در حال توسعه UPDATE API Endpoint Developing UPDATE API Endpoint

• در حال توسعه DELETE API و PathVariable در مقابل RequestParam Developing DELETE API and PathVariable VS RequestParam

• پس از حذف، 204 را به عنوان کد وضعیت برگردانید Return 204 as status code after deletion

• در حال توسعه PATCH API Endpoint Developing PATCH API Endpoint

• اعلان روش های چکیده لایه سرویس Declaring the Service Layer Abstract Methods

• افزودن متدهای Service Impl و ادغام با کنترلر Adding Service Impl methods and Integration with Controller

• ذخیره داده ها در پایگاه داده با استفاده از مخزن Saving the Data into the Database using Repository

• دریافت تمام داده ها از پایگاه داده با استفاده از مخزن Getting All Data From the Database using Repository

• دریافت جزئیات از پایگاه داده با استفاده از مخزن Get Detail from Database using Repository

• به روز رسانی کامل در پایگاه داده با استفاده از مخزن Full Update in Database using Repository

• به روز رسانی جزئی در پایگاه داده با استفاده از مخزن Partial Update in Database using Repository

• با استفاده از Repository داده ها را از پایگاه داده حذف کنید Delete data from Database using Repository

• عملکرد جستجو را از پایان به انتها اجرا کنید Implement Search functionality End to End

• با ابزار POSTMAN، CREATE و GET ALL API را آزمایش کنید Test CREATE and GET ALL API with POSTMAN Tool

• تنظیم متغیر Postman و تست GET Detail API Setting Postman Variable and Testing GET Detail API

• تست API جستجو Testing Search API

• آزمایش به‌روزرسانی کامل، به‌روزرسانی جزئی و حذف API Testing Full Update, Partial Update and Delete API

• بهبود کد برای جلوگیری از بازگشت پاسخ پوچ Code Improvement to avoid returning null response

• ایجاد مبدل برای قابل استفاده مجدد کد Creating Converter to make code reusable

• تست عملکرد کامل Testing the complete functionality

• ایجاد پایگاه داده در MySQL DB Server Create Database on MySQL DB Server

• نمایه ها در Springboot، تنظیمات MySQL DB Profile Profiles in Springboot, Setup MySQL DB Profile

• مفهوم نمایه بهار Concept of Spring Profile

• تست همه API ها با پایگاه داده MySQL Testing All APIs with MySQL Database

• فعال کردن CORS Enabling CORS

توسعه Frontend مبتنی بر VueJS-3 و ادغام با Springboot REST API Developing the VueJS-3 based Frontend & Integrating with Springboot REST API

• Vue JS جریان برنامه و ساختار پوشه را درک می کند Vue JS understanding app flow and folder structure

• درک جزئیات یک جزء Vue و نصب پسوند کد Vue VS Understanding details of a Vue component and installing Vue VS code extension

• ایجاد فایل env برای ذخیره تنظیمات Creating env file for storing configuration

• ایجاد تمام اجزای Vue Creating all the Vue Components

• به روز رسانی main.js با پیکربندی سطح برنامه Updating main.js with app level configuration

• اضافه کردن مسیریابی به برنامه ما Adding routing to our app

• در حال به روز رسانی جزء App.vue Updating App.vue component

• توسعه یک Layout Container قابل استفاده مجدد Developing a reusable Layout Container

• افزودن کد اسکلت به تمام صفحات Adding Skeleton Code to all the pages

• صفحه نمای کلی موارد یک ظاهر طراحی شده Styling Items Overview Page

• برقراری تماس GET API برای واکشی همه موارد Making GET API call to fetch all items

• اشکال زدایی و حل مشکل url پایه در axios Debugging and solving the base url issue in axios

• حلقه زدن همه موارد در قالب Vue Looping All Items in Vue Template

• برقراری تماس Delete API با پیام هشدار برای سناریوهای مختلف Making Delete API call with Alert message for different scenarios

• در حال به روز رسانی الگو برای اضافه کردن دکمه حذف و آزمایش عملکرد حذف Updating template to add delete button and test the delete functionality

• الگو را با نشانه گذاری برای قابلیت ویرایش و جزئیات مورد به روز کنید Update template with markup for Edit and Detail item functionality

• کار بر روی الگوی صفحه جزئیات مورد Working on template of item detail page

• برقراری تماس GET API برای واکشی جزئیات مورد Making GET API call to fetch Item Detail

• نگاشت پاسخ API به فیلدهای داده جزء Mapping the API response to data fields of the component

• کار بر روی قالب Create Item Working on the Create Item template

• اجرای فراخوانی POST API برای ایجاد آیتم جدید و آزمایش عملکرد Implementing POST API call to create new item and testing the functionality

• اجرای فراخوانی PUT API برای به روز رسانی مورد و آزمایش عملکرد Implementing PUT API call to update item and testing the functionality

کد منبع Source code

• پایه کد Code base