Come costruire un front-end Vue per un CMS headless

Come costruire un front-end Vue per un CMS headless

In questa guida impareremo come creare un moderno sito Web di blog utilizzando Vue.js e GraphCMS, una piattaforma CMS headless.

Se stai cercando di avviare un blog veloce oggi, il mio consiglio è di andare direttamente su WordPress.

Ma cosa succede se sei un potente media e desideri distribuire i tuoi contenuti il ​​più velocemente possibile su più dispositivi? Probabilmente dovrai anche integrare i tuoi contenuti con annunci e altri servizi di terze parti. Bene, potresti farlo con WordPress, ma incontrerai alcuni problemi con quella piattaforma.

  1. Dovrai installare un plug-in per implementare funzionalità aggiuntive. Più plugin installi, più lento diventa il tuo sito web.
  2. PHP è piuttosto lento rispetto alla maggior parte dei framework web JavaScript. Dal punto di vista di uno sviluppatore, è molto più facile e veloce implementare funzionalità personalizzate su un front-end basato su JavaScript.

JavaScript offre prestazioni superiori a PHP nei test di caricamento del browser. Inoltre, JavaScript moderno e il suo ecosistema offrono un'esperienza di sviluppo molto più piacevole quando si tratta di creare rapidamente nuove esperienze web.

Vuoi imparare Vue.js da zero? Questo articolo è un estratto dalla nostra libreria Premium. Ottieni un'intera raccolta di libri Vue su concetti fondamentali, progetti, suggerimenti e strumenti e altro con Zentica Premium. Iscriviti ora per soli $ 9 / mese.

Quindi c'è stata una crescita di CMS senza testa soluzioni, che sono semplicemente back-end per la gestione dei contenuti. Con questo approccio, gli sviluppatori possono concentrarsi sulla creazione di front-end veloci e interattivi utilizzando un framework JavaScript di loro scelta. Personalizzare un front-end basato su JavaScript è molto più semplice che apportare modifiche su un sito WordPress.

GraphCMS differisce dalla maggior parte delle piattaforme CMS headless in quanto, invece di fornire contenuti tramite REST, lo fa tramite GraphQL. Questa nuova tecnologia è superiore a REST, in quanto ci consente di costruire query che toccano dati appartenenti a più modelli in un'unica richiesta.

Considera il seguente schema di modello:

Inviare

  • id: numero
  • titolo: String
  • contenuto: String
  • commenti: matrice di commenti

Commento

  • id: numero
  • nome: String
  • messaggio: String

I modelli di cui sopra hanno una relazione uno (Post) -to-molti (Commenti). Vediamo come possiamo recuperare un singolo record di post allegato con tutti i record di commenti collegati.

Se i dati si trovano in un database relazionale, è necessario costruire un'istruzione SLQ inefficiente o due istruzioni SQL per recuperare i dati in modo pulito. Se i dati sono archiviati in un database NoSQL, puoi utilizzare un ORM moderno come Vuex ORM per recuperare facilmente i dati per te, in questo modo:

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

Abbastanza semplice! È possibile passare facilmente questi dati tramite REST al client previsto. Ma ecco il problema: ogni volta che i requisiti dei dati cambiano all'estremità del client, sarai costretto a tornare al codice di back-end per aggiornare l'endpoint API esistente o crearne uno nuovo che fornisca il set di dati richiesto. Questo processo avanti e indietro è faticoso e ripetitivo.

E se, a livello di cliente, potessi semplicemente chiedere i dati di cui hai bisogno e il back-end te li fornirà, senza che tu faccia un lavoro extra? Bene, questo è lo scopo di GraphQL.

Prerequisiti

Prima di iniziare, vorrei sottolineare che questa è una guida per utenti di livello intermedio e avanzato. Non andrò oltre le basi, ma piuttosto ti mostrerò come creare rapidamente un blog Vue.js utilizzando GraphCMS come back-end. Dovrai essere competente nelle seguenti aree:

  • JavaScript ES6 e ES7
  • Vue.js (utilizzando la versione 3 della CLI)
  • GraphQL

