آموزش ساخت اپلیکیشن فول‌استک واقعی با Vue 3 و دات‌نت 10 [2025] - آخرین آپدیت

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

مقدمه Introduction

• خوش آمدید Welcome

• Vue چیست؟ What is VUE?

• دمو – پروژه نهایی Demo - Final Project

• پیش نمایش زنده – پروژه نهایی Live Preview - Final Project

• بازخورد دوره Course Feedback

• کتاب الکترونیکی Vue Vue E-Book

• دو روش برای گذراندن دوره 2 Ways to take the course

• محتوای دوره – قطعات Course Content - Snippets

2 مبانی Vue 2 Vue Fundamentals

• ایجاد پروژه Create Project

• سلام Vue Hello Vue

• بازگرداندن چند ویژگی Returning multiple properties

• شیء و آرایه‌ها Object and Arrays

• جاوا اسکریپت و Vue Javascript and Vue

• توابع در Vue Functions in Vue

• تمرین ۱ – تابع Assignment 1 - Function

• حل تمرین ۱ – تابع Assignment 1 Solution - Function

3 واکنش‌پذیری در Vue 3 Reactivity in Vue

• Ref Ref

• Timeout در تابع Timeout in Function

• Ref روی شیء Ref on Object

• واکنش‌پذیر در Vue Reactive in Vue

• واکنش‌پذیر و غیر واکنش‌پذیر در Vue Reactive and non reactivity in vue

4 دستورات در Vue 4 Directives in Vue

• v-html v-html

• دستور v-once v-once directive

• دستور v-bind v-bind directive

• پاک‌سازی cleanup

• دستور v-show v-show directive

• دستور v-if v-if directive

• دستور v-else و v-else-if v-else and v-else-if directive

• دستور v-for v-for directive

• تکرار روی آرایه اشیاء Iterate over array of objects

• مقدار کلید در یک شیء Key value in an object

• v-once در حلقه v-once in loop

• کلید در v-for key in v-for

• پاک کردن پروژه clean the project

سبک‌ها در Vue Styles in Vue

• پیوند سبک‌ها در Vue Binding styles in vue

• پیوندهای سبک پویا Dynamic style bindings

• پیوند کلاس‌ها در Vue Class bindings in vue

• پیوند کلاس‌ها بخش ۲ Class bindings part 2

• آرایه کلاس‌ها و اشیاء سبک سفارشی Array of classes and custom style objects

• علامت اختصاری v-bind v-bind short notation

• پاک‌سازی Cleanup

رویدادها در Vue Events in Vue

• رویداد کلیک دکمه Button on click event

• ارسال پارامتر به توابع Passing parameters to functions

• شیء رویداد Event object

• اصلاح‌کننده‌های رویداد Event modifiers

• اصلاح‌کننده‌های کلید Key modifiers

• پاک‌سازی Cleanup

7 اتصال داده 7 Data binding

• اتصال داده دو طرفه Two way data binding

• اصلاح‌کننده‌های مدل Model modifiers

• ویژگی‌های محاسبه‌شده Computed Properties

• مقدار قبلی ویژگی محاسبه‌شده Previous value of computed property

• ناظران در Vue Watchers in vue

• ناظران در ویژگی واکنش‌پذیر Watchers in reactive property

• MovieOPedia – تنظیمات پایه MovieOPedia - Base Setup

• تمرین – MovieOPedia – رویدادهای دکمه Assignment - MovieOPedia - Button events

• حل تمرین – MovieOPedia – رویدادهای دکمه Assignment Solution - MovieOPedia - Button events

• تمرین – MovieOPedia – ناظر و ویژگی محاسبه‌شده Assignment - MovieOPedia - Watcher and Computed Prop

• حل تمرین – MovieOPedia – ناظر و ویژگی محاسبه‌شده Assignment Solution - MovieOPedia - Watcher and Computed Prop\

• ناظران می‌توانند ناهمگام باشند Watchers can be async

• راه میانبر برای v-on Shortcut for v-on

8 فرم‌ها 8 Forms

• تنظیمات فرم‌ها Forms Setup

• جلوگیری از ارسال در فرم‌ها Prevent submit in forms

• اصلاح‌کننده‌های مدل Model modifiers

• دکمه‌های رادیویی Radio Buttons

• منوی کشویی در Vue Dropdown in Vue

• اعتبارسنجی هنگام از دست رفتن فوکوس Validate on blur

• اعتبارسنجی فرم‌ها Forms validation

9 ایجاد پروژه 9 Create Project

• ایجاد پروژه Vue با استفاده از Vite Create vue project using vite

