1. Architecture
GrowthHack
  • Business Logic
  • Projects
    • ADMIN
      • Tổng quan ADMIN
      • Architecture
        • System architecture
        • Code structure
      • Deployment
        • Local
        • Staging
        • Product
      • Hướng Dẫn Sử Dụng
        • Tổng Quan Hệ Thống
        • TRANG CHỦ (DASHBOARD)
        • Tạo Trang HTML
        • Báo Cáo
          • Báo Cáo_Thứ Hạng
          • Báo Cáo_Volume
          • Báo cáo_Report Index
        • Từ Khóa
          • Từ Khóa_Từ Khóa
          • Từ Khóa_Thương Hiệu
          • Từ Khóa_Ngành
          • Từ Khóa_Kho Hình Ảnh
        • Quản Lý Trang
          • Quản Lý Trang_Quản lý trang mẫu
          • Quản Lý Trang_Trang Nguồn
          • Quản Lý Trang_Trang Đích
          • Quản Lý Trang_Tài Khoản Google
        • Tài Khoản
          • Tài Khoản_Tài Khoản
          • Tài Khoản_Hoạt Động
    • API
      • Tổng quan API - Business Logic
      • Architecture
        • System architecture
        • Database schema
        • Code structure
      • Deployment
        • Local
        • Staging
        • Product
      • API Interface
        • Auth
          • Login
          • Get Me
        • Domains
          • Get All Domains
          • Push Indexing
        • Keywords
          • Generate HTML Bulk
          • Import Keywords
  1. Architecture

Code structure

Cấu trúc Code (Code Structure)#

Dự án áp dụng cấu trúc thư mục tiêu chuẩn và quy chuẩn (Standard Vue 3 + Vite structure) với tính năng chia để trị (modularity) cao.

Chi tiết cấp thư mục gốc (Root Directory)#

/
├── public/                # Tài nguyên public tĩnh không qua build process (favicon, hình cứng)
├── src/                   # Source code chính của hệ thống Admin
├── .husky/                # Cấu hình git hooks (kiểm tra trước khi commit/push)
├── .eslintrc.cjs          # Cấu hình ESLint (kiểm tra lỗi code js/ts)
├── .prettierrc.json       # Cấu hình Prettier (format định dạng code)
├── vite.config.ts         # Cấu hình Vite build process và plugins
├── tailwind.config.ts     # Cấu hình TailwindCSS
├── package.json           # Danh sách dependencies và script commands
└── tsconfig.json          # Cấu hình TypeScript compiler

Khám phá lớp src/ (Lớp lõi)#

Cấu trúc trong src/ tuân thủ pattern phân tách lớp giao diện và lớp dữ liệu:
src/
├── App.vue                # Component gốc (Root Component)
├── main.ts                # Entry point, khởi tạo Vue App, cài đặt Router, Pinia
├── assets/                # Các file tĩnh nội bộ được Vite xử lý (css, images, scss)
├── components/            # Các UI Component sử dụng chung (Buttons, Modals, Forms...)
├── composables/           # Các hàm tái sử dụng chung cho Vue 3 Composition API (ví dụ: hooks useFetch, useAuth...)
├── configs/               # Các biến số cấu hình, enum, cấu hình môi trường ứng dụng
├── data/                  # Mock data, hoặc các object data mẫu static
├── layouts/               # Định nghĩa các khung sườn giao diện (ví dụ: DefaultLayout.vue chứa Sidebar, Header; AuthLayout.vue trắng)
├── plugins/               # Code để setup các thư viện ngoài tích hợp vào Vue (i18n, custom directives)
├── router/                # Vue Router, định nghĩa toàn bộ đường dẫn URL và Guard (Auth Guard)
├── services/
│   └── api/               # Chứa các file khai báo hàm Axios gọi đến Backend, mỗi thực thể 1 file riêng biệt (auth.ts, domains.ts, keywords.ts...)
├── stores/                # Pinia global state. Chứa data cache tại trình duyệt (user info, token, themes)
├── types/                 # Các TypeScript Interfaces / Types chung của dự án, quy định kiểu dữ liệu cho Models
└── views/                 # Các components đóng vai trò là Trang (Pages) độc lập. Được tổ chức thành từng domain feature.

Kiến trúc thư mục views/ (Phân chia theo nghiệp vụ)#

Được cấu trúc cực kì mạch lạc theo tính năng (Feature-based structure). Một vài thư mục nổi bật:
activities/, auth/, home/, errors/: Trang hệ thống cơ bản.
brand-image/, brands/: Quản lý thương hiệu.
domain-final/, domain-redirect/, groups/, whitelist-domains/: Liên quan đến hệ thống quản lý tên miền.
keyword-management/, keywords/, template-keyword/: Khối quản lý từ khóa, nội dung.
templates/, template-defaults/: Khối tạo dựng mẫu Landing page.
proxies/, providers/: Khối điều khiển tài nguyên ảo.
report-index/, traffics/, volumes/: Khối báo cáo, biểu đồ.

Flow Code Căn Bản Cho 1 Màn Hình#

1.
Routing (router/) ánh xạ một path (ví dụ /keywords) tới một Vue Component trong views/.
2.
View Component (views/keywords/Index.vue) khi mount sẽ khởi tạo trạng thái và gọi API.
3.
Component sử dụng services/api/keywords.ts để request HTTP lấy dữ liệu.
4.
Data được ném vào biến Ref/Reactive và truyền qua components/ (như DataTable, TableForm) để render giao diện sử dụng Naive UI và Tailwind CSS, hoặc lưu vào stores/ qua Pinia nếu cần dùng toàn ứng dụng.
5.
Typings chung được lấy từ types/.
Cấu trúc hiện đại và tiêu chuẩn của Vite + Vue 3 mang lại sự minh bạch, phân chia chức năng rõ ràng để mở rộng dễ dàng (Clean Code).
Ngày cập nhật 2026-03-31 10:15:55
Trước
System architecture
Tiếp theo
Local
Built with