Comment construire un Vue Front End pour un CMS sans tête –

Dans ce guide, nous allons apprendre à créer un site Web de blog moderne en utilisant Vue.js et GraphCMS une plate-forme de CMS sans tête.

Si vous souhaitez créer un blog rapide aujourd'hui , ma recommandation est d’aller directement dans WordPress.

Mais que se passe-t-il si vous êtes un puissant média et que vous souhaitez diffuser votre contenu aussi rapidement que possible sur plusieurs appareils? Vous devrez probablement également intégrer votre contenu à des annonces et à d'autres services tiers. Vous pouvez le faire avec WordPress, mais vous rencontrerez quelques problèmes avec cette plate-forme.

1. Vous devrez installer un plug-in pour implémenter des fonctionnalités supplémentaires. Plus vous installez de plugins, plus votre site Web devient lent.
2. PHP est assez lent comparé à la plupart des frameworks Web JavaScript. Du point de vue des développeurs, il est beaucoup plus facile et rapide d’implémenter des fonctionnalités personnalisées sur un frontal alimenté par JavaScript.

JavaScript offre des performances supérieures à PHP dans les tests de chargement du navigateur . De plus, JavaScript moderne et son écosystème offrent une expérience de développement bien plus agréable pour créer rapidement de nouvelles expériences Web.

Vous voulez apprendre le jeu Vue.js? Cet article est un extrait de notre bibliothèque Premium. Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Abonnez-vous maintenant pour seulement 9 dollars par mois .

Il y a donc eu une croissance des solutions sans tête CMS – qui sont tout simplement des bases pour la gestion de contenu. Avec cette approche, les développeurs peuvent se concentrer sur la construction de frontaux rapides et interactifs à l'aide d'un framework JavaScript de leur choix. Personnaliser un frontal alimenté par JavaScript est beaucoup plus facile que d'apporter des modifications sur un site WordPress.

GraphCMS diffère de la plupart des plates-formes CMS Headless en ce sens qu'au lieu de fournir du contenu via REST, il le fait via GraphQL. Cette nouvelle technologie est supérieure à REST, car elle nous permet de construire des requêtes qui traitent de données appartenant à plusieurs modèles en une seule requête.

Examinez le schéma de modèle suivant:

Post

• id: Number
• titre: String
• contenu: String
• commentaires: tableau de commentaires

Commentaire

• id: Number
• nom: String
• message: String

Les modèles ci-dessus ont une une relation (post) à plusieurs (commentaires). Voyons comment nous pouvons récupérer un seul enregistrement Post attaché avec tous les enregistrements de commentaire liés.

Si les données se trouvent dans une base de données relationnelle, vous devez créer une instruction SLQ inefficace ou deux instructions SQL pour extraire proprement les données. Si les données sont stockées dans une base de données NoSQL, vous pouvez utiliser un ORM moderne tel que Vuex ORM pour récupérer facilement les données, comme ceci:

 const post = Post.query ()
  .with ('commentaires')
  .find (1);

C'est très simple! Vous pouvez facilement transmettre ces données via REST au client souhaité. Mais c’est le problème: chaque fois que les exigences en matière de données changent du côté du client, vous serez obligé de revenir à votre code d’arrière-plan pour mettre à jour votre point de terminaison d’API existant ou en créer un qui fournisse l’ensemble de données requis. Ce processus en va-et-vient est fatiguant et répétitif.

Et si, au niveau du client, vous pouviez simplement demander les données dont vous avez besoin et que le back-end les fournirait pour vous, sans travail supplémentaire? Eh bien, c’est à cela que sert GraphQL.

Conditions préalables

Avant de commencer, je voudrais noter que ce guide est destiné aux utilisateurs de niveau intermédiaire à avancé. Je ne reviendrai pas sur les bases, mais je vais plutôt vous montrer comment créer rapidement un blog Vue.js en utilisant GraphCMS comme back-end. Vous devez maîtriser les domaines suivants:

• ES6 et ES7 JavaScript
• Vue.js (avec CLI version 3)
• GraphQL

C'est tout ce que vous devez savoir pour commencer à utiliser ce didacticiel. . De plus, une bonne expérience de l’utilisation de REST sera un atout, car je vais souvent y faire référence. Si vous souhaitez un rappel, cet article pourrait vous aider: « REST 2.0 est arrivé et son nom est GraphQL ».

