Comment construire un backend pour Vue.js ?

Cet article fournit un tutoriel complet sur la façon de construire un backend pour Vue.js. Il fournira une vue d’ensemble de Vue.js, de ses avantages et de ses limites, des méthodes de déploiement disponibles, ainsi qu’un guide étape par étape sur la façon de construire et d’héberger une application Vue.js.

Vue est un framework JavaScript permettant de créer des interfaces utilisateur (IU) et des applications monopage (SPA) flexibles et performantes.

Vue est connu pour sa nature progressive, ce qui signifie qu’il peut être adopté de manière incrémentale dans des projets existants. Vue dispose également d’une syntaxe déclarative, qui vous permet de décrire l’état souhaité de l’interface utilisateur et de laisser Vue gérer la logique et les mises à jour sous-jacentes.

Outre sa nature progressive et sa syntaxe déclarative, Vue utilise un DOM virtuel, qui est une représentation légère du DOM réel. Cela lui permet de rendre et de mettre à jour l’interface utilisateur de manière efficace.

Lors du développement d’applications Vue, l’intégration d’une plateforme Backend as a Service (BaaS) comme Back4app peut offrir plusieurs avantages, tels que le stockage des données et l’authentification des utilisateurs, ce qui peut grandement simplifier le développement et faire gagner du temps. Dans cet article, vous explorerez Vue et apprendrez à construire une application avec Vue en utilisant Back4app.

Avantages de Vue

La popularité de Vue ne cesse de croître en raison de ses nombreux avantages, dont voici quelques-uns.

Courbe d’apprentissage facile

Vue a une courbe d’apprentissage relativement facile, ce qui le rend adapté aux développeurs de différents niveaux de compétence. La syntaxe de ses modèles est basée sur le langage HTML familier, ce qui permet aux développeurs d’assimiler les principes fondamentaux et de travailler avec Vue de manière transparente et rapide.

Grâce à une API claire et cohérente, Vue simplifie le processus de création d’applications en fournissant des modèles logiques et intuitifs pour la création de composants, l’utilisation de directives et l’exploitation de crochets de cycle de vie.

Pour faciliter le processus d’apprentissage, Vue propose une documentation complète contenant des explications bien rédigées et des exemples pratiques. De plus, la communauté Vue, qui apporte son soutien, fournit volontiers de l’aide, de la collaboration et de nombreuses ressources d’apprentissage par le biais de forums et de communautés en ligne.

Cadre léger

Vue a une taille de fichier réduite, la bibliothèque de base ne pesant que 20 Ko après minification et gzippage. La petite taille de Vue permet des temps de chargement initiaux plus rapides, ce qui améliore les performances et l’expérience de l’utilisateur.

En outre, grâce à sa conception modulaire, vous pouvez également importer de manière sélective uniquement les éléments nécessaires, ce qui réduit encore la taille du fichier et optimise les performances.

Architecture à base de composants

Dans Vue, les applications sont construites en créant des composants réutilisables et autonomes. Dans Vue, les composants sont des unités autonomes qui encapsulent la logique HTML, CSS et JavaScript, ce qui les rend plus faciles à gérer et à comprendre. Ils peuvent être réutilisés dans l’ensemble de l’application, ce qui permet d’économiser du temps et des efforts de développement.

Cette architecture à base de composants vous permet de créer des composants une seule fois et de les réutiliser dans l’ensemble de l’application ou dans plusieurs projets. Cette réutilisation réduit le code redondant et favorise la modularité du code.

Chaque composant peut être développé, testé et mis à jour indépendamment sans avoir d’impact sur les autres parties de l’application. Cela simplifie le débogage, le remaniement et l’ajout de nouvelles fonctionnalités à l’application.

Système de données réactif

Les données réactives sont des données qui changent automatiquement lorsque leur valeur sous-jacente change. Vue réalise la réactivité en enveloppant les objets réactifs dans un proxy. Cela permet à Vue de suivre les propriétés auxquelles on accède.