Questo è tutto ciò che devi sapere per iniziare con questo tutorial. Inoltre, un background nell'uso di REST sarà fantastico, poiché farò riferimento molto a questo. Se desideri un aggiornamento, questo articolo potrebbe aiutarti: "REST 2.0 è qui e il suo nome è GraphQL".

Informazioni sul progetto

Costruiremo un'applicazione per blog molto semplice con un sistema di commenti di base. Di seguito sono riportati i link che puoi visitare per verificare il progetto completato:

Tieni presente che nella demo è stato utilizzato un token di sola lettura e di conseguenza il sistema dei commenti non funzionerà. Affinché funzioni, dovrai fornire il token di autorizzazione OPEN e l'endpoint secondo le istruzioni di questo tutorial.

Crea database di progetto GraphCMS

Vai al GraphCMS sito web e fare clic sul pulsante "Inizia a costruire gratuitamente". Verrai indirizzato alla loro pagina di registrazione.

Iscrizione a GraphCMS

Iscriviti utilizzando il tuo metodo preferito. Una volta completato il processo di autenticazione e verifica dell'account, dovresti essere in grado di accedere alla dashboard principale.

La dashboard principale di GraphCMS

Nell'esempio sopra, ho già creato un progetto chiamato "BlogDB". Vai avanti e creane uno nuovo e chiamalo come vuoi. Dopo aver inserito il nome, puoi lasciare il resto dei campi nei valori predefiniti. Clic Creare e verrai reindirizzato al loro piano di progetto.

Piani GraphCMS

Ai fini di questo tutorial, seleziona il piano sviluppatore gratuito, quindi fai clic su Continua. Verrai indirizzato alla dashboard del progetto, che assomiglia a questo:

Il dashboard del progetto GraphCMS

Vai al Schema tab. Creeremo i seguenti modelli, ciascuno con i seguenti campi:

Categoria

  • nome: testo a riga singola, obbligatorio, univoco

Inviare

  • slug: testo a riga singola, obbligatorio, unico
  • titolo: testo a riga singola, obbligatorio, unico
  • contenuto: testo su più righe

Commento

  • nome: testo a riga singola, obbligatorio
  • messaggio: testo su più righe, obbligatorio

Usa il Crea modello pulsante per creare modelli. Sul lato destro, dovresti trovare un pannello nascosto per i campi, che viene attivato facendo clic su Campi pulsante. Trascina il tipo di campo appropriato sul pannello del modello. Ti verrà presentato un modulo per compilare gli attributi del tuo campo. Nota in fondo c'è un pulsante rosa etichettato Avanzate. Facendo clic su di esso si espanderà il pannello per fornire più attributi di campo che è possibile abilitare.

Attributi di campo nella scheda Avanzate

Successivamente, dovrai aggiungere la relazione tra i modelli come segue:

  • Post> Categorie (molti a molti)
  • Pubblica> Commenti (uno a molti)

Usa il Riferimento campo per definire questa relazione. Puoi aggiungere questo campo a qualsiasi lato; GraphCMS creerà automaticamente il campo della relazione opposta nel modello di riferimento. Quando hai completato la definizione dei modelli, dovresti avere qualcosa del genere:

Modelli GraphCMS

Ora hai completato la prima parte. Forniamo ora alcuni dati ai nostri modelli.

Migrazione dei dati GraphQL

Per aggiungere contenuto ai tuoi modelli, puoi semplicemente fare clic su Soddisfare scheda nella dashboard del progetto dove puoi creare nuovi record per ciascuno dei tuoi modelli. Tuttavia, se ritieni che questo sia un metodo lento, sarai felice di sapere che ho creato uno strumento di migrazione GraphCMS che copia i dati dai file CSV e li carica nel tuo database GraphCMS. Puoi trovare il progetto qui in questo Repository GitHub. Per iniziare a utilizzare il progetto, scaricalo semplicemente nel tuo spazio di lavoro in questo modo:

git clone [email protected]:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

