Trong 8 bài đầu tiên, chúng ta đã học JavaScript hiện đại và cách sử dụng JavaScript để giao tiếp với Laravel REST API.
Bây giờ chúng ta bắt đầu một công nghệ mới: Vue.js.
Sau bài học này, bạn sẽ hiểu:
Vue.js là gì?
Tại sao cần Vue khi đã có JavaScript?
Vue giải quyết những vấn đề nào?
Vue hoạt động như thế nào?
Component trong Vue là gì?
Vue khác JavaScript thuần và jQuery như thế nào?
Khi nào nên sử dụng Vue trong Laravel?
Ở các bài trước, chúng ta đã học:
Bài 05: Promise & Async/Await.
Bài 06: Fetch API.
Bài 07: Xử lý JSON & HTTP.
Trong bài 08, chúng ta sẽ kết hợp tất cả kiến thức trên để xây dựng một ứng dụng JavaScript giao tiếp trực tiếp với Laravel REST API.
Sau bài này, bạn có thể:
Gọi API Laravel bằng JavaScript.
Lấy dữ liệu từ Laravel và hiển thị lên giao diện.
Gửi dữ liệu bằng phương thức POST.
Cập nhật dữ liệu bằng PUT/PATCH.
Xóa dữ liệu bằng DELETE.
Xử lý lỗi HTTP và JSON.
Xây dựng một module JavaScript chuyên dùng để gọi API.
Sau bài học này, bạn sẽ hiểu cách JavaScript trao đổi dữ liệu với Laravel thông qua JSON và HTTP, nền tảng quan trọng để xây dựng ứng dụng Vue + Laravel REST API.
Bạn sẽ học được:
JSON là gì và tại sao frontend cần JSON?
Chuyển đổi dữ liệu giữa JSON và JavaScript.
HTTP Request và HTTP Response hoạt động như thế nào?
Các HTTP Method: GET, POST, PUT, PATCH, DELETE.
Các HTTP Status Code phổ biến.
Xử lý lỗi khi gọi API.
Thực hành gửi và nhận dữ liệu JSON bằng fetch().
Chuẩn bị cho Bài 08: JavaScript gọi Laravel REST API.
Trong các bài trước, chúng ta đã học Promise và Async/Await.
Bây giờ, chúng ta sẽ sử dụng những kiến thức đó để giao tiếp với máy chủ thông qua Fetch API.
fetch() là API có sẵn trong trình duyệt, cho phép JavaScript gửi HTTP request đến máy chủ và nhận dữ liệu trả về.
Ví dụ, 01 website có thể sử dụng Fetch API để:
Lấy danh sách bài viết từ Laravel.
Tìm kiếm bài viết mà không cần tải lại trang.
Gửi dữ liệu từ biểu mẫu đăng ký.
Lấy thông tin người dùng từ REST API.
Thêm, sửa, xóa dữ liệu thông qua API.
Hãy hình dung quy trình như sau:
Frontend — JavaScript
Gửi request bằng fetch()
Backend — Laravel 13
Xử lý request, truy vấn database
Database
Trả dữ liệu cho Laravel
Laravel trả response → JavaScript nhận dữ liệu → giao diện hiển thị kết quả.
Lưu ý: Fetch API không kết nối trực tiếp đến database. Nó giao tiếp với máy chủ thông qua HTTP.
Trong JavaScript, có những công việc hoàn thành gần như ngay lập tức:
const name = 'Doraemon';
console.log(name);Nhưng cũng có những công việc cần thời gian chờ:
Gọi Laravel REST API.
Tải danh sách bài viết từ Database thông qua API.
Đọc dữ liệu từ máy chủ.
Tải hình ảnh.
Gửi Form đăng nhập.
Chờ kết quả từ một dịch vụ bên ngoài.
Ví dụ, khi ứng dụng cần lấy danh sách bài viết từ Laravel:
JavaScript
│
│ Gửi yêu cầu
▼
Laravel REST API
│
▼
Controller
│
▼
Database
│
│ Trả kết quả
▼
JavaScript nhận dữ liệuQuá trình này có thể mất một khoảng thời gian.
JavaScript cần cơ chế xử lý công việc bất đồng bộ mà không phải chặn toàn bộ hoạt động của trình duyệt trong lúc chờ.
Hai kiến thức quan trọng chúng ta cần học là:
Promise
async/await
Trong các bài trước, chúng ta thường viết JavaScript trong một file:
resources/
└── js/
└── app.jsCách này phù hợp với những ví dụ đơn giản.
Nhưng hãy tưởng tượng ứng dụng Laravel của chúng ta có các chức năng:
Quản lý bài viết.
Quản lý danh mục.
Tìm kiếm.
Đăng nhập.
Hiển thị thông báo.
Gọi Laravel REST API.
Nếu tất cả code đều nằm trong app.js, file này sẽ ngày càng dài và khó bảo trì.
Module cho phép chúng ta chia code thành nhiều file, mỗi file đảm nhiệm một nhiệm vụ riêng.
Ví dụ:
resources/
└── js/
├── app.js
├── modules/
│ ├── posts.js
│ ├── users.js
│ ├── search.js
│ └── notification.js
└── services/
└── api.jsMỗi file có thể xuất những thành phần cần sử dụng và nhập các thành phần từ file khác.
Hai từ khóa quan trọng nhất là:
export: xuất dữ liệu, hàm hoặc class để module khác sử dụng.
import: nhập dữ liệu, hàm hoặc class từ module khác.
Trong ứng dụng web, dữ liệu thường được tổ chức dưới hai dạng phổ biến: Array và Object.
Array dùng để lưu một danh sách dữ liệu.
const languages = [
'PHP',
'JavaScript',
'Python',
'Java'
];
console.log(languages[0]);
console.log(languages[1]);Kết quả:
PHP
JavaScriptArray sử dụng chỉ số bắt đầu từ 0.
Object dùng để lưu dữ liệu theo cặp khóa và giá trị.
const user = {
id: 1,
name: 'Pi',
email: 'pi@example.com',
role: 'user'
};
console.log(user.name);
console.log(user.email);Kết quả:
Pi
pi@example.comTrong thực tế, một danh sách thường chứa nhiều Object:
const users = [
{ id: 1, name: 'Pi', role: 'admin' },
{ id: 2, name: 'Hùng', role: 'user' },
{ id: 3, name: 'Chi', role: 'user' }
];Đây là cấu trúc dữ liệu rất phổ biến khi Laravel trả về danh sách người dùng hoặc bài viết dưới dạng JSON.
ES6 (ECMAScript 2015) là phiên bản lớn của JavaScript ra mắt năm 2015, bổ sung nhiều cú pháp và tính năng giúp code ngắn gọn, dễ đọc và dễ bảo trì hơn.
ES6+ là cách gọi chung các tính năng ES6 và những phiên bản JavaScript hiện đại ra đời sau đó.
Trong khóa học Laravel 13, chúng ta sẽ sử dụng ES6+ để:
Viết JavaScript trong ứng dụng Laravel.
Xử lý dữ liệu từ REST API.
Xây dựng giao diện bằng Vue.
Làm việc với React.
Tổ chức code thành các module độc lập.
JavaScript → Vue → Vue + Laravel API → React → Livewire
Bài 01 — JavaScript hiện đại trong ứng dụng Laravel
Bài 04 — Module & Import / Export
Bài 05 — Promise & Async/Await
Bài 08 — JavaScript gọi Laravel REST API
Bài 09 — Vue là gì?
Bài 10 — Cài đặt Vue + Vite
Bài 11 — Component
Bài 12 — Template & Data Binding
Bài 13 — Event
Bài 14 — Conditional & List Rendering
Bài 15 — Form
Bài 16 — Computed & Watch
Bài 17 — Props & Emits
Bài 18 — Composition API
Bài 19 — ref() & reactive()
Bài 20 — Composables
Bài 21 — Kết nối Vue với Laravel API
Bài 22 — Hiển thị Posts
Bài 23 — Post Detail
Bài 24 — Category & Filter
Bài 25 — Search & Pagination
Bài 26 — CRUD với Vue
Bài 27 — Upload Image
Bài 28 — Login với Laravel Sanctum
Bài 29 — Register & Logout
Bài 30 — Protected Page
Bài 31 — User Dashboard
Bài 32 — Admin Dashboard
Bài 33 — Vue Router
Bài 34 — Dynamic Route & Navigation Guard
Bài 35 — Pinia
Bài 36 — Authentication State
Bài 37 — Axios & Interceptor
Bài 38 — Khởi tạo Blog SPA
Bài 39 — Blog Homepage
Bài 40 — Blog Listing & Detail
Bài 41 — Category & Search
Bài 42 — Authentication
Bài 43 — User Dashboard
Bài 44 — Admin Dashboard
Bài 45 — CRUD Posts
Bài 46 — Hoàn thiện Blog SPA
Bài 47 — React cơ bản
JSX
Component
Props
State
useState
useEffect
Bài 48 — React + Laravel API
Bài 49 — Livewire cơ bản
Component
Data Binding
Event
Form
Validation
Bài 50 — Khi nào dùng Blade, Livewire, Vue hay React?
KHÓA LARAVEL 13
│
├── REST API ✓
│
└── Sanctum ✓
│
▼
KHÓA FRONTEND 50 BÀI
│
┌──────┴──────┐
↓ ↓
JavaScript Vue
│ │
└──────┬──────┘
↓
Laravel REST API
│
↓
Blog SPA
│
┌──────┼──────┐
↓ ↓ ↓
Pinia React LivewireTrong các bài trước của khóa Laravel 13, chúng ta đã làm việc chủ yếu với:
PHP
Laravel
Blade
Database
Eloquent
REST API
Laravel Sanctum
Những thành phần này chủ yếu xử lý phía Server.
Nhưng một ứng dụng web hiện đại không chỉ có Server.
Khi người dùng:
bấm nút,
mở Modal,
gửi Form,
tìm kiếm,
lọc dữ liệu,
upload ảnh,
tải dữ liệu không cần reload trang,
cập nhật giao diện ngay lập tức,
thì chúng ta cần đến JavaScript.
Vì vậy, trước khi học Vue, React hoặc các Frontend Framework khác, chúng ta cần nắm được JavaScript hiện đại.