Lorsqu’on accède à une propriété, Vue l’ajoute à une liste de dépendances. Lorsque la valeur de la dépendance est modifiée, Vue met automatiquement à jour la vue.

Le système de données réactif de Vue est avantageux car vous n’avez pas à mettre à jour manuellement la vue lorsque les données changent, Vue s’en chargeant automatiquement. Il est donc plus facile d’écrire du code déclaratif et de se concentrer sur la description du résultat souhaité plutôt que sur les étapes nécessaires pour y parvenir.

Limites de Vue

Bien que Vue offre de nombreux avantages, il est essentiel de prendre en compte les inconvénients du développement d’applications web avec Vue. Voici quelques-uns de ces inconvénients.

Écosystème plus petit

Vue a un écosystème plus petit comparé à d’autres frameworks frontaux comme Angular et React. L’écosystème plus restreint de Vue signifie qu’il n’a pas forcément autant de bibliothèques et d’outils disponibles qu’Angular et React.

Ce petit écosystème fait que Vue est désavantagé lorsqu’il s’agit de développer de grandes applications complexes qui nécessitent des bibliothèques et des outils étendus. Les développeurs doivent donc souvent élaborer des solutions personnalisées pour répondre à des besoins spécifiques, car les solutions existantes sont soit limitées, soit peu prises en charge.

Soutien limité des entreprises

Contrairement à React et Angular, Vue bénéficie d’un soutien limité de la part des entreprises. Alors qu’Angular et React sont soutenus respectivement par Google et Facebook, Vue est un projet open-source dont l’équipe de mainteneurs est plus restreinte.

Ce soutien limité de l’entreprise peut être un inconvénient en termes de développement de nouvelles fonctionnalités, de corrections de bogues et de mises à jour de sécurité. En outre, elle a suscité des inquiétudes chez les organisations qui privilégient les cadres de travail bénéficiant d’un soutien et d’une stabilité solides de la part de l’entreprise pour les projets à long terme.

Construire le backend d’une application Vue

Le back-end d’une application Vue est responsable du stockage des données, de l’authentification, de l’intégration des API et des tâches logiques côté serveur. Il sert de base à la fonctionnalité de l’application, facilitant la communication entre le front-end et les services ou bases de données externes.

Lors de la construction du back-end d’une application Vue, plusieurs options sont disponibles, notamment :

Technologies traditionnelles côté serveur