À propos du projet

Nous allons créer une application de blog très simple avec un système de commentaires de base. Vous trouverez ci-dessous les liens que vous pouvez visiter pour consulter le projet terminé:

Veuillez noter qu’un jeton READ-ONLY a été utilisé dans la démonstration et que, par conséquent, le système de commentaires n’a pas fonctionné. Vous devez fournir votre jeton de permission OPEN et votre point de terminaison conformément aux instructions de ce didacticiel pour qu'il fonctionne.

Créer une base de données de projets GraphCMS

Rendez-vous sur le site Web GraphCMS et cliquez sur le lien « Commencez à construire gratuitement ». Vous serez dirigé vers leur page d'inscription.

Inscrivez-vous en utilisant votre méthode préférée. Une fois le processus d'authentification et de vérification de compte terminé, vous devriez pouvoir accéder au tableau de bord principal.

Dans l'exemple ci-dessus, j'ai déjà créé un projet. appelé "BlogDB". Allez-y, créez-en un nouveau et appelez-le comme vous voulez. Après avoir entré le nom, vous pouvez laisser le reste des champs dans leurs valeurs par défaut. Cliquez sur Créez et vous serez redirigé vers leur plan de projet.

Pour les besoins de ce tutoriel, sélectionnez le plan développeur gratuit puis cliquez sur Continuer . Vous serez dirigé vers le tableau de bord du projet, qui ressemble à ceci:

Allez à l’onglet Schema . Nous allons créer les modèles suivants, chacun avec les champs suivants:

Catégorie

• nom: Texte sur une seule ligne, obligatoire, unique

Message

• Contre-train: Texte sur une seule ligne , required, unique
• titre: Texte à une ligne, required, unique
• contenu: Texte à plusieurs lignes

Comment

• nom: Texte à une ligne, nécessaire
• message: Texte à plusieurs lignes, requis [19659020] Utilisez le bouton Créer un modèle pour créer des modèles. Sur le côté droit, vous devriez trouver un panneau caché pour les champs, qui est activé en cliquant sur le bouton Les champs . Faites glisser le type de champ approprié sur le panneau du modèle. Un formulaire vous sera présenté pour renseigner les attributs de votre champ. Notez en bas un bouton rose intitulé Advanced . Cliquez dessus pour développer le panneau et vous permettre d'activer davantage d'attributs de champ.

  

  Vous devez ensuite ajouter la relation entre les modèles comme suit: [19659027] Poste> Catégories (plusieurs à plusieurs)

• Poste> Commentaires (un à plusieurs)

Utilisez le champ Référence pour définir cette relation. Vous pouvez ajouter ce champ à n’importe quel côté. GraphCMS créera automatiquement le champ de relation opposé dans le modèle référencé. Lorsque vous avez terminé de définir les modèles, vous devriez obtenir quelque chose comme ceci:

Vous avez maintenant terminé la première partie. Fournissons maintenant quelques données à nos modèles.

Migration de données GraphQL

Pour ajouter du contenu à vos modèles, vous pouvez simplement cliquer sur l'onglet Contenu dans le tableau de bord du projet où vous pouvez créer de nouveaux enregistrements pour chaque de vos modèles. Toutefois, si vous trouvez que cette méthode est lente, sachez que j'ai créé un outil de migration GraphCMS qui copie les données à partir de fichiers CSV et les télécharge dans votre base de données GraphCMS. Vous pouvez trouver le projet ici dans ce référentiel GitHub . Pour commencer à utiliser le projet, téléchargez-le simplement dans votre espace de travail, comme suit:

 git clone git@github.com: sitepoint-editors / graphcsms-data-migration.git
cd graphcsms-data-migration
npm installer

Ensuite, vous devez extraire le jeton et le noeud final de l’API de votre projet GraphCMS à partir de la page Paramètres du tableau de bord. Vous devrez créer un nouveau jeton. Pour le niveau d'autorisation, utilisez OPEN, car cela permettra à l'outil d'effectuer des opérations de lecture et d'écriture sur votre base de données GraphCMS. Créez un fichier appelé .env et mettez-le à la racine du projet:

 ENDPOINT = 
JETON = 

Ensuite, vous devrez peut-être remplir les fichiers CSV du dossier de données avec les vôtres. Voici quelques exemples de données qui ont été utilisés:

 // Categories.csv
prénom
En vedette
Aliments
Mode
Beauté

