Kiến trúc Hệ thống (System Architecture)#
Dự án landing-page-builder hiện tại là phần Frontend (Client-side) của hệ thống quản trị, được xây dựng theo mô hình Single Page Application (SPA).1. Công nghệ Frontend (Frontend Stack)#
Core Framework: Vue 3 (Composition API / <script setup>).
Build Tool: Vite (Cung cấp Dev Server siêu nhanh và Build optimized).
Ngôn ngữ: TypeScript (Mang lại type-safety chặt chẽ cho toàn bộ dự án).
State Management: Pinia (kết hợp pinia-plugin-persistedstate để lưu trạng thái vào LocalStorage/SessionStorage).
Routing: Vue Router (Quản lý các trang nội bộ của admin).
2. Giao diện & Trải nghiệm (UI/UX)#
UI Library: Naive UI (Thư viện component mạnh mẽ, dễ custom cho Vue 3).
CSS Framework: Tailwind CSS, SCSS/SASS (Xử lý layout và utility classes).
Editor: CKEditor 5 (soạn thảo bài viết, html), CodeMirror (chỉnh sửa code trực tiếp hoặc template raw code).
3. Giao tiếp Dữ liệu (Network & API Logic)#
HTTP Client: Axios (Gọi API tới hệ thống Backend Server).
Các API endpoints được module hóa rất chặt trong thư mục src/services/api/ (chia làm 30 file khác nhau tương ứng với từng Micro-service hoặc Domain Driven trong backend).
Hệ thống này gọi tới một Backend (khả năng cao là Node.js/NestJS hoặc Golang/Python, theo các file api client được định nghĩa) để lấy tất cả dữ liệu. Theo lẽ thường, quá trình xử lý nặng (tạo landing page, submit Google API, chạy Job xử lý keyword) sẽ diễn ra trên Backend và trả kết quả về thông qua REST API.
4. Kiến trúc Tổng thể (High-level Architecture)#
Mặc dù source code này chỉ làm nhiệm vụ giao tiếp Frontend, nhưng qua cấu trúc API, sơ đồ của toàn bộ hệ thống lớn (System Architecture) được phác thảo gồm:Admin Dashboard (Vùng dự án này): Nơi duy nhất tương tác với người quản trị (Manage, View Report, Trigger Job).
Backend / Worker: Hệ cơ sở hạ tầng chạy ngầm quản lý tiến trình của keywords, job status, và tương tác với mạng lưới server / proxy từ xa và xử lý redirect traffic.
Proxy/Server Provider: Mạng botnet / server vệ tinh để xử lý index hoặc cấp phát landing page.
Final Target: Hệ thống các tên miền cuối cùng đón traffic được redirect trỏ về.
Ngày cập nhật 2026-03-31 10:14:55
