Vaildation des entrées utilisateur sous Android

L'implémentation de contrôles de saisie empêche les données invalides lors de l'inscription. Cette approche réduit les erreurs côté serveur :

btnEnregistrement.setOnClickListener(v -> {
    if (champPseudo.getText().toString().isEmpty()) {
        affichageErreur.setText("Le pseudo est requis");
        return;
    }
    if (champPseudo.getText().length() > LIMITE_CARACTERES) {
        affichageErreur.setText("Pseudo trop long (max " + LIMITE_CARACTERES + ")");
        return;
    }
    if (!champMdp.getText().toString().equals(champMdpConfirmation.getText().toString())) {
        affichageErreur.setText("Les mots de passe diffèrent");
        return;
    }
    verifierDonnees();
});

Communication entre Vue.js et Spring Boot

L'utilisation d'Axios permet des requêtes HTTP asynchrones vers l'API Spring Boot :

<script>
const nouveauService = { nom: 'Service Technique' };

axios.post('http://localhost:8080/services', nouveauService)
  .then(reponse => console.log(reponse.data))
  .catch(erreur => console.error('Erreur API', erreur));
</script>

Configuration Axios avancée

Création d'une instance Axios avec intercepteurs :

import axios from 'axios';

const clientHttp = axios.create({ baseURL: '/api' });

clientHttp.interceptors.response.use(
  reponse => reponse.data,
  erreur => {
    console.error('Échec requête');
    return Promise.reject(erreur);
  }
);

export default clientHttp;

Service d'enrgeistrement utilisateur

Abstraction des appels API danss un service dédié :

import clientHttp from '@/utils/clientHttp';

export const inscriptionUtilisateur = (infos) => {
  const parametres = new URLSearchParams();
  Object.keys(infos).forEach(cle => {
    parametres.append(cle, infos[cle]);
  });
  return clientHttp.post('/utilisateurs/inscription', parametres);
};

Composant d'inscription Vue.js

Implémentation d'un formulaire avec validation en temps réel :

<script setup>
import { ref } from 'vue';
import { inscriptionUtilisateur } from '@/services/utilisateurService';

const donneesInscription = ref({ pseudo: '', mdp: '' });
const modeInscription = ref(true);

const verifierMdp = (regle, valeur, callback) => {
  if (valeur !== donneesInscription.value.mdp) {
    callback(new Error('Confirmation incorrecte'));
  } else {
    callback();
  }
};

const soumettreInscription = async () => {
  const resultat = await inscriptionUtilisateur(donneesInscription.value);
  alert(resultat.code === 0 ? 'Succès' : 'Échec');
};
</script>

<template>
  <el-form v-if="modeInscription" :model="donneesInscription">
    <el-form-item prop="pseudo">
      <el-input placeholder="Identifiant" v-model="donneesInscription.pseudo" />
    </el-form-item>
    <el-form-item>
      <el-button @click="soumettreInscription">S'inscrire</el-button>
    </el-form-item>
  </el-form>
</template>