Mars-Admin est une plateforme de gestion full-stack moderne conçue pour répondre aux besoins des entreprises souhaitant déployer rapidement des outils d'administration robustes. S'appuyant sur les dernières versions de Spring Boot, Vue.js et UniApp, cette solution offre une architecture découplée permettant une exploitation sur le Web, les mini-programmes et les applications mobiles natives.

Caractéristiques principales du système

• Écosystème unifié : Une seule base de code pour gérer l'API back end, l'interface d'administration Web et l'application mobile.
• Sécurité avancée : Authentification gérée par Sa-Token avec stockage des sessions dans Redis et un modèle de contrôle d'accès basé sur les rôles (RBAC).
• Design moderne : Interface Web utilisant Ant Design Vue 4 et application mobile exploitant des effets visuels contemporains comme le dépoli (glassmorphism).
• Observabilité : Monitoring des requêtes SQL en temps réel, analyse des performances et détection des requêtes lentes directement dans le tableau de bord.
• Automatisation : Intégration native avec Snail-Job pour la gestion distribuée des tâches planifiées.

Architecture Technique

Le projet est structuré de manière modulaire pour faciliter la maintenance et l'évolution de chaque composant :

• Backend : Framework Spring Boot 3, persistance avec MyBatis-Flex et base de données MySQL 8.
• Frontend Web : Vue 3, TypeScript et Vite pour une expérience de développement fluide.
• Application Mobile : Framework UniApp permettant un déploiement multi-plateforme (iOS, Android, H5, WeChat).

// Structure simplifiée du projet
mars-admin-project/
├── mars-server/          // API Spring Boot 3
├── mars-console-web/     // Interface Web (Vue 3 + Vite)
├── mars-mobile-app/      // Application UniApp
├── snail-job-service/    // Planificateur de tâches
└── data-scripts/         // Scripts SQL et configuration
   

Spécifications du Stack Logiciel

Guide de Développement Backend

La création de nouveaux modules suit un pattern standardisé pour assurer la cohérence du code. Voici un exemple d'implémentation pour un module de gestion d'inventaire.

1. Définition de l'Entité

@Data
@Table(value = "inv_produit")
public class Produit extends BaseEntity {
   @Id(keyType = KeyType.Auto)
   private Long id;
   
   private String nom;
   private Integer stockActuel;
   private BigDecimal prixUnitaire;
}
   

2. Contrôleur et Sécurisation

L'accès aux ressources est protégé par des annotations simples qui vérifient les permissions de l'utilisateur connecté.

@RestController
@RequestMapping("/api/inventaire")
public class InventaireController {

   @Autowired
   private InventaireService stockService;

   @SaCheckPermission("inv:produit:view")
   @GetMapping("/liste")
   public ApiResponse<List<Produit>> obtenirProduits() {
       return ApiResponse.success(stockService.listAll());
   }

   @SaCheckRole("admin")
   @PostMapping("/ajouter")
   public ApiResponse<Void> creerProduit(@RequestBody Produit p) {
       stockService.save(p);
       return ApiResponse.success();
   }
}
   

Développement Frontend (Vue 3)

Le frontend utilise l'API de composition (Script Setup) pour une meilleure lisibilité et réutilisation du code.

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getStockData } from '@/api/stock';

const items = ref([]);
const loading = ref(false);

async function refreshStock() {
 loading.value = true;
 try {
   const { data } = await getStockData();
   items.value = data;
 } finally {
   loading.value = false;
 }
}

onMounted(() => {
 refreshStock();
});
</script>

<template>
 <a-table :data-source="items" :loading="loading">
   <a-table-column title="Nom" data-index="nom" />
   <a-table-column title="Quantité" data-index="stockActuel" />
 </a-table>
</template>
   

Surveillance et Maintenance

Le système intègre nativement des outils de diagnostic essentiels pour la mise en production :

• Journalisation SQL : Affichage coloré des requêtes dans la console avec identification visuelle de la durée d'exécution (vert pour rapide, jaune pour modéré, rouge pour lent).
• État du Serveur : monitoring de l'utilisation du processeur, de la mémoire JVM et de l'espace disque.
• Gestion des Sessions : Visualisation des utilisateurs actifs avec possibilité de forcer la déconnexion en cas de comportement suspect.

Procédure d'Installation Rapide

Pour déployer l'environnement de développement, assurez-vous de disposer de Java 17 et Node.js 18+.

Configuration de la base de données

# Création de la base
CREATE DATABASE mars_db DEFAULT CHARACTER SET utf8mb4;

# Importation du schéma (localisé dans /data-scripts/init.sql)
mysql -u root -p mars_db < schema.sql
   

Lancement du Backend

Modifiez le fichier application-dev.yml pour configurer vos accès MySQL et Redis, puis exécutez :

mvn clean install
mvn spring-boot:run -Dspring-boot.run.mainClass=com.mars.AdminApplication
   

Lancement du Frontend

cd mars-console-web
pnpm install
pnpm dev