• ابزارهای توسعه در Vue Dev Tools in Vue

• حذف تمام فایل‌های Vue از پروژه Remove all vue files from project

• سلام دنیا از Vue Hello World from vue

• Vue در عمل Vue in action

10 کامپوننت‌ها 10 Components

• ایجاد اولین کامپوننت Create first component

• ایجاد کامپوننت دیگر Create another component

• تنظیمات تمیزتر Cleaner setup

• کامپوننت‌های محلی در مقابل جهانی Local vs global components

• تمرین – کامپوننت محلی Assignment - local component

• حل تمرین – کامپوننت محلی Assignment Solution - local component

• افزودن Bootstrap Add Bootstrap

11 ارتباط کامپوننت‌ها 11 Component communication

• ارسال props Passing props

• props مقید Binded props

• اعتبارسنجی props Validating props

• props و متغیر محلی Props and local variable

• لیست مخاطبین List of contacts

• ارسال پیوند prop پویا Passing dynamic prop binding

• تغییر پویا کلاس و متن دکمه Dynamically change class and button text

• نکته اضافی Extra Tip

• Emits در عمل Emits in Action

• ارسال پارامتر در emits Passing parameter in emits

• ارسال آرایه در emit Pass array in emit

• نکته اضافی – گرفتن مقدار از کامپوننت والد Extra Tip - Get value from parent component

• ارسال اشیاء در Emit Passing objects in Emit

• emit درون خطی Inline emit

12 Provide و Inject 12 Provide and Inject

• افزودن کامپوننت Add New Contact Add New Contact component

• تمرین – Emit در Vue Assignment - Emit in Vue

• حل تمرین – Emits در Vue Assignment Solution - Emits in Vue

• تولیدکننده عدد خوش شانس Lucky Number Generator

• ارسال props به کامپوننت نوه Passing props down to grandchild component

• مشکل با Props Issue with Props

• Provide و Inject Provide and Inject

• ارسال متد به عنوان props Passing method as props

13 اسلات‌ها و چرخه حیات 13 Slots and Lifecycle

• پاک‌سازی و Lucky Number V2 Cleanup and Lucky Number V2

• کامپوننت‌های پویا Dynamic Components

• نکته اضافی ExtraTIP

• Keep Alive Keep Alive

• پاک‌سازی Cleanup

• اسلات‌ها Slots

• چه کسی مالک داده‌های اسلات است؟ Who owns the slots data

• اسلات‌های نامگذاری‌شده Named Slots

• سبک‌های محدوده دار Scoped Styles

• پاک‌سازی چرخه حیات Lifecycle cleanup

• دموی چرخه حیات Lifecycle Demo

• پاک کردن پروژه Clean Up the project

• Composible در عمل Composible in Action

• Composible در چند کامپوننت Composible in multiple components

• Props در Composibles Props in Composibles

14 مسیریابی 14 Routing

• ایجاد پروژه Create Project

• افزودن Vue Router Add Vue Router

• ایجاد کامپوننت‌ها Create Components

• ایجاد Router در Vue Create Router in Vue

• مسیریابی در عمل Routing in action

• پیکربندی Vite Vite Configuration

• افزودن هدر Add header

• Router Link Router Link

• پیوند مسیر پویا Dynamic Route Binding

• پارامترهای چندگانه در URL Multiple parameters in url

• مسیر با مقادیر پویا Route with dynamic values

• مسیرهای نامگذاری‌شده Named routes

• استفاده از مسیرهای نامگذاری‌شده Using named routes

• URL تغییر مسیر Redirect Url

• یافت نشد Not Found

• رفتن از اسکریپت به کامپوننت دیگر Navigate from script to another component

• دکمه بازگشت Back button

• محافظ مسیر جهانی Global navigation guard

• محافظت از صفحات در برابر دسترسی غیرمجاز Protect pages from unauthenticated access

• کامپوننت No access در عمل No access component in action

• کلاس فعال لینک Active class link

15 درخواست‌های API 15 API Requests

• ایجاد پروژه و پاک‌سازی Create Project and cleanup

• Axios در عمل Axios in action

• Fetch در عمل Fetch in Action

• سرور Json در حال اجرا Json server up and running

• درخواست Get روی سرور Json Get request on json server

• کد سازمان‌یافته Organized Code

• Loader در عمل Loader in action

• کامپوننت Loader Loader Component

16 Pinia 16 Pinia

• ایجاد پروژه Create Project

• مسیریابی در عمل Routing in action

• افزودن Pinia به برنامه Add Pinia to App

• ایجاد فروشگاه Pinia Create Pinia store

