آموزش Nuxt.js 4: ساخت اپلیکیشن‌های وب مدرن و فول‌استک - آخرین آپدیت

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

خوش‌آمدگویی! شروع کار با Nuxt.js Welcome! Let's Get Started with Nuxt.js

• خوش آمدید به دوره! چه چیزهایی یاد خواهید گرفت؟ Welcome to the Course! What You'll Learn?

• فایل‌های منبع Source Files

معرفی Nuxt.js Introduction to Nuxt.js

• راه‌اندازی پروژه Nuxt.js Setting Up a Nuxt.js Project

• مسیرهای استاتیک (Static Routes) Static Routes

• مسیرهای تو در تو (Nested Routes) Nested Routes

• مسیرهای پویا (Dynamic Routes) Dynamic Routes

• دسترسی به داده‌های URL پویا با پارامترهای مسیر Accessing Dynamic URL Data with Route Parameters

• مسیرهای Catch All Catch-All Routes

• مدیریت متادیتای صفحه با useHead Managing Page Metadata with useHead

• مدیریت متادیتای سئو با useSeoMeta Managing SEO Metadata with useSeoMeta

• پیکربندی متادیتای صفحه با definePageMeta Configuring Page Metadata with definePageMeta

• استفاده از لایوت‌ها و قالب‌های صفحه Using Layouts and Page Templates

• ناوبری صفحه و مسیریابی Page Navigation and Routing

• کار با کامپوننت‌ها Working with Components

• استفاده از CSS در Nuxt.js Using CSS in Nuxt.js

• ایجاد و استفاده از میان‌افزارهای جهانی (Global Middleware) Creating and Using Global Middleware

• استفاده از میان‌افزارهای نام‌گذاری شده و صفحه‌ای Using Named and Page Middleware

• کامپوزبل‌ها (Composables) Composables

• توابع کمکی (Utility Functions) Utility Functions

• پلاگین‌ها Plugins

• صفحات 404 سفارشی Custom 404 Pages

ساخت بک‌اند با Nuxt Server Building a Backend with Nuxt Server

• راه‌اندازی پروژه سرور و ساختار پوشه‌ها Server Project Setup and Folder Structure

• ساخت رابط کاربری صفحه اصلی با Bootstrap Building the Homepage UI with Bootstrap

• بررسی ساختار پروژه Exploring the Project Structure

• ایجاد یک Mock API با JSON Server Creating a Mock API with JSON Server

• نمایش داده‌های دانشجویان در صفحه اصلی Displaying Student Data on the Homepage

• معماری Nuxt Server و نحوه عملکرد آن Nuxt Server Architecture and How It Works

• ایجاد فرم ثبت‌نام دانشجو Creating a Student Registration Form

• افزودن دانشجوی جدید Adding a New Student

• ساختار مسیریابی و پارامترهای مسیر Routing Structure and Route Parameters

• کنترل دسترسی به صفحات با میان‌افزار Controlling Page Access with Middleware

• استفاده از پلاگین‌ها در پروژه Using Plugins in the Project

• استفاده از توابع کمکی در پروژه Using Utility Functions in the Project

• ایجاد صفحه جزئیات دانشجو Creating the Student Details Page

• به‌روزرسانی سوابق دانشجویان Updating Student Records

• حذف سوابق دانشجویان Deleting Student Records

احراز هویت و تعیین سطح دسترسی در Nuxt.js Authentication and Authorization in Nuxt.js

• معرفی پروژه احراز هویت Introduction to the Authentication Project

• ایجاد ساختار لایوت برای پروژه احراز هویت Creating the Layout Structure for the Authentication Project

• ساخت کامپوننت هدر Creating the Header Component

• ساخت صفحه ثبت‌نام (Sign Up) Creating the Sign Up Page

• اعتبارسنجی فرم در سمت کلاینت Client-Side Form Validation

• استفاده از لایوت‌های نام‌گذاری شده Using Named Layouts

• ایجاد کلاستر MongoDB Atlas و کاربر دیتابیس Creating a MongoDB Atlas Cluster and Database User

• اتصال پروژه Nuxt.js به MongoDB Connecting a Nuxt.js Project to MongoDB

• ایجاد مدل کاربر (User Model) Creating the User Model

• ذخیره کاربران در MongoDB Saving Users to MongoDB

• اعلان‌های Toast و ریدایرکت پس از ثبت‌نام موفق Toast Notifications and Redirecting After Successful Registration

• مدیریت درخواست‌های API با تابع کمکی Managing API Requests with a Utility Function

• پیاده‌سازی ورود کاربر (Sign In) Implementing User Sign In

• پیاده‌سازی اعتبارسنجی در سمت سرور Implementing Server-Side Validation

• پیاده‌سازی خروج کاربر (Sign Out) Implementing User Sign Out

پروژه نهایی Nuxt.js Nuxt.js Final Project

• معرفی پروژه نهایی Introduction to the Final Project

• ریدایرکت به صفحه ایجاد پست Redirecting to the Create Post Page

• طراحی صفحه ایجاد پست Designing the Create Post Page

• اعتبارسنجی سمت کلاینت برای فرم ایجاد پست Client-Side Validation for the Create Post Form

• ایجاد مدل پست و ذخیره داده‌ها در دیتابیس Creating the Post Model and Saving Data to the Database

• پیاده‌سازی اعتبارسنجی سمت سرور و نمایش پیام‌های خطا Implementing Server-Side Validation and Displaying Error Messages

• افزودن حالت Loading به دکمه ارسال Adding a Loading State to the Submit Button

• رندر پویا در صفحه اصلی بر اساس وضعیت نشست (Session) Dynamically Rendering the Homepage Based on Session State

• لیست کردن پست‌ها با درخواست GET Listing Posts with a GET Request

• دریافت پست‌ها و نمایش آن‌ها به صورت کارت در صفحه اصلی Fetching Posts and Displaying Them as Cards on the Homepage

• نمایش شرطی دکمه‌ها بر اساس وضعیت کاربر Conditionally Displaying Buttons Based on User State

• حذف پست‌ها با درخواست DELETE Deleting Posts with a DELETE Request

• حذف پست‌ها و به‌روزرسانی وضعیت اپلیکیشن Deleting Posts and Updating Application State

بونوس (هدیه) Bonus

• بونوس (هدیه) Bonus