Les cadres backend traditionnels tels que Laravel (PHP), Ruby on Rails, Node.js et ASP.NET (C#) offrent des solutions complètes pour construire le backend d’une application Vue.

Ces cadres ont une présence mature et établie, avec de grandes communautés et une documentation étendue, ce qui garantit la stabilité et des pratiques éprouvées pour le développement d’applications évolutives et sûres.

Ils fournissent des composants préconstruits, des générateurs de code et des outils d’échafaudage qui accélèrent le développement en prenant en charge les tâches communes du backend, ce qui vous permet de vous concentrer sur la création de fonctionnalités spécifiques à l’application.

En outre, les cadres traditionnels offrent de solides outils de mappage objet-relationnel (ORM), qui simplifient les opérations de base de données et garantissent l’intégrité des données grâce à un code orienté objet.

Cependant, les frameworks backend traditionnels peuvent nécessiter plus d’installation et de configuration que les autres options, ce qui peut être décourageant pour les débutants ou les développeurs ayant une expérience limitée en matière de backend. En outre, la courbe d’apprentissage de ces frameworks peut être plus raide en raison de leurs nombreuses fonctionnalités et conventions.

Backend-as-a-Service (BaaS)

Les plateformes Backend-as-a-Service (BaaS), telles que Back4app, offrent une solution pratique pour construire le backend des applications Vue. Les plateformes BaaS font abstraction des complexités de l’infrastructure dorsale, en fournissant des services dorsaux et des API préconstruits que les développeurs peuvent facilement intégrer dans leurs applications Vue.

Les plateformes BaaS accélèrent le développement en offrant une large gamme de services backend préconstruits, tels que le stockage de données, l’authentification des utilisateurs, le stockage de fichiers et les notifications push. Ces services peuvent être rapidement intégrés dans les applications Vue, ce qui réduit le temps et les efforts de développement.

Si les plateformes de backend en tant que service (BaaS) offrent commodité et évolutivité, il convient de garder à l’esprit certaines considérations. L’un des inconvénients est le risque de verrouillage par le fournisseur, car les plateformes BaaS peuvent étroitement coupler votre code de backend avec leurs services et API spécifiques.

La personnalisation et le contrôle du backend peuvent également être limités, ce qui peut constituer un défi pour les applications ayant des exigences particulières.

Construire une application de blog Vue

Pour créer une application Vue, exécutez la commande suivante dans le terminal du répertoire du projet :

npm create vue@latest

Ce code renverra une invite où vous pourrez nommer l’application Vue et sélectionner les fonctionnalités que vous utiliserez dans l’application Vue.

Après avoir nommé l’application et sélectionné le routeur Vue pour gérer les itinéraires dans votre application, accédez à l’application et exécutez la commande npm install pour installer les dépendances.

Dans le répertoire views de votre application Vue blog, créez deux vues : CreatePosts.vue et ReadPosts.vue.

Après avoir créé les vues, ajoutez le bloc de code ci-dessous à votre fichier index.js dans le répertoire du routeur:

//index.js
import { createRouter, createWebHistory } from 'vue-router'
import CreatePosts from '../views/CreatePosts.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'post',
      component: CreatePosts
    },
    {
      path: '/readposts',
      name: 'read-posts',
      component: () => import('../views/ReadPosts.vue')
    }
  ]
})

export default router

Le bloc de code ci-dessus met en place une instance Vue Router avec deux routes : Le chemin '/' associé au composant CreatePosts et le chemin '/readposts' associé au composant ReadPosts importé dynamiquement. Cette instance de routeur gère la navigation au sein de votre application Vue.

Ensuite, ajoutez un en-tête contenant des itinéraires imbriqués dans des balises HTML de type bouton dans votre fichier App.vue pour permettre aux utilisateurs de l’application de naviguer vers les itinéraires souhaités.

Comme cela :

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <header>
    <h1>Vue Blog</h1>

    <nav>
        <RouterLink to="/" class="link"><button>Create Posts</button></RouterLink>
        <RouterLink to="/readposts" class="link"><button>Read Posts</button></RouterLink>
      </nav>
  </header>

  <RouterView />
</template>

Le bloc de code ci-dessus met en place le routage dans l’application blog. Il importe les composants RouterLink et RouterView de la bibliothèque vue-router. Il importe ces composants dans le bloc de configuration du script (fonctionnalité Vue 3) du fichier App.vue.

Le bloc de modèle contient le balisage HTML du fichier App.vue. Il comprend un en-tête intitulé “Vue Blog” et une barre de navigation avec deux boutons enveloppés dans un composant RouterLink qui renvoie à l’itinéraire correspondant. Le composant RouterView est utilisé pour rendre le contenu de l’itinéraire actuel.

Après avoir configuré le routage, donnez un style à l’en-tête et aux liens de l’itinéraire en ajoutant le bloc de style ci-dessous à votre fichier App.vue :

<style lang= "scss" scoped>
  header{
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;

    nav{
      display: flex;
      gap: 1rem;

      .link{
        text-decoration: none;
        color: inherit;
      }
    }

  }
</style>

Intégrer Back4app dans votre application Vue Blog

Commencez par configurer votre application Vue, puis créez une instance sur Back4app pour établir une connexion avec votre application Vue. Pour ce faire, vous aurez besoin d’un compte Back4app.

Si vous n’êtes pas encore un utilisateur de Back4app, suivez les étapes suivantes pour vous inscrire :

