Come costruire un backend per NuxtJS?

introduzione in questo tutorial, imparerai come costruire un backend completo per un'applicazione nuxtjs utilizzando back4app esploreremo l'integrazione delle funzionalità essenziali di back4app come la gestione del database, le funzioni cloud code, le api rest e graphql, l'autenticazione degli utenti e le query in tempo reale (live queries) per creare un backend sicuro, scalabile e robusto che comunica senza problemi con il tuo frontend nuxtjs vedrai anche come la rapida configurazione e l'ambiente intuitivo di back4app possano ridurre drasticamente il tempo e lo sforzo rispetto alla configurazione manuale di server e database durante il percorso, acquisirai esperienza pratica con funzionalità chiave, inclusi avanzati strumenti di sicurezza, pianificazione di attività con cloud jobs e configurazione di webhook per integrazioni esterne alla fine di questo tutorial, sarai ben preparato per migliorare questa configurazione di base in un'applicazione pronta per la produzione, o per incorporare facilmente logica personalizzata e api di terze parti secondo necessità requisiti per completare questo tutorial, avrai bisogno di un account back4app e un nuovo progetto back4app iniziare con back4app https //www back4app com/docs/get started/new parse app se non hai un account, puoi crearne uno gratuitamente segui la guida sopra per preparare il tuo progetto ambiente di sviluppo nuxtjs di base puoi configurarlo utilizzando crea nuxt app https //nuxtjs org/docs/get started/installation o uno strumento simile assicurati di avere node js installato sul tuo computer node js (versione 14 o superiore) installato avrai bisogno di node js per installare pacchetti npm e per eseguire server di sviluppo locali installare node js https //nodejs org/en/download/ familiarità con javascript e concetti di base di nuxtjs documentazione ufficiale di nuxtjs https //nuxtjs org/docs se sei nuovo in nuxtjs, rivedi la documentazione ufficiale o un tutorial per principianti prima di iniziare assicurati di avere tutti questi requisiti in ordine prima di iniziare avere il tuo progetto back4app configurato e il tuo ambiente locale nuxtjs pronto ti aiuterà a seguire più facilmente passo 1 – configurare il progetto back4app crea un nuovo progetto il primo passo per costruire il tuo backend nuxtjs su back4app è creare un nuovo progetto se non ne hai già creato uno, segui questi passaggi accedi al tuo account back4app clicca sul pulsante “nuova app” nel tuo dashboard di back4app dai un nome alla tua app (ad esempio, “nuxtjs backend tutorial”) una volta creato il progetto, lo vedrai elencato nel tuo dashboard di back4app questo progetto sarà la base per tutte le configurazioni del backend discusse in questo tutorial collegare il parse sdk back4app si basa sulla parse platform per gestire i tuoi dati, fornire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora collegare la tua applicazione nuxtjs a back4app implica installare il pacchetto npm parse e inizializzarlo con le credenziali dal tuo dashboard di back4app recupera le tue chiavi parse nel tuo dashboard di back4app, vai alla sezione “impostazioni app” o “sicurezza e chiavi” della tua app per trovare il tuo id applicazione e chiave javascript troverai anche il url del server parse (spesso nel formato https //parseapi back4app com ) installa il parse sdk nel tuo progetto nuxtjs npm install parse se stai usando yarn, puoi installarlo con yarn add parse inizializza parse nella tua applicazione nuxtjs un approccio conveniente è creare un plugin nuxt per configurare parse nel tuo progetto nuxt, crea un file (ad esempio, parse client js ) nella directory plugins e aggiungi quanto segue plugins/parse client js import parse from 'parse' export default ({}, inject) => { // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key') parse serverurl = 'https //parseapi back4app com' // inject parse globally so you can access it as $parse anywhere in nuxt inject('parse', parse) } successivamente, apri il tuo nuxt config js file e aggiungi questo plugin in modo che venga caricato sul lato client export default { // plugins \[ { src ' /plugins/parse client js', mode 'client' } ], // } completando questo passaggio, hai stabilito una connessione sicura tra il tuo front end nuxtjs e il backend di back4app tutte le richieste e le transazioni di dati vengono instradate in modo sicuro attraverso questo sdk, riducendo la complessità delle chiamate rest o graphql manuali (anche se puoi comunque usarle quando necessario) passo 2 – configurazione del database salvataggio e query dei dati con il tuo progetto back4app configurato e l'sdk parse integrato nella tua app nuxt, puoi ora iniziare a salvare e recuperare dati il modo più semplice per creare un record è utilizzare la classe parse object ad esempio, puoi creare un composable o un metodo di store per gestire le operazioni sui dati // example create a todo item export const createtodoitem = async (title, iscompleted) => { const todo = this $parse object extend('todo') const todo = new todo() todo set('title', title) todo set('iscompleted', iscompleted) try { const savedtodo = await todo save() console log('todo saved successfully ', savedtodo) return savedtodo } catch (error) { console error('error saving todo ', error) } } // example query all todo items export const fetchtodos = async () => { const todo = this $parse object extend('todo') const query = new this $parse query(todo) try { const results = await query find() console log('fetched todo items ', results) return results } catch (error) { console error('error fetching todos ', error) } } in alternativa, puoi utilizzare gli endpoint api rest di back4app curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo back4app fornisce anche un'interfaccia graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } queste diverse opzioni ti consentono di integrare le operazioni sui dati nel modo che meglio si adatta al tuo processo di sviluppo sia attraverso il parse sdk, rest o graphql progettazione dello schema e tipi di dati per impostazione predefinita, parse consente la creazione di schemi al volo , ma puoi anche definire le tue classi e tipi di dati nel dashboard di back4app per avere maggiore controllo naviga nella sezione “database” nel tuo dashboard di back4app crea una nuova classe (ad esempio, “todo”) e aggiungi colonne pertinenti, come titolo (string) e iscompleted (boolean) back4app supporta anche vari tipi di dati string , number , boolean , object , date , file , pointer , array , relation , geopoint , e polygon puoi scegliere il tipo appropriato per ciascun campo se preferisci, puoi anche lasciare che parse crei automaticamente queste colonne quando salvi per la prima volta un oggetto dalla tua app nuxt back4app offre un agente ai che può aiutarti a progettare il tuo modello di dati apri l'agente ai dal tuo dashboard dell'app o dal menu descrivi il tuo modello di dati in linguaggio semplice (ad esempio, “per favore, crea una nuova app todo su back4app con uno schema di classe completo ”) lascia che l'agente ai crei lo schema per te utilizzare l'agente ai può farti risparmiare tempo nella configurazione della tua architettura dati e garantire coerenza nella tua applicazione dati relazionali se hai dati relazionali ad esempio, un oggetto categoria che punta a più elementi todo puoi usare puntatori o relazioni in parse ad esempio // linking a task to a category with a pointer export const createtaskforcategory = async (categoryobjectid, title) => { const todo = this $parse object extend('todo') const todo = new todo() // construct a pointer to the category const category = this $parse object extend('category') const categorypointer = new category() categorypointer id = categoryobjectid // set fields todo set('title', title) todo set('category', categorypointer) try { return await todo save() } catch (err) { console error('error creating task with category relationship ', err) } } quando interroghi, puoi anche includere i dati del puntatore const query = new this $parse query('todo') query include('category') const todoswithcategory = await query find() questa include('category') chiamata recupera i dettagli della categoria insieme a ciascun todo, rendendo i tuoi dati relazionali facilmente accessibili query live per aggiornamenti in tempo reale, back4app fornisce query live nella tua app nuxtjs, puoi iscriverti ai cambiamenti in una classe specifica abilita le query live nel tuo dashboard di back4app sotto le impostazioni del server assicurati che “query live” sia attivato inizializza una sottoscrizione a una query live nel tuo parse client js o file simile plugins/parse client js import parse from 'parse' export default ({}, inject) => { // replace with your back4app credentials parse initialize('your application id', 'your javascript key') parse serverurl = 'https //parseapi back4app com' // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io' inject('parse', parse) } ora, nel tuo codice export const subscribetotodos = async (callback) => { const query = new this $parse query('todo') const subscription = await query subscribe() subscription on('create', (newtodo) => { console log('new todo created ', newtodo) callback('create', newtodo) }) subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo) callback('update', updatedtodo) }) subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo) callback('delete', deletedtodo) }) return subscription } iscrivendoti, ricevi notifiche in tempo reale ogni volta che un nuovo todo viene creato, aggiornato o eliminato questa funzionalità è particolarmente preziosa per app collaborative o dinamiche in cui più utenti devono vedere i dati più recenti senza aggiornare la pagina passo 3 – applicare la sicurezza con acl e clp meccanismo di sicurezza di back4app back4app prende sul serio la sicurezza fornendo liste di controllo degli accessi (acl) e permessi a livello di classe (clp) queste funzionalità ti consentono di limitare chi può leggere o scrivere dati su base per oggetto o per classe, garantendo che solo gli utenti autorizzati possano modificare i tuoi dati liste di controllo degli accessi (acl) un acl è applicato a singoli oggetti per determinare quali utenti, ruoli o il pubblico possono eseguire operazioni di lettura/scrittura ad esempio export const createprivatetodo = async (title, owneruser) => { const todo = this $parse object extend('todo') const todo = new todo() todo set('title', title) // create an acl granting read/write access only to the owner const acl = new this $parse acl(owneruser) acl setpublicreadaccess(false) acl setpublicwriteaccess(false) todo setacl(acl) try { return await todo save() } catch (err) { console error('error saving private todo ', err) } } quando salvi l'oggetto, ha un acl che impedisce a chiunque tranne l'utente specificato di leggerlo o modificarlo permessi a livello di classe (clp) i clp governano i permessi predefiniti di un'intera classe, come se la classe sia leggibile o scrivibile pubblicamente, o se solo determinati ruoli possano accedervi vai al tuo dashboard di back4app , seleziona la tua app e apri la database sezione seleziona una classe (ad esempio, “todo”) apri le permessi a livello di classe tab configura i tuoi predefiniti, come “richiede autenticazione” per la lettura o la scrittura, o “nessun accesso” per il pubblico queste autorizzazioni impostano la base, mentre le acl affinano le autorizzazioni per singoli oggetti un modello di sicurezza robusto combina tipicamente sia clp (restrizioni ampie) che acl (restrizioni dettagliate per oggetto) per ulteriori informazioni vai a linee guida sulla sicurezza delle app passo 4 – scrivere e distribuire funzioni cloud il cloud code è una funzionalità dell'ambiente parse server che consente di eseguire codice javascript personalizzato sul lato server senza la necessità di gestire i propri server o infrastruttura scrivendo cloud code, puoi estendere il tuo backend back4app con logica aziendale aggiuntiva, validazioni, trigger e integrazioni che vengono eseguite in modo sicuro ed efficiente sul parse server come funziona quando scrivi cloud code, di solito posizioni le tue funzioni javascript, i trigger e eventuali moduli npm richiesti in un main js (o app js ) file questo file viene quindi distribuito al tuo progetto back4app, che viene eseguito all'interno dell'ambiente parse server poiché queste funzioni e trigger vengono eseguiti sul server, puoi fidarti di loro per gestire logiche riservate, elaborare dati sensibili o effettuare chiamate api solo backend processi che potresti non voler esporre direttamente al client tutto il cloud code per la tua app back4app viene eseguito all'interno del parse server gestito da back4app, quindi non devi preoccuparti della manutenzione del server, della scalabilità o della fornitura ogni volta che aggiorni e distribuisci il tuo file main js, il parse server in esecuzione viene aggiornato con il tuo codice più recente struttura del file main js un tipico main js potrebbe contenere dichiarazioni di require per eventuali moduli necessari (pacchetti npm, moduli node integrati o altri file di codice cloud) definizioni di funzioni cloud utilizzando parse cloud define() trigger come parse cloud beforesave() , parse cloud aftersave() , ecc moduli npm che hai installato (se necessario) ad esempio, potresti installare un pacchetto come axios per effettuare richieste http puoi quindi richiederlo (o importarlo) all'inizio del tuo file // main js // 1 import necessary modules and other cloud code files const axios = require('axios') const report = require(' /reports') // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url if (!url) { throw new error('url parameter is required') } const response = await axios get(url) return response data }) // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object if (!todo get('title')) { throw new error('todo must have a title') } }) con la possibilità di installare e utilizzare moduli npm, il cloud code diventa incredibilmente flessibile, consentendoti di integrarti con api esterne, eseguire trasformazioni di dati o eseguire logiche complesse lato server casi d'uso tipici logica aziendale ad esempio, puoi calcolare il punteggio di un utente in un gioco aggregando più proprietà degli oggetti e poi memorizzare automaticamente quei dati validazioni dei dati assicurati che determinati campi siano presenti o che un utente abbia le autorizzazioni corrette prima di salvare o eliminare un record trigger esegui azioni quando i dati cambiano (ad es , invia una notifica quando un utente aggiorna il proprio profilo) integrazioni connettiti con api o servizi di terze parti ad esempio, potresti integrare con gateway di pagamento, notifiche slack o piattaforme di email marketing direttamente dal cloud code applicazione della sicurezza aggiungi un ulteriore livello di sicurezza convalidando e sanitizzando i parametri di input nelle tue funzioni cloud code ad esempio, puoi assicurarti che i dati in arrivo corrispondano a formati specifici, rifiutare input non validi o dannosi e applicare regole di accesso basate su ruoli o autorizzazioni degli utenti prima di eseguire operazioni sensibili distribuisci la tua funzione di seguito è riportata una semplice funzione cloud code che calcola la lunghezza di una stringa di testo inviata dal client main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params if (!text) { throw new error('no text provided') } return { length text length } }) distribuzione tramite il back4app cli 1 installa il cli per linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash per windows scarica il b4a exe file dalla pagina delle versioni https //github com/back4app/parse cli/releases 2 configura la tua chiave account b4a configure accountkey 3 distribuisci il tuo codice cloud b4a deploy distribuzione tramite il dashboard nel dashboard della tua app, vai su cloud code > funzioni copia/incolla la funzione nell' main js editor clicca su distribuisci chiamare la tua funzione dalla tua applicazione nuxtjs utilizzando il parse sdk export const gettextlength = async (text) => { try { const result = await this $parse cloud run('calculatetextlength', { text }) console log('text length ', result length) } catch (err) { console error('error calling cloud function ', err) } } puoi anche chiamarlo tramite rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength o tramite graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } questa flessibilità ti consente di integrare la tua logica personalizzata nel tuo frontend nuxtjs o in qualsiasi altro client che supporti rest o graphql passo 5 – configurazione dell'autenticazione utente autenticazione utente in back4app back4app sfrutta la parse user classe come base per l'autenticazione per impostazione predefinita, parse gestisce l'hashing delle password, i token di sessione e lo storage sicuro questo significa che non devi configurare manualmente flussi di sicurezza complessi impostazione dell'autenticazione utente in un'applicazione nuxt, puoi creare un nuovo utente con export const signupuser = async (username, password, email) => { const user = new this $parse user() user set('username', username) user set('password', password) user set('email', email) try { await user signup() console log('user signed up successfully!') } catch (error) { console error('error signing up user ', error) } } accedi a un utente esistente export const loginuser = async (username, password) => { try { const user = await this $parse user login(username, password) console log('user logged in ', user) } catch (error) { console error('error logging in user ', error) } } via rest, un login potrebbe apparire così curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login gestione delle sessioni dopo un login riuscito, parse crea un token di sessione che viene memorizzato nell'oggetto utente nella tua app nuxt, puoi accedere all'utente attualmente connesso const currentuser = this $parse user current() if (currentuser) { console log('currently logged in user ', currentuser getusername()) } else { console log('no user is logged in') } parse gestisce automaticamente le sessioni basate su token in background, ma puoi anche gestirle o revocarle manualmente questo è utile quando hai bisogno di disconnetterti await this $parse user logout() integrazione del login sociale back4app e parse possono integrarsi con i provider oauth più popolari, come google o facebook , installando pacchetti aggiuntivi o utilizzando adattatori esistenti ad esempio, puoi configurare un login facebook impostando il tuo facebook app id e utilizzando parse facebookutils login() le istruzioni dettagliate variano, quindi fai riferimento alla documentazione del login sociale https //www back4app com/docs/platform/sign in with apple const facebooklogin = async () => { try { const user = await this $parse facebookutils login('email') console log(user existed() ? 'user logged in' 'user signed up and logged in') } catch (error) { console error('error logging in with facebook ', error) } } verifica email e reimpostazione password per abilitare la verifica email e la reimpostazione della password naviga nelle impostazioni email nel tuo dashboard di back4app abilita la verifica email per garantire che i nuovi utenti verifichino la proprietà dei loro indirizzi email configura l'indirizzo del mittente , i modelli email e il tuo dominio personalizzato se desiderato queste funzionalità migliorano la sicurezza dell'account e l'esperienza dell'utente validando la proprietà delle email da parte degli utenti e fornendo un metodo sicuro per il recupero della password passo 6 – gestione dello storage dei file caricamento e recupero dei file parse include la parse file classe per gestire il caricamento dei file, che back4app memorizza in modo sicuro export const uploadimage = async (file) => { // file is typically from an \<input type="file" > in a nuxt component const name = file name const parsefile = new this $parse file(name, file) try { const savedfile = await parsefile save() console log('file saved ', savedfile url()) return savedfile url() } catch (err) { console error('error uploading file ', err) } } per allegare il file a un oggetto nel database export const createphotoobject = async (file) => { const photo = this $parse object extend('photo') const photo = new photo() const parsefile = new this $parse file(file name, file) photo set('imagefile', parsefile) return await photo save() } recuperare l'url del file è semplice const imagefile = photo get('imagefile') const imageurl = imagefile url() // use imageurl as needed sicurezza dei file parse server fornisce configurazioni flessibili per gestire la sicurezza del caricamento dei file il seguente esempio mostra come puoi impostare i permessi per controllare chi può caricare file sul server { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic quando impostato su true, consente a chiunque, indipendentemente dallo stato di autenticazione, di caricare file enableforanonymoususer controlla se gli utenti anonimi (non registrati) possono caricare file enableforauthenticateduser specifica se solo gli utenti autenticati possono caricare file questo è ideale per garantire che solo gli utenti fidati abbiano accesso a questa funzionalità passo 7 – pianificazione dei compiti con cloud jobs lavori nel cloud lavori nel cloud in back4app ti consente di pianificare ed eseguire attività di routine sul tuo backend come la pulizia dei dati obsoleti o l'invio di un'email di riepilogo giornaliero un tipico lavoro nel cloud potrebbe apparire così // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo') const query = new parse query(todo) // for example, remove todos older than 30 days const now = new date() const thirty days = 30 24 60 60 1000 const cutoff = new date(now thirty days) query lessthan('createdat', cutoff) try { const oldtodos = await query find({ usemasterkey true }) await parse object destroyall(oldtodos, { usemasterkey true }) return `deleted ${oldtodos length} old todos ` } catch (err) { throw new error('error during cleanup ' + err message) } }) distribuisci il tuo codice cloud con il nuovo lavoro (tramite cli o la dashboard) vai alla dashboard di back4app > impostazioni app > impostazioni server > lavori in background pianifica il lavoro per essere eseguito quotidianamente o a qualsiasi intervallo che soddisfi le tue esigenze i lavori nel cloud ti consentono di automatizzare la manutenzione in background o altri processi periodici senza richiedere intervento manuale passo 8 – integrazione dei webhook i webhook consentono alla tua app back4app di inviare richieste http a un servizio esterno ogni volta che si verificano determinati eventi questo è potente per l'integrazione con sistemi di terze parti come gateway di pagamento (ad es , stripe), strumenti di email marketing o piattaforme di analisi naviga nella configurazione dei webhook nel tuo dashboard di back4app > altro > webhooks e poi clicca su aggiungi webhook imposta un endpoint (ad es , https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configura i trigger per specificare quali eventi nelle tue classi back4app o nelle funzioni cloud code attiveranno il webhook ad esempio, se vuoi notificare un canale slack ogni volta che viene creato un nuovo todo crea un'app slack che accetta webhook in entrata copia l'url del webhook di slack nel tuo dashboard di back4app, imposta l'endpoint su quell'url di slack per l'evento “nuovo record nella classe todo ” puoi anche aggiungere intestazioni http personalizzate o payload se necessario puoi anche definire webhook nel cloud code effettuando richieste http personalizzate nei trigger come beforesave, aftersave passo 9 – esplorare il pannello di amministrazione di back4app l' app di amministrazione di back4app è un'interfaccia di gestione basata sul web progettata per utenti non tecnici per eseguire operazioni crud e gestire attività di routine sui dati senza scrivere codice fornisce un'interfaccia centrata sul modello , facile da usare che semplifica l'amministrazione del database, la gestione dei dati personalizzati e le operazioni a livello aziendale abilitare l'app di amministrazione abilitalo andando su app dashboard > altro > app di amministrazione e cliccando sul pulsante “abilita app di amministrazione ” accedi utilizzando le credenziali di amministratore che hai creato per accedere al tuo nuovo dashboard dell'app admin una volta abilitata, l'app admin di back4app rende facile visualizzare, modificare o rimuovere record dal tuo database senza richiedere l'uso diretto del parse dashboard o del codice backend con controlli di accesso configurabili, puoi condividere in modo sicuro questa interfaccia con membri del team o clienti che necessitano di un modo chiaro e intuitivo per gestire i dati conclusione seguendo questo tutorial completo, hai creato un backend sicuro per un'app nuxtjs su back4app configurato un database con schemi di classe, tipi di dati e relazioni integrato query in tempo reale (live queries) per aggiornamenti immediati dei dati applicate misure di sicurezza utilizzando acl e clp per proteggere e gestire l'accesso ai dati implementato cloud code funzioni per eseguire logica aziendale personalizzata sul lato server impostata l'autenticazione degli utenti con supporto per la verifica dell'email e il ripristino della password gestiti caricamenti di file e recupero, con controlli di sicurezza dei file opzionali pianificati cloud jobs per attività di background automatizzate utilizzati webhook per integrarsi con servizi esterni esplorato il pannello di amministrazione di back4app per la gestione dei dati con un solido frontend nuxtjs e un robusto backend back4app, sei ora ben attrezzato per sviluppare applicazioni ricche di funzionalità, scalabili e sicure continua a esplorare funzionalità più avanzate, integra la tua logica aziendale e sfrutta la potenza di back4app per risparmiare innumerevoli ore nella gestione di server e database buon coding! prossimi passi costruisci un'app nuxtjs pronta per la produzione estendendo questo backend per gestire modelli di dati più complessi, strategie di caching e ottimizzazioni delle prestazioni integra funzionalità avanzate come flussi di autenticazione specializzati, controllo degli accessi basato sui ruoli o api esterne (come i gateway di pagamento) controlla la documentazione ufficiale di back4app per approfondimenti su sicurezza avanzata, ottimizzazione delle prestazioni e analisi dei log esplora altri tutorial su applicazioni di chat in tempo reale, dashboard iot o servizi basati sulla posizione puoi combinare le tecniche apprese qui con api di terze parti per creare applicazioni complesse e reali