Documentation JavaScript - RocketBuilder#
Cette section décrit l’organisation et le rôle des différents scripts JavaScript de l’application.
đź“‚ Dossier public/js/
#
Le JavaScript est organisé en trois sous-dossiers principaux :
1. 📚 Api/
#
Contient des classes utilitaires pour communiquer avec l’API.
Fichier |
RĂ´le |
---|---|
|
Gère l’authentification via JWT, stockage du token et headers d’authentification. |
Extrait :
static async login(username, password) {
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ username, password }),
headers: { 'Content-Type': 'application/json' }
});
const data = await response.json();
this.token = data.token;
}
2. 📚 Component/
#
Composants d’interface utilisateur.
Fichier |
RĂ´le |
---|---|
|
Composant de barre de navigation dynamique. |
|
Formulaire de création de module/sous-module avec validation des champs. |
Extrait :
export default function NavBar() {
return `
<nav class="bg-gray-800 p-2 text-white">
RocketBuilder Navigation
</nav>
`;
}
3. 📚 Pages/
#
Pages de l’application accessibles aux utilisateurs.
Fichier |
RĂ´le |
---|---|
|
Gère l’affichage du formulaire de connexion utilisateur. |
|
Affiche les modules et sous-modules existants après connexion. |
Extrait :
export default function LoginPage() {
return `
<form id="login-form">
<input type="text" id="username" placeholder="Nom d'utilisateur">
<input type="password" id="password" placeholder="Mot de passe">
<button type="submit">Connexion</button>
</form>
`;
}
📢 Remarques#
Tout est codé en ES6+ (import/export, arrow functions).
Les appels API utilisent fetch nativement avec
Authorization: Bearer
automatiquement ajouté.Les composants sont purs (pas de framework type React ou Vue).
🚀 À retenir#
Api/ ➔ communication avec l’API
Component/ ➔ composants réutilisables d’interface
Pages/ âž” pages principales