Contexte du Projet

Ce projet vise à développer une solution complète de boutique en ligne pour les mini programmes WeChat, intégrant une interface administrateur basée sur une architecture séparée front-end et back-end. L'objectif était de fournir un système fonctionnel avec un code prêt à l'exécution, permettant une intégration facile avec d'autres services.

Pile Technologique et Environnement de Développement

• Technologies Principales : Mini Programme WeChat, Spring Boot, Vue.js, MySQL, Redis, Element UI, Shiro.
• Langage de Développement : Java.
• Gestion de Base de Données : MySQL 5.7+, outil de visualisation Navicate.
• Environnement de Compilation : IntelliJ IDEA, JDK 1.8.
• Système d'Exploitation : Windows 10.
• Exigences Matérielles : CPU Intel Core i5 ou équivalent, 8 Go de RAM, au moins 50 Go d'espace disque disponible.
• Logiciels Supplémentaires : Navigateur Chrome.

Fonctionnalités du Système

Côté Mini Programme

• Page d'Accueil : barre de recherche, catégories de navigation cliquables, galeries d'images de catégories.
• Catégories de Produits : interface de recherche, affichage dynamique basé sur la catégorie sélectionnée, redirection vers la liste des produits.
• Liste des Produits : barre de recherche, affichage des produits avec chargement dynamique au défilement.
• Détails du Produit : carrosuel d'images, description détaillée, fonctionnalité d'ajout aux favoris et au panier.
• Panier : gestion des adresses de livraison, détails des articles, modification des quantités, calcul dynamique du total.
• Paiement : sélection d'adresse, récapitulatif de commande, simulation de paiement (intégration WeChat Pay possible avec autorisation d'APPID).
• Profil Utilisateur : affichage des favoris, accès aux commandes, gestion des adresses, section de retours.

Côté Administration

Interface d'administration pour gérer les produits, les commandes, les retours et les utilisateurs, avec des fonctionnalités CRUD complètes.

Exemples de Code

Code du Mini Programme WeChat (Page de Profil Utilisateur)

<view class="profil_container">
    <view class="avatar_section" wx:if="{{infoUtilisateur.urlAvatar}}">
        <image class="fond_avatar" src="https://exemple.com/image-fond.jpg"></image>
        <view class="info_profil">
            <image class="icone_avatar" src="https://exemple.com/image-avatar.jpg"></image>
            <view class="nom_utilisateur">Jean Dupont</view>
        </view>
    </view>
    <view class="bouton_connexion" wx:else="">
        <navigator url="/pages/connexion/index">Se connecter</navigator>
    </view>
</view>
<view class="contenu_utilisateur">
    <view class="section_principale">
        <view class="historique_section">
            <navigator>
                <view class="compteur">0</view>
                <view class="libelle">Boutiques suivies</view>
            </navigator>
            <navigator url="/pages/favoris/index">
                <view class="compteur">{{nombreFavoris}}</view>
                <view class="libelle">Articles favoris</view>
            </navigator>
        </view>
        <view class="commandes_section">
            <view class="titre_commandes">Mes commandes</view>
            <view class="actions_commandes">
                <navigator url="/pages/commandes/index?type=1">
                    <view class="icone icone-commande"></view>
                    <view class="nom_action">Toutes les commandes</view>
                </navigator>
                <navigator url="/pages/commandes/index?type=2">
                    <view class="icone icone-paiement"></view>
                    <view class="nom_action">En attente de paiement</view>
                </navigator>
            </view>
        </view>
        <view class="adresse_section">Gestion des adresses</view>
    </view>
</view>

Code du Front-End Vue.js (Gestion des Retours)

<template>
  <div class="interface-principale">
    <div class="zone-recherche">
      <el-form :inline="true">
        <el-form-item label="Compte utilisateur">
          <el-input placeholder="Entrez le compte" v-model="compteUtilisateur"></el-input>
        </el-form-item>
        <el-form-item label="Statut">
          <el-select placeholder="Sélectionner" v-model="statutActuel">
            <el-option :key="option.id" :value="option.libelle" v-for="option in listeStatuts">
              {{ option.libelle }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary">Rechercher</el-button>
      </el-form>
    </div>
    <el-table :data="donneesTableau" border="">
      <el-table-column label="ID" prop="identifiant" v-if="false"></el-table-column>
      <el-table-column label="Compte" prop="compteUtilisateur"></el-table-column>
      <el-table-column label="Contenu du retour" prop="contenuRetour"></el-table-column>
      <el-table-column label="Statut" prop="statutActuel"></el-table-column>
      <el-table-column label="Actions">
        <template slot-scope="scope">
          <el-popconfirm scope.row="">
            <el-button slot="reference" type="danger">Supprimer</el-button>
          </el-popconfirm>
          <el-button type="primary" v-if="scope.row.statutActuel === 'Non traité'">
            Traiter
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-size="taillePage" :total="totalElements">
    </el-pagination>
  </div>
</template>

Code du Back-End Spring Boot (Contrôleur de Produits)

@RestController
@RequestMapping("/api/produits")
public class ControleurProduit {
    private static final Logger LOGGER = LoggerFactory.getLogger(ControleurProduit.class);

    @Autowired
    private ServiceProduit serviceProduit;

    @PostMapping("/ajouter")
    public Resultat ajouterProduit(@RequestBody Produit produit) {
        LOGGER.info("Ajout d'un nouveau produit");
        return serviceProduit.creerProduit(produit);
    }

    @PostMapping("/rechercher")
    public Resultat rechercherProduits(@RequestBody Map<string object=""> criteres) {
        LOGGER.info("Recherche de produits avec critères");
        return serviceProduit.recupererProduitsParPage(criteres);
    }

    @PutMapping("/modifier")
    public Resultat modifierProduit(@RequestBody Produit produit) {
        LOGGER.info("Modification du produit avec ID : {}", produit.getId());
        return serviceProduit.mettreAJourProduit(produit);
    }

    @DeleteMapping("/supprimer")
    public Resultat supprimerProduit(@RequestBody Map<string object=""> parametres) {
        LOGGER.info("Suppression du produit");
        return serviceProduit.supprimerProduit(parametres);
    }

    @GetMapping("/aleatoire")
    public Resultat obtenirProduitAleatoire() {
        LOGGER.info("Récupération d'un produit aléatoire pour le mini programme");
        return serviceProduit.recupererProduitAleatoire();
    }
}
</string></string>