• رابط کاربری برای صفحه اصلی UI for Home Page

• استفاده از فروشگاه در یک کامپوننت Use store in a component

• به‌روزرسانی وضعیت در Pinia Updating State in Pinia

• Getters در Pinia و یک مشکل Getters in Pinia and a problem

• Actions در Pinia Actions in Pinia

• بازنشانی بازی Reset Game

• Pinia در سراسر کامپوننت‌ها Pinia across components

• سبک Composition API Composition API Style

تنظیمات API API setup

• ایجاد پروژه Create Project

• بسته‌های Nuget Nuget Packages

• افزودن Scalar Add Scalar

• رشته اتصال و ApplicationDbContext Connection String and ApplicationDbContext

• ایجاد جداول Identity Create Identity Tables

• افزودن نام به جدول کاربر Add Name to User Table

• پاسخ API Api Response

• مدل آیتم منو Menu Item Model

• کاشت آیتم‌های منو Seed Menu Items

• دریافت همه آیتم‌های منو Get All Menu Items

• دریافت آیتم منو بر اساس شناسه Get Menu Item by Id

• DTOs برای ایجاد و به‌روزرسانی آیتم منو DTOs for Create and Update Menu Item

• بخش ۲ DTOs به‌روزرسانی part 2 DTOs Update

• بخش ۳ به‌روزرسانی آیتم منو Part 3 Update Menu Item

• ایجاد آیتم منو Create Menu Item

• ایجاد در عمل Create In Action

• به‌روزرسانی آیتم منو Update Menu Item

• حذف آیتم منو Delete Menu Item

• افزودن تصویر برای آیتم منو Add Image for Menu Item

احراز هویت و مجوز در API Authentication and Authorization in API

• افزودن کنترلر تست احراز هویت Add Auth Test Controller

• پیکربندی احراز هویت در API Configure Authentication in API

• افزودن Document Transformer Add Document Transformer

• دموی احراز هویت Scalar Scalar Auth Demo

• DTO ورود و ثبت‌نام Login and Register DTO

• نقطه پایانی ثبت‌نام Register Endpoint

• نقش‌ها در عمل Roles in Action

• نقطه پایانی ورود Login Endpoint

• مجوز در عمل Authorization in Action

سفارش در API Order in API

• جدول سرصفحه و جزئیات سفارش Order Header and Details Table

• DTO سرصفحه و جزئیات سفارش Order Header and Details DTO

• دریافت سفارش‌ها Get Orders

• ایجاد سفارش Create Order

• دمو – ایجاد سفارش Demo - Create Order

• به‌روزرسانی سفارش Update Order

• دمو – به‌روزرسانی سفارش Demo - Update Order

• افزودن فیلد امتیاز Add Rating Field

• به‌روزرسانی امتیاز Update Rating

• امتیاز در عمل Rating in Action

• امتیازدهی به هر آیتم منو Individual MenuItem Rating

• CORS و باگ کوچک Cors and Small Bug

تنظیمات پروژه Vue Vue Project Setup

• ایجاد پروژه Create Project

• پاک‌سازی پروژه Project CleanUp

• افزودن نماها در پروژه Add Views in Project

• تعریف مسیرها Define Routes

• پاورقی و Bootstrap Footer and Bootstrap

• هدر بخش ۱ Header Part 1

• هدر بخش ۲ Header Part 2

• فروشگاه تم Theme Store

• Pinia Persist Pinia Persist

آیتم‌های منو در Vue Menu Items in Vue

• ایجاد سرویس API Create API Service

• دریافت آیتم‌های منو Fetch Menu Items

• آرایه‌ها واکنش‌پذیر خواهند بود Arrays will be reactive

• الگوی لیست آیتم منو Menu Item List Template

• رابط کاربری پویا Dynamic UI

• الگوی ایجاد آیتم منو Create Menu Item Template

• شیء آیتم منو Menu Item Object

• دسته‌بندی‌ها در پروژه Categories in Project

• شیء آیتم منو و اعتبارسنجی Menu Item Obj and Validation

• تصویر آیتم منو Menu Item Image

• داده‌های فرم Form Data

• ایجاد آیتم منو Create Menu Item

• ویرایش آیتم منو بخش ۱ Edit Menu Item Part 1

• ویرایش آیتم منو بخش ۲ Edit Menu Item Part 2

• اصلاحات در جریان کار Modifications in Flow

• Sweetalert در پروژه Sweetalert in Project

• حذف آیتم منو بخش ۱ Delete Menu Item Part 1

• باگ حذف Delete Bug