// Posts.csv
titre, slug, contenu, catégories
Food Post 1, food-post-1, passez à l'action de grâce en faisant de cette sauce Instant Pot à la canneberge et à l'orange, de la nourriture |
Food Post 2, food-post-2, Ceci est mon deuxième post alimentaire, Food
Food Post 3, food-post-3, Ceci est mon dernier et dernier post alimentaire, Food
Fashion Post 1, fashion-post-1, Ceci est vraiment mon tout premier post de mode, Mode |
Fashion Post 2, fashion-post-2, Ceci est mon deuxième post de mode, Fashion
Fashion Post 3, fashion-post-3, Ceci est mon dernier et dernier post de mode, Fashion
Beauty Post 1, Beauty-post-1, Ceci est vraiment mon tout premier post de beauté, Beauty | Featured
Beauty Post 2, Beauty-post-2, Ceci est mon deuxième post de beauté, Beauty

Vous pouvez modifier le contenu si vous le souhaitez. Veillez à ne pas toucher la ligne du haut, sinon vous changerez le nom des champs. Veuillez noter que, pour la colonne catégories j'ai utilisé le caractère pipe | comme séparateur.

Pour télécharger les données CSV dans votre base de données GraphCMS, exécutez la commande commandes suivantes dans cet ordre:

 npm run categories
npm run posts

Chaque script imprimera les enregistrements téléchargés avec succès. La première raison pour laquelle nous avons importé les catégories est que les enregistrements peuvent être liés avec succès à des enregistrements existants de la catégorie .

Si vous souhaitez effacer votre base de données, vous pouvez exécuter la commande suivante:

 npm run reset

Ce script supprimera tout le contenu de votre modèle. Vous obtiendrez un rapport indiquant le nombre d'enregistrements supprimés pour chaque modèle.

J'espère que vous trouverez l'outil à portée de main. Retournez au tableau de bord pour confirmer que les données pour les Posts et les Catégories ont été téléchargées avec succès.

Maintenant que vous avez pris soin de l’arrière-plan, construisons notre blog principal. Interface.

Création de l'interface utilisateur du blog à l'aide de Vue.js

Comme indiqué plus haut, nous allons créer une application de blog très simple, optimisée par une base de données GraphCMS. Lancez un terminal et accédez à votre espace de travail.

Si vous n’avez pas installé Vue CLI, faites-le maintenant:

 npm install -g @ vue / cli

Créez ensuite un nouveau projet:

 vue create vue-graphcms

Choisissez de sélectionner les fonctionnalités manuellement, puis sélectionnez les options suivantes:

• Fonctions: Babel, Router
• Mode historique du routeur: Y
• ESLint avec prévention des erreurs uniquement
• Lint on save
• Fichier de configuration placement: fichiers de configuration dédiés
• Sauvegarde du préréglage: votre choix

Une fois le processus de création du projet terminé, accédez au répertoire du projet et installez les dépendances suivantes:

 npm install bootstrap-vue axios

Pour configurer Bootstrap-Vue dans notre projet, ouvrez simplement src / main.js et ajoutez le code suivant:

 import BootstrapVue de "bootstrap-vue";
importer "bootstrap / dist / css / bootstrap.css";
importer "bootstrap-vue / dist / bootstrap-vue.css";

Vue.config.productionTip = false;
Vue.use (BootstrapVue);

Nous devons ensuite commencer à définir la structure de notre projet. Dans le dossier src / components supprimez les fichiers existants et créez-en de nouveaux:

• CommentForm.vue
• CommentList.vue
• Post.vue
• PostList.vue

Dans le dossier src / views supprimez About.vue . et créez un nouveau fichier appelé PostView.vue . Comme le montre la démo, nous aurons plusieurs pages de catégories affichant chacune une liste de publications filtrées par catégorie. Techniquement, une seule page affichera une liste de messages différente en fonction du nom d’une route active. Le composant PostList filtre les messages en fonction de l’itinéraire actuel.

Commençons par établir les itinéraires. Ouvrez src / router.js et remplacez le code existant par ceci:

 import Vue de "vue";
importer un routeur depuis "vue-router";
importer Home de "./views/Home.vue";
importer Post de "./views/PostView.vue";

Vue.use (routeur);