1. Accédez au site web de Back4app.
2. Localisez le bouton d’inscription sur la page principale et cliquez dessus.
3. Complétez le formulaire d’inscription avec vos coordonnées et envoyez-le.

Une fois votre compte créé, connectez-vous à Back4app. Recherchez l’option NOUVELLE APP située dans le coin supérieur droit et sélectionnez-la. Vous accéderez alors à un formulaire dans lequel vous devrez indiquer le nom de votre application. Après avoir saisi le nom, cliquez sur le bouton CRÉER pour finaliser le processus.

Après avoir cliqué sur le bouton “CRÉER”, votre demande sera générée et vous serez dirigé vers le tableau de bord de la demande.

Connecter l’application Vue Blog à Back4app

Pour connecter votre application Vue à Back4app, vous devez d’abord installer le Parse JavaScript SDK.

Pour installer le SDK, exécutez l’une des commandes suivantes en fonction du gestionnaire de paquets que vous utilisez :

#using npm
npm install parse
		or 
#using yarn
yarn add parse

Ensuite, vous devrez configurer le SDK en utilisant deux des informations d’identification de votre application Back4app, l’ID de l'application et la CLÉ Javascript.

Obtenez l’ID de l'application et la clé JavaScript de Back4app en naviguant vers la section Sécurité & Clés en sélectionnant Paramètres de l’application sur le tableau de bord.

Le stockage des clés de votre application en texte brut constitue un risque pour la sécurité, car des utilisateurs malveillants peuvent accéder à votre application. Par conséquent, stockez les informations d’identification de votre application en toute sécurité en utilisant des variables d’environnement ou votre méthode préférée de stockage des clés sensibles.

Ensuite, importez la version minifiée de Parse à partir du paquetage parse que vous avez installé dans votre fichier main.js. Appelez ensuite la méthode initialize sur l’objet Parse et passez l’ID de l'application et la clé JavaScript comme arguments.

Enfin, définissez la propriété Parse.serverURL à“https://parseapi.back4app.com/”.

Par exemple :

import Parse from 'parse/dist/parse.min.js';

Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';

Votre fichier main.js devrait ressembler au bloc de code ci-dessous après avoir ajouté le bloc de code ci-dessus :

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Parse from 'parse/dist/parse.min.js';
import './assets/main.css';

const app = createApp(App)

app.use(router)

Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';

app.mount('#app')

Ajouter des données à Back4app

Pour capturer les données de l’utilisateur du blog, vous devrez créer un formulaire. Lors de la soumission du formulaire, l’application Vue exécute une fonction submitPost() qui exécute la logique nécessaire pour enregistrer les données dans l’instance Back4app.

Ajoutez le bloc de code ci-dessous à votre fichier CreatePosts.vue pour créer votre formulaire :

<!-- CreatePosts.vue -->
<script setup>
import { ref } from 'vue';
import { Parse } from 'parse/dist/parse.min.js';

const blog = ref({
  title: "",
  post: "",
})

function submitPost() {
  try {
      const Post = new Parse.Object("Post");
  
      Post.set("title", blog.value.title);
      Post.set("body", blog.value.post);
  
      Post.save().then(() => {
        console.log("New Post added successfully");
      });
    } catch (error) {
      console.log(error);
    }
  blog.value.title = ''
  blog.value.post = ''
}
</script>

<template>
  <form @submit.prevent="submitPost">
    <input id="blog-title" v-model="blog.title" placeholder="Title"/>
    <textarea id="blog-post" v-model="blog.post" placeholder="Post" rows="20"></textarea>
    <button>Submit Post</button>
  </form>
</template>

Le bloc de code ci-dessus est un composant qui permet aux utilisateurs de soumettre un article de blog. Il utilise l’API de composition Vue et importe la fonction ref de la bibliothèque Vue.

La fonction submitPost crée un nouvel objet Parse Post et définit les propriétés title et body de cet objet Post à la valeur des propriétés blog.title et blog.post avec la méthode set.

