How to Develop a CRUD App with Vue.js?

introduzione in questa guida, scoprirai come costruire un'applicazione crud (crea, leggi, aggiorna, elimina) completamente funzionale utilizzando vue js sfrutteremo la potenza di back4app per gestire il tuo backend senza sforzo questo tutorial ti guiderà nella configurazione di un progetto back4app, nella creazione di un modello di dati dinamico e nell'implementazione delle operazioni crud con vue js inizialmente, configurerai un progetto back4app chiamato basic crud app vue , fornendo un robusto database non relazionale per la tua app progetterai il tuo modello di dati configurando collezioni e campi manualmente o utilizzando l'intelligente agente ai di back4app successivamente, gestirai i tuoi dati con l'app admin di back4app—un'interfaccia intuitiva, drag and drop—che ti consente di creare, leggere, aggiornare ed eliminare record con facilità infine, integrerai il tuo frontend vue js con back4app tramite chiamate api rest (utilizzando axios) per eseguire operazioni crud sicure ed efficienti entro la fine di questo tutorial, avrai un'applicazione vue js pronta per la produzione che esegue funzioni crud essenziali insieme a un'autenticazione utente sicura e gestione dei dati punti chiave impara a costruire un'app crud basata su vue js supportata da un backend scalabile comprendi come strutturare un backend flessibile e collegarlo al tuo progetto vue js scopri come utilizzare l'admin app intuitiva di back4app per operazioni crud senza soluzione di continuità esplora tecniche di distribuzione, inclusa la containerizzazione docker, per la tua applicazione vue js requisiti preliminari prima di iniziare, assicurati di avere un account back4app con un nuovo progetto impostato hai bisogno di aiuto? vedi iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo vue js usa il vue cli o il tuo ide preferito come vscode conoscenze di base di vue js, javascript moderno e api rest rinfresca le tue conoscenze sulla documentazione di vue js https //vuejs org/guide/introduction html se necessario passo 1 – configurazione del progetto creazione di un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” dalla tua dashboard nomina il tuo progetto basic crud app vue e segui le istruzioni per completare la configurazione crea nuovo progetto dopo aver creato il progetto, apparirà nella tua dashboard, ponendo le basi per il tuo backend passo 2 – progettazione del modello dati strutturare i tuoi dati per questa applicazione crud, definirai più collezioni all'interno del tuo progetto back4app gli esempi qui sotto illustrano le collezioni principali e i loro campi necessari per la funzionalità crud 1\ collezione articoli questa collezione memorizza i dettagli su ciascun articolo campo tipo di dato descrizione id objectid id unico generato automaticamente titolo stringa il nome dell'oggetto descrizione stringa un breve riassunto dell'elemento creatoil data timestamp della creazione dell'elemento aggiornatoa data timestamp dell'ultimo aggiornamento 2\ raccolta utenti questa collezione gestisce le credenziali degli utenti e i dati di autenticazione campo tipo di dato descrizione id objectid id unico generato automaticamente nome utente stringa nome utente unico per l'utente email stringa indirizzo email unico hashpassword stringa password crittografata per il login creatoil data timestamp di creazione dell'account aggiornatoa data ultimo aggiornamento dell'account puoi aggiungere queste collezioni e campi manualmente nel dashboard di back4app crea nuova classe puoi aggiungere campi selezionando il tipo di dati, fornendo il nome del campo, impostando un valore predefinito e contrassegnandolo come obbligatorio se necessario crea colonna utilizzare l'agente ai di back4app per la configurazione dello schema l'agente ai integrato di back4app può generare automaticamente il tuo schema dati in base alla tua descrizione questo strumento accelera la configurazione e garantisce che il tuo modello soddisfi i requisiti crud come utilizzare l'agente ai apri l'agente ai accedi al tuo dashboard di back4app e naviga verso l'agente ai nelle impostazioni del tuo progetto descrivi il tuo modello dati inserisci un prompt dettagliato che descriva le collezioni e i campi di cui hai bisogno rivedi e conferma una volta che l'agente ai genera uno schema proposto, rivedilo e conferma per implementare la configurazione esempio di prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) questo approccio guidato dall'ia fa risparmiare tempo e garantisce un modello di dati ottimizzato e coerente passo 3 – abilitare l'app admin e gestire le operazioni crud panoramica dell'app admin l'app admin di back4app fornisce un'interfaccia senza codice per la gestione del backend con le sue funzionalità di trascinamento e rilascio, puoi eseguire senza sforzo operazioni crud come creare, leggere, aggiornare e eliminare record attivare l'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca “abilita app admin ” imposta le credenziali di amministratore creando il tuo primo account admin questo processo stabilisce anche ruoli (come b4aadminuser ) e collezioni di sistema abilita app admin dopo aver abilitato, accedi all'app admin per iniziare a gestire i tuoi dati dashboard dell'app admin gestire le operazioni crud tramite l'app admin all'interno dell'app admin, puoi creare nuovi record clicca su “aggiungi record” in qualsiasi collezione (ad es , articoli) per inserire nuovi dati modificare o visualizzare i record seleziona un record per visualizzarne i dettagli o modificare i suoi campi eliminare i record rimuovi i record che non sono più necessari questa interfaccia semplifica la gestione dei dati e migliora l'esperienza complessiva dell'utente passaggio 4 – collegare la tua applicazione vue js con back4app una volta che il tuo backend è pronto, è tempo di collegare la tua app vue js con back4app utilizzare le chiamate api rest con axios utilizzeremo le chiamate api rest tramite axios per eseguire operazioni crud installa axios esegui il seguente comando nella directory del tuo progetto npm install axios configura axios crea un'istanza axios in un file (ad esempio, api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' } }); export default apiclient; implementa i metodi crud nei componenti vue ecco un esempio di come recuperare e creare elementi // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('errore nel recupero degli elementi ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('errore nell'aggiunta dell'elemento ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('errore nell'aggiornamento dell'elemento ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('errore nella cancellazione dell'elemento ', error)); } }; integra questi metodi api nei tuoi componenti vue per gestire i dati della tua app passo 5 – sicurezza del tuo backend configurazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando le acl per i tuoi record ad esempio, per creare un elemento che solo il suo proprietario può visualizzare o modificare import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } impostazione delle autorizzazioni a livello di classe (clp) utilizza il tuo dashboard di back4app per configurare i clp in modo che solo gli utenti autenticati possano accedere a determinate collezioni questo garantisce che il tuo backend rimanga sicuro per impostazione predefinita passo 6 – implementazione dell'autenticazione utente impostazione della registrazione e accesso utente back4app sfrutta una collezione di utenti integrata per l'autenticazione nella tua app vue js, puoi gestire la registrazione e l'accesso degli utenti utilizzando chiamate api rest ecco come // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; impostazione delle autorizzazioni a livello di classe (clp) questa configurazione consente anche di gestire la gestione delle sessioni, il ripristino delle password e ulteriori funzionalità di autenticazione passo 7 – distribuzione della tua applicazione vue js back4app semplifica il processo di distribuzione puoi distribuire la tua applicazione vue js utilizzando vari metodi, inclusa la containerizzazione docker 7 1 costruire la tua applicazione vue js compila e bundla usa il vue cli per compilare la tua app npm run build rivedi la build conferma che la cartella di output (di solito dist/ ) contenga tutti i file necessari 7 2 panoramica della struttura del progetto una struttura comune di un progetto vue js potrebbe apparire così basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 dockerizzare la tua app vue js se preferisci la distribuzione containerizzata, includi un dockerfile nella radice del tuo progetto \# use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 distribuzione con back4app web deployment collega il tuo repository github assicurati che il tuo progetto vue js sia ospitato su github configura la distribuzione nel dashboard di back4app, seleziona l' web deployment opzione, collega il tuo repository (ad es , basic crud app vue ), e scegli il branch desiderato imposta i comandi di build specifica il tuo comando di build (ad es , npm run build ) e indica la cartella di output (ad es , dist ) distribuisci clicca su distribuisci e guarda i log fino a quando la tua app non va online passo 8 – considerazioni finali e prossimi passi congratulazioni! hai costruito un'applicazione crud basata su vue js integrata con back4app hai configurato un progetto chiamato basic crud app vue , impostato collezioni per articoli e utenti, e utilizzato l'app admin di back4app per la gestione dei dati inoltre, hai collegato il tuo frontend vue js tramite chiamate api rest e stabilito misure di sicurezza prossimi passi espandi la tua applicazione incorpora funzionalità come filtri avanzati, visualizzazioni dettagliate degli articoli o aggiornamenti in tempo reale migliora la funzionalità del backend esplora funzioni cloud, integra api esterne o implementa controlli di accesso basati sui ruoli continua a imparare fai riferimento alla documentazione di back4app https //www back4app com/docs e risorse aggiuntive per perfezionare ulteriormente la tua app buon coding e divertiti a costruire la tua applicazione crud in vue js!