exporter le nouveau routeur par défaut ({
  mode: "historique",
  base: process.env.BASE_URL,
  linkActiveClass: "active",
  itinéraires: [
    {
      path: "/",
      name: "Featured",
      component: Home
    },
    {
      path: "/food",
      name: "Food",
      component: Home
    },
    {
      path: "/fashion",
      name: "Fashion",
      component: Home
    },
    {
      path: "/beauty",
      name: "Beauty",
      component: Home
    },
    {
      path: "/post/:slug",
      name: "Post",
      component: Post
    }
  ]
});

Maintenant que nous avons nos itinéraires, configurons notre menu de navigation. Ouvrez src / App.vue et remplacez le code existant par ceci:

Ceci ajoutera une barre de navigation en haut de notre site contenant des liens vers nos différentes catégories.

Enregistrez le fichier et mettez à jour les fichiers suivants en conséquence:

src / views / Home.vue [19659111] importer PostList depuis "@ / components / PostList.vue";

défaut d'exportation {
  nom: "maison",
  Composants: {
    PostList
  }
};

src / components / PostList.vue

Notez que, dans le composant PostList nous utilisons un observateur personnalisé pour mettre à jour notre propriété de données category en fonction de notre URL actuelle. [19659003] Nous sommes maintenant prêts à effectuer un test rapide pour confirmer que les itinéraires fonctionnent. Faites tourner le serveur Vue.js à l’aide de la commande npm run serve . Ouvrez un navigateur à localhost: 8080 et testez chaque lien de navigation. La propriété category devrait générer la même valeur que celle définie dans l'attribut du nom de l'itinéraire.

Extraction de données à partir de GraphCMS

Maintenant, nous avons notre itinéraire. le code fonctionne, voyons comment nous pouvons extraire des informations de notre back-end GraphCMS. À la racine de votre projet, créez un fichier env.local et renseignez-le avec les valeurs des champs suivants:

 VUE_APP_ENDPOINT =
VUE_APP_TOKEN =

Notez que les applications à une seule page de Vue.js ne chargent que des variables d'environnement personnalisées commençant par VUE_APP . Vous pouvez trouver le point de terminaison et le jeton de l'API à partir de votre page de paramètres du tableau de bord GraphCMS. Pour le jeton, veillez à en créer un avec le droit OPEN, car cela autorisera les opérations READ et WRITE. Créez ensuite le fichier src / graphcms.js et copiez le code suivant:

 import axios de "axios";

export const ENDPOINT = process.env.VUE_APP_ENDPOINT;
const TOKEN = process.env.VUE_APP_TOKEN;

en-têtes const = {
  "Content-Type": "application / json",
  Autorisation: `Bearer $ {TOKEN}`
};

export const apiClient = axios.create ({
  en-têtes
});

export const POSTS_BY_CATEGORY_QUERY = `
  requête PostsByCategory ($ category: String!) {
    catégorie (où: {
      nom: catégorie $
    }
    ) {
      prénom,
      des postes {
        identifiant
        limace
        Titre
        contenu
        catégories {
          prénom
        }
      }
    }
  }
`;

export const POST_BY_SLUG_QUERY = `
  query PostBySlug ($ slug: String!) {
    post (où: {
      limace: limace $
    })
    {
      identifiant
      Titre
      contenu
      catégories {
        prénom
      }
      commentaires {
        prénom
        message
      }
    }
  }
`;

export const CREATE_COMMENT_MUTATION = `
  mutation CreateComment ($ post: PostWhereUniqueInput !, $ name: String !, $ message: String!) {
    createComment (data: {
      nom: $ nom,
      message: $ message,
      post: {
        connecter: $ post
      },
      statut: PUBLIÉ
    })
    {
      identifiant
      prénom
      message
    }
  }
`;

Ce fichier d'assistance que nous venons de créer fournit deux fonctions principales:

• Il crée une instance d'axios configurée pour exécuter des requêtes autorisées sur votre back-end GraphCMS.
• Il contient les requêtes et les mutations GraphQL utilisées dans ce contexte. projet. Ceux-ci sont chargés de récupérer les messages (par catégorie ou par slug), ainsi que de créer de nouveaux commentaires. Si vous souhaitez en savoir plus sur les requêtes et les mutations GraphQL, veuillez consulter les documents GraphQL .