Ensuite, l’objet Post est sauvegardé dans Back4App avec la méthode save. En cas de succès ou d’échec, le code affiche un message dans la console. Après avoir soumis le message, les valeurs title et post de l’objet blog sont réinitialisées à une chaîne vide, ce qui efface les champs du formulaire.

Le bloc de ce fichier définit un élément de formulaire avec l’écouteur d’événement @submit.prevent qui déclenche la fonction submitPost lorsque le formulaire est soumis.

Le formulaire contient des éléments input et textarea liés aux propriétés de l’objet blog(blog.title et blog.post) avec v-model. Cela permet une liaison bidirectionnelle des données, garantissant que les modifications apportées aux éléments du formulaire mettent à jour l’objet blog.

Donnez du style à la vue CreatePosts pour une interface utilisateur plus attrayante en ajoutant le bloc de code ci-dessous à votre fichier CreatePosts.vue :

<style lang= "scss" scoped>
  form{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;

    input{
      padding: 1rem;
      background-color: #f2f2f2;
      font-family: 'Poppins', sans-serif;
      border: none;
      border-radius: 12px;
      inline-size: 70%;

      &::placeholder{
        color: #e3e3e3;
        font-weight: bold;
        font-family: 'Poppins', sans-serif;
      }
    }

    textarea{
      padding: 1rem;
      border: none;
      background-color: #f2f2f2;
      font-family: 'Poppins', sans-serif;
      border-radius: 12px;
      inline-size: 70%;

      &::placeholder{
        color: #e3e3e3;
        font-weight: bold;
        font-family: 'Poppins', sans-serif;
      }
    }
  }

</style>

Lire les données de Back4app

Afin d’afficher dans votre application des données qui ont été sauvegardées dans votre instance Back4app, vous devez d’abord être en mesure de lire les données de votre instance Back4app.

Pour lire les données de votre instance Back4app, vous devez créer une requête Parse pour la classe dont vous voulez récupérer les données. Vous pouvez ensuite utiliser le crochet de cycle de vie onBeforeMount de Vue pour récupérer les données et les afficher dans votre application.

Par exemple :

<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';

const postList = ref([])

onBeforeMount( async () => {
  try {
      const query = new Parse.Query("Post");

      const post = await query.find();

      console.log('Posts to be read displayed')
      postList.value = post;
      console.log(postList.value)

    } catch (error) {
      console.log(error);
    }
})

</script>

<template>
  <div>
    <ul class="postlist">
      <div class="post" v-for="(post, index) in postList">
        <div>
          <h2>{{ post.get('title') }}</h2>
          <p>{{ post.get('body') }}</p>
        </div>
      </div>
    </ul>
  </div>
</template>

Le fichier ReadPosts.vue récupère et affiche les posts de Back4app. Le script importe le hook onBeforeMount et la fonction ref du package vue. Le hook exécute une fonction asynchrone avant le montage de l’application Vue.

La fonction recherche un objet “Post” dans la base de données de votre application Back4app avec la méthode Parse.Query(). Elle renvoie ensuite un tableau contenant les résultats de la requête en appelant la méthode Parse find sur le résultat de l’appel Parse.Query(). Enfin, il assigne le tableau retourné à la variable postList.

Dans le bloc du modèle, la directive v-for parcourt en boucle le tableau postList et génère un nouvel élément div pour chaque article du tableau postList. La méthode post.get() récupère les valeurs des propriétés title et body des attributs dans votre base de données Back4App.

Vous pouvez maintenant styliser votre fichier ReadPosts.vue en ajoutant le code Scss suivant dans le bloc de style :

<style lang= "scss" scoped>
  .postlist{
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .post{
      display: flex;
      justify-content: space-between;
      padding: 1rem;

      h2{
        margin-block-end: 1rem;
        text-transform: uppercase;
      }

      p{
        opacity: 0.4;
        font-weight: bold;
        font-size: 13px;
        margin-block-end: 0.5rem;
      }

    }
  }

