Architecture des interactions et navigation

Dans une application sociale, le centre de notifications sert de pivot pour l'engagement utilisateur. L'objectif est de permettre une redirection fluide vers le contenu source (article ou profil) selon le type d'interaction reçue. Voici la logique de routage à implémenter :

Configuration du routage dans pages.json

Avant de coder la logique métier, il est impératif d'enregistrer les chemins dans le fichier de configuration globale du projet uni-app pour rendre la navigation opérationnelle.

{
  "pages": [
    {
      "path": "pages/notifications/likes",
      "style": { "navigationBarTitleText": "Interactions" }
    },
    {
      "path": "pages/notifications/comments",
      "style": { "navigationBarTitleText": "Commentaires" }
    },
    {
      "path": "pages/social/user_profile",
      "style": { "navigationBarTitleText": "Profil Utilisateur" }
    },
    {
      "path": "pages/feed/post_view",
      "style": { "navigationBarTitleText": "Détails de la publication" }
    }
  ]
}

Implémentation du frontend

Gestion des mentions "J'aime"

Ce composant affiche la liste des utilisateurs ayant interagi avec vos publications. Le clic sur un élément déclenche une redirection vers le post concerné.

<template>
  <view class="notify-container">
    <view v-if="isLoading" class="loader">Chargement...</view>
    <view v-else class="content-list">
      <view 
        class="notify-item" 
        v-for="(entry, idx) in logData" 
        :key="idx" 
        @tap="handlePostNavigation(entry)"
      >
        <image class="user-thumb" :src="entry.avatar || '/static/default-user.png'"></image>
        <view class="text-meta">
          <text class="nickname">{{ entry.sender_name }}</text>
          <text class="action-type">a aimé votre publication</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      logData: []
    }
  },
  onLoad() {
    this.fetchInteractionLogs();
  },
  methods: {
    async fetchInteractionLogs() {
      // Appel API simulé
    },
    handlePostNavigation(item) {
      uni.navigateTo({
        url: `/pages/feed/post_view?postId=${item.target_post_id}`
      });
    }
  }
}
</script>

Visualisation du profil tiers

Lorsqu'un utilisateur clique sur une notification d'abonnement, il est redirigé vers une page de profil dynamique utilisant l'ID de l'expéditeur.

<template>
  <view class="profile-layout">
    <view class="header-card">
      <image class="main-avatar" :src="accountInfo.portrait"></image>
      <view class="identity">
        <text class="name-display">{{ accountInfo.display_name }}</text>
      </view>
    </view>
    
    <view class="metrics-bar">
      <view class="stat-unit"><text class="val">{{ accountInfo.follows }}</text> Suivis</view>
      <view class="stat-unit"><text class="val">{{ accountInfo.followers }}</text> Abonnés</view>
      <view class="stat-unit"><text class="val">{{ accountInfo.karma }}</text> Réputation</view>
    </view>

    <view class="gallery-grid">
      <!-- Composant de grille pour les publications de l'utilisateur -->
      <post-thumbnail v-for="p in userPosts" :key="p.id" :data="p" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      targetUid: '',
      accountInfo: {},
      userPosts: []
    }
  },
  onLoad(params) {
    this.targetUid = params.userId;
    this.loadUserProfile();
  },
  methods: {
    async loadUserProfile() {
      const response = await uni.request({
        url: "http://api.exemple.com/v1/user/profile",
        method: "GET",
        data: { uid: this.targetUid }
      });
      if (response.statusCode === 200) {
        this.accountInfo = response.data.profile;
        this.userPosts = response.data.posts;
      }
    }
  }
}
</script>

Intégration du backend Django

Le backend doit fournir les endpoints nécessaires pour récupérer les notifications. En cas d'utilisation de MySQL avec Django, certaines configurations sont indispensables.

Résolution des dépendances de base de données

Si vous rencontrez l'erreur ModuleNotFoundError: No module named 'MySQLdb', installez le client nécessaire :

pip install mysqlclient

Alternativement, pour utiliser pymysql, modifiez le fichier __init__.py de votre dossier de projet principal :

import pymysql
pymysql.install_as_MySQLdb()

Lancement du service

Démarrez le serveur de développement pour permettre au frontend uni-app de consommer les APIs :

python manage.py runserver 0.0.0.0:8000

Points techniques clés à retenir

1. Propagation des événements : Utilisez @click.stop sur les boutons d'action à l'intérieur d'une liste (comme le bouton "S'abonner en retour") pour éviter de déclencher la navigation vers le post ou le profil par erreur.
2. Gestion de l'état de chargement : Implémentez systématiquement un indicateur visuel (Skeleton screen ou Spinner) durant les requêtes uni.request pour améliorer l'expérience utilisateur.
3. Routage conditionnel : Assurez-vous que les IDs transmis via l'URL sont validés côté backend pour éviter les erreurs de type 404 lors de l'accès à un contenu supprimé.