Costruire un'applicazione CRUD di base con Mithril.js: un tutorial dettagliato

panoramica questa guida ti accompagnerà nella creazione di un'applicazione crud (crea, leggi, aggiorna e cancella) utilizzando mithril js durante questo tutorial, imparerai a configurare un progetto back4app intitolato basic crud app mithriljs per servire come un potente backend per la tua web app progetteremo uno schema dati efficiente, lo gestiremo tramite il pannello di amministrazione di back4app e integreremo il tuo frontend mithril js utilizzando chiamate api rest cosa imparerai come impostare un sistema crud che gestisca i dati in modo affidabile utilizzando un backend robusto strategie per costruire un design di database scalabile e collegarlo a un'applicazione mithril js utilizzare l'interfaccia di amministrazione intuitiva di back4app per eseguire azioni crud metodi di distribuzione, inclusa la containerizzazione docker, per rendere rapidamente la tua applicazione operativa requisiti prima di iniziare, ti preghiamo di confermare di avere un account back4app e un progetto attivo per assistenza, fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo mithril js puoi includere mithril tramite npm o un cdn assicurati di avere node js (v14+) installato conoscenze fondamentali di javascript, mithril js e api restful per ulteriori indicazioni, dai un'occhiata alla documentazione di mithril js https //mithril js org/ passo 1 – inizializzare il tuo progetto impostare un nuovo progetto back4app accedi al tuo account back4app clicca sul nuova app pulsante dalla tua dashboard fornisci il nome del progetto basic crud app mithriljs e segui i passaggi guidati crea nuovo progetto una volta configurato, il tuo progetto sarà elencato nella tua dashboard, fungendo da hub backend per la tua applicazione passo 2 – creazione dello schema del database costruzione del modello dati per questa app crud, progetterai un paio di collezioni chiave di seguito è riportato un schema per creare collezioni con i rispettivi campi per gestire efficacemente le operazioni crud 1 raccolta di articoli questa raccolta contiene i dettagli per ogni articolo campo tipo scopo id objectid identificatore unico generato automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa breve riassunto sull'oggetto creato il data timestamp di creazione aggiornato a data timestamp per l'ultimo aggiornamento 2 raccolta utenti questa raccolta gestisce i profili utente e i dettagli di autenticazione campo tipo scopo id objectid identificatore unico generato automaticamente nome utente stringa nome unico dell'utente email stringa indirizzo email unico dell'utente hash password stringa password hashata per un'autenticazione sicura creato il data timestamp quando l'utente è stato registrato aggiornato a data timestamp per eventuali modifiche puoi aggiungere manualmente queste collezioni e campi tramite il dashboard di back4app creando nuove classi e definendo ciascuna colonna di conseguenza crea nuova classe per aggiungere campi, seleziona semplicemente il tipo di dato appropriato, fornisci un nome, imposta i valori predefiniti e indica se è richiesto crea colonna sfruttare l'agente ai di back4app per l'automazione dello schema l'agente ai integrato su back4app semplifica la creazione dello schema generando automaticamente le tue collezioni in base a un prompt fornito come utilizzare l'agente ai accedi all'agente ai dalla dashboard del tuo progetto descrivi il tuo schema desiderato dettagliando le collezioni e i campi esamina lo schema generato e applica le modifiche esempio di prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) questo strumento aiuta a garantire che il design del tuo database sia sia coerente che ottimale per gestire le operazioni crud passo 3 – attivazione dell'interfaccia admin e funzionalità crud panoramica dell'interfaccia admin l'interfaccia admin di back4app è una soluzione senza codice progettata per aiutarti a gestire i tuoi dati di backend senza sforzo il suo design drag and drop rende le operazioni crud un gioco da ragazzi come abilitare l'interfaccia admin vai alla sezione altro nel tuo dashboard di back4app clicca su app admin e poi seleziona abilita app admin configura le tue credenziali di amministratore per creare il tuo primo utente admin questo processo configura anche i ruoli (come b4aadminuser ) e le collezioni di sistema abilita app admin dopo l'attivazione, accedi all'interfaccia di amministrazione per gestire le tue collezioni dashboard dell'app di amministrazione eseguire operazioni crud tramite l'interfaccia di amministrazione aggiungi nuovi record usa l'opzione “aggiungi record” in qualsiasi collezione (ad esempio, articoli) per creare voci visualizza/modifica record clicca su un record per ispezionare i dettagli o modificare i suoi campi rimuovi record utilizza la funzione di eliminazione per rimuovere voci obsolete questa interfaccia intuitiva migliora l'esperienza dell'utente semplificando le azioni crud di routine passo 4 – collegare mithril js con back4app con il tuo backend pronto e gestito tramite l'interfaccia di amministrazione, è tempo di collegare il tuo frontend mithril js a back4app utilizzando chiamate api rest utilizzare chiamate api rest con mithril js ci affideremo alle chiamate api rest per interagire con il tuo backend back4app esempio recuperare e visualizzare articoli crea un componente mithril che recupera articoli dalla collezione articoli // src/components/itemslist js const itemslist = { items \[], loaditems async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; questo componente utilizza il metodo del ciclo di vita di mithril oninit per caricare i dati quando il componente viene inizializzato esempio aggiungere un nuovo elemento puoi integrare un modulo per inviare una richiesta post per aggiungere nuovi elementi // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; puoi implementare in modo simile operazioni di aggiornamento e cancellazione utilizzando i metodi http corrispondenti (put/patch per aggiornamenti e delete per rimozioni) passo 5 – migliorare la sicurezza del backend implementazione dei controlli di accesso proteggi i tuoi dati applicando le liste di controllo degli accessi (acl) a ciascun oggetto ad esempio, per creare un elemento che solo il proprietario può modificare async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } impostazione delle autorizzazioni a livello di classe (clp) all'interno del tuo dashboard di back4app, regola le clp per ogni collezione per definire le politiche di sicurezza predefinite questo assicura che solo gli utenti autorizzati abbiano accesso a informazioni sensibili passo 6 – configurazione dell'autenticazione utente configurazione degli account utente back4app utilizza la classe parse user per gestire l'autenticazione con mithril js, puoi gestire la registrazione e il login tramite chiamate api rest di seguito è riportato un esempio per la registrazione dell'utente // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; puoi adottare un metodo simile per effettuare il login e gestire le sessioni passo 7 – distribuzione del tuo frontend mithril js la funzione di distribuzione web di back4app ti consente di ospitare la tua applicazione mithril js senza problemi collegando il tuo repository github 7 1 creazione della versione di produzione apri la directory del tuo progetto in un terminale esegui il comando di build npm run build questo genererà una build cartella contenente file statici ottimizzati 7 2 organizzare e commettere il tuo codice il tuo repository dovrebbe avere una struttura simile a basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md esempio src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); impegnare e inviare a github inizializza git (se non già fatto) git init aggiungi i tuoi file git add impegnare le modifiche git commit m "initial commit of mithril js frontend" crea un repository su github (ad esempio, basic crud app mithriljs frontend ) e invia il tuo codice git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 collegare github con il deployment web accedi al tuo dashboard di back4app, vai al tuo progetto ( basic crud app mithriljs ), e seleziona web deployment collega il tuo account github seguendo le istruzioni sullo schermo scegli il tuo repository e branch (ad esempio, main ) che contiene il tuo codice sorgente mithril js 7 4 configurazione delle impostazioni di deployment configura comando di build specifica npm run build se la cartella di build non è presente directory di output imposta questo su build per puntare ai tuoi asset statici variabili d'ambiente aggiungi eventuali chiavi api o impostazioni necessarie 7 5 dockerizzare la tua applicazione (opzionale) se preferisci la containerizzazione, includi un dockerfile # use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 distribuzione della tua applicazione premi il pulsante di distribuzione nella sezione distribuzione web di back4app monitora il processo di costruzione mentre back4app estrae, costruisce e distribuisce la tua applicazione una volta completato, riceverai un url per la tua app mithril js live 7 7 verifica della distribuzione apri l'url fornito nel tuo browser conferma che la tua applicazione si carica, le navigazioni funzionano e le risorse vengono servite correttamente utilizza gli strumenti di sviluppo del browser per la risoluzione dei problemi se necessario passo 8 – conclusione e direzioni future ben fatto! hai costruito con successo un'app crud di base con mithril js integrato con back4app hai impostato un progetto chiamato basic crud app mithriljs , definito il tuo schema di database per articoli e utenti, e gestito il tuo backend tramite l'interfaccia di amministrazione inoltre, hai collegato il tuo frontend mithril js utilizzando chiamate api rest e applicato misure di sicurezza per proteggere i tuoi dati cosa c'è dopo? migliora il frontend aggiungi funzionalità come viste dettagliate, capacità di ricerca o aggiornamenti in tempo reale estendi le funzioni del backend esplora funzioni cloud, integrazioni api aggiuntive o permessi basati sui ruoli impara di più approfondisci la documentazione di back4app https //www back4app com/docs e le guide di mithril js per miglioramenti avanzati buon coding e buona fortuna con il tuo progetto!