</style>

Modifier votre application Vue pour ajouter la fonctionnalité Supprimer un message

Une autre fonctionnalité essentielle que vous pouvez ajouter à votre blog App est la possibilité de supprimer des articles. Pour mettre en œuvre cette fonctionnalité, utilisez la méthode de destruction disponible dans le SDK Parse.

Comme cela :

<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';
const postList = ref([])

onBeforeMount( async () => {
  try {
      const query = new Parse.Query("Post");

      const post = await query.find();

      console.log('Posts to be read displayed')
      postList.value = post;
      console.log(postList.value)

    } catch (error) {
      console.log(error);
    }
})

const deletePost = async (id) => {
  try {
      const Post = Parse.Object.extend("Post");
      const todo = new Post();
      todo.id = id;
      await todo.destroy();
      const newPostList = postList.value.filter( (item) => item.id !== id )
      postList.value = newPostList;
    } catch (error) {
      console.log(error);
    }
}

</script>

Ce script est une mise à jour du fichier ReadPosts.vue qui gère la fonctionnalité de suppression. La fonction deletePost crée un nouvel objet Post à l’aide de la méthode Parse.Object.extend. Elle définit ensuite la propriété id de l’objet Post en fonction du paramètre id passé à la fonction.

Ensuite, il appelle la méthode destroy de l’objet Post pour supprimer le post avec l’ID donné de la base de données de Back4app. Il filtre ensuite le tableau postList et renvoie un nouveau tableau newPostList, contenant tous les messages à l’exception du message supprimé. Le tableau newPostList est alors assigné à la variable postList.

Vous pouvez ensuite lier la fonction deletePost à un événement click sur l’élément button dans le bloc template de votre fichier ReadPosts.vue.

Comme cela :

<template>
  <div>
    <ul class="postlist">
      <div class="post" v-for="(post, index) in postList">
        <div>
          <h2>{{ post.get('title') }}</h2>
          <p>{{ post.get('body') }}</p>
        </div>
        <button @click="deletePost(post.id)">Delete</button>
      </div>
    </ul>
  </div>
</template>

Enfin, ajoutez quelques styles globaux pour styliser les boutons et le corps de votre APP Vue dans le répertoire assets :

/* main.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 90%;
    margin: auto;
    font-family: 'Poppins', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 0.8rem;
    background-color: inherit;
    font-family: 'Poppins', sans-serif;
    font-size: small;
    font-weight: bold;
    color: #333333;
    border-radius: 12px;
}

button:hover{
    color: #e2e2e2;
    background-color: #333333;
  }

Tester votre application Vue Blog avec Back4app intégré

Maintenant que vous avez construit et intégré Back4app dans votre application Vue. Vous pouvez lancer la commande npm dans le terminal de votre projet pour tester l’application :

npm run dev

Cette commande compile l’application et l’héberge sur un serveur local particulier http://localhost:5173/

Au lancement de l’application, la vue CreatePosts, qui permet de créer des posts, devrait s’afficher en tant qu’itinéraire d’accueil :

Après avoir rempli les champs de saisie, cliquer sur le bouton Soumettre le message ajoutera les valeurs saisies à la base de données de Back4app. Vérifiez le tableau de bord de votre application Back4app ou naviguez vers la vue ReadPosts pour confirmer cela.

En cliquant sur le bouton de suppression, vous supprimez un message. Par exemple, supprimez le “SECOND POST” en cliquant sur son bouton de suppression :

Conclusion

Vue offre aux développeurs une solution robuste et évolutive pour créer des applications web modernes grâce à sa liaison réactive des données, son architecture basée sur des composants et son écosystème de bibliothèques.

L’intégration de Vue avec Back4app permet aux développeurs de gérer facilement le backend de leurs applications. Back4app réduit la complexité traditionnellement associée au développement du backend, ce qui permet aux développeurs de créer des applications web complètes.