gentelella

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet"> <style id="jtd-nav-activation"> .site-nav > ul.nav-list:first-child > li:not(:nth-child(8)) > a, .site-nav > ul.nav-list:first-child > li > ul > li a { background-image: none; } .site-nav > ul.nav-list:not(:first-child) a, .site-nav li.external a { background-image: none; } .site-nav > ul.nav-list:first-child > li:nth-child(8) > a { font-weight: 600; text-decoration: none; }.site-nav > ul.nav-list:first-child > li:nth-child(8) > button svg { transform: rotate(-90deg); }.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(8) > ul.nav-list { display: block; } </style> <script src="/gentelella/assets/js/vendor/lunr.min.js"></script> <script src="/gentelella/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">  <title>API Integration | Gentelella Admin Template</title> <meta name="generator" content="Jekyll v3.9.5" /> <meta property="og:title" content="API Integration" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <link rel="canonical" href="http://localhost:4000/gentelella/api-integration/" /> <meta property="og:url" content="http://localhost:4000/gentelella/api-integration/" /> <meta property="og:site_name" content="Gentelella Admin Template" /> <meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="twitter:title" content="API Integration" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"API Integration","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/api-integration/"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/gentelella/" class="site-title lh-tight"> Gentelella Admin Template </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </button> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="//github.com/puikinsh/gentelella" class="site-button" > Gentelella on GitHub </a> </li> <li class="aux-nav-list-item"> <a href="//colorlib.com" class="site-button" > Colorlib </a> </li> </ul> </nav> </div> <div class="main-content-wrap"> <div id="main-content" class="main-content"> <main> <h1 class="no_toc" id="api-integration-guide"> <a href="#api-integration-guide" class="anchor-heading" aria-labelledby="api-integration-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> API Integration Guide </h1> Learn how to integrate Gentelella Admin Template with backend APIs and external services <h2 class="no_toc text-delta" id="table-of-contents"> <a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents </h2> <ol id="markdown-toc"> <li><a href="#rest-api-integration" id="markdown-toc-rest-api-integration">REST API Integration</a> <ol> <li><a href="#http-client-setup" id="markdown-toc-http-client-setup">HTTP Client Setup</a> <ol> <li><a href="#axios-configuration" id="markdown-toc-axios-configuration">Axios Configuration</a></li> </ol> </li> <li><a href="#api-service-layer" id="markdown-toc-api-service-layer">API Service Layer</a> <ol> <li><a href="#base-service-class" id="markdown-toc-base-service-class">Base Service Class</a></li> <li><a href="#specific-service-classes" id="markdown-toc-specific-service-classes">Specific Service Classes</a></li> </ol> </li> </ol> </li> <li><a href="#real-time-integration" id="markdown-toc-real-time-integration">Real-time Integration</a> <ol> <li><a href="#websocket-connection" id="markdown-toc-websocket-connection">WebSocket Connection</a></li> <li><a href="#real-time-dashboard-updates" id="markdown-toc-real-time-dashboard-updates">Real-time Dashboard Updates</a></li> </ol> </li> <li><a href="#data-management" id="markdown-toc-data-management">Data Management</a> <ol> <li><a href="#state-management" id="markdown-toc-state-management">State Management</a></li> <li><a href="#data-caching" id="markdown-toc-data-caching">Data Caching</a></li> </ol> </li> <li><a href="#authentication-integration" id="markdown-toc-authentication-integration">Authentication Integration</a> <ol> <li><a href="#jwt-token-management" id="markdown-toc-jwt-token-management">JWT Token Management</a></li> </ol> </li> <li><a href="#error-handling" id="markdown-toc-error-handling">Error Handling</a> <ol> <li><a href="#global-error-handler" id="markdown-toc-global-error-handler">Global Error Handler</a></li> </ol> </li> <li><a href="#performance-optimization" id="markdown-toc-performance-optimization">Performance Optimization</a> <ol> <li><a href="#request-batching" id="markdown-toc-request-batching">Request Batching</a></li> </ol> </li> <li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li> </ol><hr /> <h2 id="rest-api-integration"> <a href="#rest-api-integration" class="anchor-heading" aria-labelledby="rest-api-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> REST API Integration </h2> <h3 id="http-client-setup"> <a href="#http-client-setup" class="anchor-heading" aria-labelledby="http-client-setup"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> HTTP Client Setup </h3> <h4 id="axios-configuration"> <a href="#axios-configuration" class="anchor-heading" aria-labelledby="axios-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Axios Configuration </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/js/api/http-client.js import axios from 'axios'; class HttpClient { constructor() { this.client = axios.create({ baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8080/api', timeout: 10000, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }); this.setupInterceptors(); } setupInterceptors() { // Request interceptor - add auth token this.client.interceptors.request.use( (config) => { const token = localStorage.getItem('auth_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => Promise.reject(error) ); // Response interceptor - handle errors this.client.interceptors.response.use( (response) => response.data, (error) => { if (error.response?.status === 401) { this.handleUnauthorized(); } return Promise.reject(this.formatError(error)); } ); } handleUnauthorized() { localStorage.removeItem('auth_token'); localStorage.removeItem('user_data'); window.location.href = '/login.html'; } formatError(error) { if (error.response) { return { message: error.response.data?.message || 'Server error', status: error.response.status, data: error.response.data }; } else if (error.request) { return { message: 'Network error - please check your connection', status: 0 }; } else { return { message: error.message || 'Unknown error occurred', status: -1 }; } } // HTTP methods get(url, config = {}) { return this.client.get(url, config); } post(url, data = {}, config = {}) { return this.client.post(url, data, config); } put(url, data = {}, config = {}) { return this.client.put(url, data, config); } patch(url, data = {}, config = {}) { return this.client.patch(url, data, config); } delete(url, config = {}) { return this.client.delete(url, config); } // File upload upload(url, file, onProgress = null) { const formData = new FormData(); formData.append('file', file); return this.client.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { if (onProgress) { const progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); onProgress(progress); } } }); } } // Create singleton instance export const httpClient = new HttpClient(); </code></pre></div></div> <h3 id="api-service-layer"> <a href="#api-service-layer" class="anchor-heading" aria-labelledby="api-service-layer"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> API Service Layer </h3> <h4 id="base-service-class"> <a href="#base-service-class" class="anchor-heading" aria-labelledby="base-service-class"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Base Service Class </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/js/api/base-service.js import { httpClient } from './http-client.js'; export class BaseService { constructor(endpoint) { this.endpoint = endpoint; this.http = httpClient; } async getAll(params = {}) { try { const response = await this.http.get(this.endpoint, { params }); return { success: true, data: response.data, meta: response.meta }; } catch (error) { return { success: false, error: error.message, details: error }; } } async getById(id) { try { const response = await this.http.get(`${this.endpoint}/${id}`); return { success: true, data: response.data }; } catch (error) { return { success: false, error: error.message, details: error }; } } async create(data) { try { const response = await this.http.post(this.endpoint, data); return { success: true, data: response.data }; } catch (error) { return { success: false, error: error.message, details: error }; } } async update(id, data) { try { const response = await this.http.put(`${this.endpoint}/${id}`, data); return { success: true, data: response.data }; } catch (error) { return { success: false, error: error.message, details: error }; } } async delete(id) { try { await this.http.delete(`${this.endpoint}/${id}`); return { success: true }; } catch (error) { return { success: false, error: error.message, details: error }; } } async search(query, params = {}) { try { const response = await this.http.get(`${this.endpoint}/search`, { params: { q: query, ...params } }); return { success: true, data: response.data, meta: response.meta }; } catch (error) { return { success: false, error: error.message, details: error }; } } } </code></pre></div></div> <h4 id="specific-service-classes"> <a href="#specific-service-classes" class="anchor-heading" aria-labelledby="specific-service-classes"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Specific Service Classes </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/js/api/user-service.js import { BaseService } from './base-service.js'; class UserService extends BaseService { constructor() { super('/users'); } async authenticate(credentials) { try { const response = await this.http.post('/auth/login', credentials); // Store auth token if (response.token) { localStorage.setItem('auth_token', response.token); localStorage.setItem('user_data', JSON.stringify(response.user)); } return { success: true, data: response }; } catch (error) { return { success: false, error: error.message }; } } async logout() { try { await this.http.post('/auth/logout'); } catch (error) { console.warn('Logout API call failed:', error.message); } finally { localStorage.removeItem('auth_token'); localStorage.removeItem('user_data'); window.location.href = '/login.html'; } } async getCurrentUser() { try { const response = await this.http.get('/auth/me'); return { success: true, data: response.data }; } catch (error) { return { success: false, error: error.message }; } } async updateProfile(data) { try { const response = await this.http.put('/auth/profile', data); // Update stored user data localStorage.setItem('user_data', JSON.stringify(response.data)); return { success: true, data: response.data }; <sp