Successivamente, dovrai prendere l'endpoint e il token dell'API del tuo progetto GraphCMS dal dashboard impostazioni pagina. Dovrai creare un nuovo token. Per il livello di autorizzazione, utilizzare OPEN, poiché ciò consentirà allo strumento di eseguire operazioni di lettura e scrittura sul database GraphCMS. Crea un file chiamato .env e metterlo alla radice del progetto:

ENDPOINT=<Put api endpoint here>
TOKEN=<Put token with OPEN permission here>

Successivamente, potrebbe essere necessario popolare i file CSV nella cartella dei dati con i propri. Di seguito sono riportati alcuni dati di esempio utilizzati:

// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty

Puoi modificare il contenuto se lo desideri. Assicurati di non toccare la riga superiore, altrimenti cambierai i nomi dei campi. Si prega di notare, per la colonna categories, Ho usato la pipa | carattere come delimitatore.

Per caricare i dati CSV nel database GraphCMS, eseguire i seguenti comandi in questo ordine:

npm run categories
npm run posts

Ogni script stamperà i record che sono stati caricati correttamente. Il motivo per cui abbiamo caricato categories il primo è così che il file posts record possono collegarsi con successo a esistenti category record.

Se vuoi pulire il tuo database, puoi eseguire il seguente comando:

npm run reset

Questo script eliminerà tutti i contenuti del tuo modello. Riceverai un rapporto che indica quanti record sono stati eliminati per ogni modello.

Spero che trovi lo strumento a portata di mano. Torna alla dashboard per confermare i dati per il file Posts e Categories sono stati caricati con successo.

Dopo aver curato il back-end, iniziamo a costruire la nostra interfaccia del blog front-end.

Creazione del front-end del blog utilizzando Vue.js

Come accennato in precedenza, costruiremo un'applicazione per blog molto semplice alimentata da un back-end del database GraphCMS. Avvia un terminale e vai al tuo spazio di lavoro.

Se non hai installato Vue CLI, fallo ora:

npm install -g @vue/cli

Quindi crea un nuovo progetto:

vue create vue-graphcms

Scegli di selezionare manualmente le funzionalità, quindi seleziona le seguenti opzioni:

  • Caratteristiche: Babel, Router
  • Modalità cronologia router: Y
  • ESLint solo con prevenzione degli errori
  • Lanugine al salvataggio
  • Posizionamento del file di configurazione: file di configurazione dedicati
  • Salva preset: a tua scelta

Una volta completato il processo di creazione del progetto, passare alla directory del progetto e installare le seguenti dipendenze:

npm install bootstrap-vue axios

Impostare Bootstrap-Vue nel nostro progetto, semplicemente apri src/main.js e aggiungi il codice seguente:

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

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

Successivamente, dobbiamo iniziare a definire la struttura del nostro progetto. Nel src/components cartella, elimina i file esistenti e crea questi nuovi:

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

Nel src/views cartella, elimina About.vue e crea un nuovo file chiamato PostView.vue. Come visto dalla demo, avremo diverse pagine di categoria ciascuna con un elenco di post filtrati per categoria. Tecnicamente, ci sarà solo una pagina che mostrerà un diverso elenco di post in base al nome di un percorso attivo. Il PostList il componente filtrerà i post in base al percorso corrente.

Per prima cosa impostiamo i percorsi. Aperto src/router.js e sostituisci il codice esistente con questo:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Post from "./views/PostView.vue";

Vue.use(Router);

export default new Router(
  mode: "history",
  base: process.env.BASE_URL,
  linkActiveClass: "active",
  routes: [
    
      path: "https://www.sitepoint.com/",
      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
    
  ]
);

Ora che abbiamo i nostri percorsi, impostiamo il nostro menu di navigazione. Aperto src/App.vue e sostituisci il codice esistente con questo:

<template>
  <div id="app">
    <b-navbar toggleable="md" type="dark" variant="info">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand href="#">GraphCMS Vue</b-navbar-brand>
      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <router-link  class="nav-link" to="/" exact>Home</router-link>
          <router-link  class="nav-link" to="/food">Food</router-link>
          <router-link  class="nav-link" to=

Potresti anche essere interessato a