Vous pouvez également utiliser l’explorateur d’API dans le tableau de bord de votre projet pour tester ces requêtes et ces mutations. Pour ce faire, copiez la requête ou la mutation à partir du code ci-dessus et collez-la dans la fenêtre supérieure de l'explorateur d'API. Entrez les variables de requête dans la fenêtre ci-dessous, puis cliquez sur le bouton Play . Vous devriez voir les résultats dans un nouveau volet à droite.

Voici un exemple de requête:

Voici un exemple de mutation:

Affichage des données dans un modèle

Maintenant, créons notre modèle HTML dans notre src / components / PostList.vue qui affichera une liste de publications de manière soignée. Nous ajouterons également le code axios qui extraira les posts de notre base de données GraphCMS:

Passons rapidement aux principales caractéristiques du code:

• Loading . Lorsqu’une demande est faite, une flèche de chargement s’affiche pour indiquer à l’utilisateur que quelque chose est en cours de réalisation. Lorsque la demande est satisfaite, la file de chargement est remplacée par une liste de postes.
• Requête . Afin d’obtenir une liste des publications par catégorie, j’ai trouvé qu’il était plus facile d’interroger cette catégorie, puis d’utiliser la relation catégorie à publication pour accéder aux publications filtrées.
• Created . Lorsque la page est chargée pour la première fois, la fonction fetchPosts () est appelée dans le crochet de cycle de vie créé .
• Regardez . Lorsque l'URL de la route change, la fonction fetchPosts () est appelée à chaque fois.

Après avoir effectué ces modifications, vous devriez maintenant avoir la vue suivante:

Affichage d'un message individuel

Assurez-vous que la navigation principale supérieure fonctionne comme prévu. Voyons maintenant le composant Post . Il aura sa propre fonction fetchPost () où il interrogera par slug . Si vous vous demandez d’où vient le paramètre slug permettez-moi de vous rappeler ce morceau de code que nous avons inséré dans router.js :

 // ...
{
  chemin: '/ post /: slug',
  nom: 'Post',
  composant: Post
},
// ...

Cela indique que tout ce qui vient après / post / dans l'URL est disponible dans le composant this. $ Route.params.slug .

Le post est un parent des composants CommentForm et CommentList . Les données de commentaires seront transmises au composant CommentList de l'enregistrement Postes. Insérons le code pour src / components / CommentList.vue maintenant:

À moins que vous n'ayez entré des commentaires manuellement à l'aide du tableau de bord GraphCMS, ne vous attendez pas à voir de résultats pour l'instant. Ajoutons du code à src / components / CommentForm.vue pour permettre aux utilisateurs d'ajouter des commentaires à un article de blog:

Nous avons maintenant un formulaire de commentaire de base capable de soumettre un nouveau commentaire à notre système backend GraphQL. Une fois le nouveau commentaire enregistré, nous récupérons l’objet renvoyé et l’ajoutons au tableau post.comments . Cela devrait déclencher le composant CommentList pour afficher le nouveau Commentaire .

Construisons maintenant le composant src / components / Post.vue :

Enfin, voici le code permettant à src / views / PostView.vue de tout relier:

Vous devriez maintenant avoir la vue suivante pour les posts. Prenez note du : slug à la fin de l'URL localhost: 8080 / post / fashion-post-1 :

Dans l'exemple ci-dessus, j'ai ajouté quelques commentaires pour tester la nouvelle fonctionnalité. Assurez-vous de faire de même pour le vôtre.

Résumé

J'espère que vous avez compris à quel point il est facile de créer un site Web de blog avec Vue.js et GraphQL. Si vous utilisiez PHP et MySQL, vous avez écrit beaucoup plus de code. Même avec un framework PHP, vous auriez toujours écrit plus de code pour une application de blog simple.

Par souci de ce tutoriel, je devais garder les choses aussi simples que possible. Vous remarquerez peut-être que ce projet de blog est loin de rencontrer une configuration de blog minimaliste. Nous n’avons pas abordé plusieurs aspects, tels que la gestion des erreurs, la validation des formulaires et la mise en cache. Pour le dernier bit, je recommande Apollo Client car il dispose de mécanismes pour la mise en cache des résultats de requête GraphQL. Ensuite, bien sûr, il doit exister un modèle d’auteur et un système de commentaires approprié prenant en charge l’authentification et l’approbation des messages.

Si vous en avez l’intention, n'hésitez pas à aller encore plus loin dans ce simple blog Vue.js GraphCMS. 19659175] J'écris un code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.