• تمرین – باگ کوچک Assignment - Small Bug

صفحه اصلی Home Page

• الگوی صفحه اصلی Home Page Template

• دریافت آیتم‌های منو Fetch Menu Items

• نمایش داده‌ها در کامپوننت کارت آیتم منو Display data in Menu Item Card component

• گزینه‌های دسته Category Options

• فیلتر دسته در عمل Category filter in Action

• مرتب‌سازی در عمل Sorting in Action

• جستجو در عمل Search in Action

• مسائل کوچک Small issues

• Modal جزئیات Details Modal

• Modal و Emits Modal and Emits

• نمایش جزئیات Modal Display Modal Details

• تنظیمات فروشگاه سبد خرید Cart Store Setup

سبد خرید Shopping Cart

• افزودن آیتم‌ها به فروشگاه سبد خرید Add items to Cart Store

• تغییر وضعیت دکمه افزودن به سبد خرید Toggle add to cart button

• افزایش و کاهش مقدار فروشگاه سبد خرید Increment and decrement cart store quantity

• نمایش تعداد سبد خرید Display cart count

• الگوی سبد خرید Cart Template

• رابط کاربری سبد خرید Cart UI

• سبد خرید در عمل Shopping Cart in Action

• الگوی Modal ثبت سفارش Place Order Modal Template

• تغییر وضعیت Modal سفارش Toggle Order Modal

• Modal ثبت سفارش با تمام جزئیات Place Order Modal with all details

• اعتبارسنجی‌ها و ماندگاری سبد خرید Validations and Persist Cart

احراز هویت Authentication

• الگوهای ورود و ثبت‌نام Sign in and Sign Up Templates

• اعتبارسنجی‌های ثبت‌نام Sign Up Validations

• اعتبارسنجی‌های ورود Sign In Validations

• ثبت‌نام در سرویس احراز هویت Sign Up in Auth Service

• فروشگاه احراز هویت Auth Store

• ثبت‌نام در عمل Sign Up in Action

• ورود و دریافت توکن Sign in and get Token

• ورود – دمو Sign in - Demo

• کوکی‌های JS JS Cookies

• تغییر هدر Modify Header

• راه‌اندازی احراز هویت Initialize Authentication

• خروج در عمل Sign Out in Action

• محافظ‌های ناوبری Navigation Guards

• باگ کوچک Small Bug

ثبت سفارش Place Order

• ساخت Modal سفارش Build Order Modal

• سرویس سفارش Order Service

• ثبت سفارش Place Order

• الگوی لیست سفارش Order List Template

• لیست سفارش در عمل Order List in Action

مدیریت سفارش Order Management

• الگوی مدیریت سفارش Order Management Template

• پایه برای فیلتر و مرتب‌سازی Base for Filter and Sort

• فیلتر وضعیت در عمل Filter Status in Action

• جستجوی سفارش‌ها Search Orders

• مرتب‌سازی در عمل Sort in Action

• آیکون‌های مرتب‌سازی Sort Icons

• رنگ‌آمیزی وضعیت Status coloring

• صفحه‌بندی بخش ۱ Pagination Part 1

• صفحه‌بندی بخش دوم Pagination Part Second

• صفحه‌بندی بخش ۳ Pagination Part 3

• Modal برای جزئیات سفارش Modal for Order Details

• نمایش جزئیات سفارش Display Order Details

• وضعیت سفارش بخش ۱ Order Status Part 1

• به‌روزرسانی وضعیت بخش ۲ Update Status Part 2

• ارسال به‌روزرسانی وضعیت Emit Update Status

مجوز Authorization

• به‌روزرسانی‌های API برای مجوز API Updates for Authorization

• ارسال توکن به API Pass Token to API

• اصلاحات کوچک Small Fixes

• ارسال امتیاز در سرویس سفارش Submit Rating in Order Service

• الگوی امتیازدهی Rating Template

• امتیازدهی بخش ۱ Rating Part 1

• افزودن امتیاز به جدول Db Add Rating to Db Table

• نمایش امتیاز Display Rating

• امتیازدهی در عمل Ratings in Action

• فقط خواندنی در امتیازدهی Readonly in Rating

• نمایش امتیازها در صفحه اصلی Display Ratings on Home Page

• اصلاح کوچک امتیازها Small Fix to Ratings

• به‌روزرسانی‌های رابط کاربری برای ورود و ثبت‌نام UI Updates to Sign In and Sign Up

استقرار Deploymnent

• استقرار پایگاه داده SQL Deploy SQL Database

• استقرار API Deploy API

• استقرار برنامه Vue Vue App Deployment