O.
Ben tornato.
Quindi in questa lezione ci stiamo concentrando sul miglioramento dell'usabilità del nostro campo.
In questo momento è una specie di disastro per quanto riguarda il fornire feedback o messaggi di errore o messaggi di successo
ai nostri utenti.
E per disastro intendo solo che non esiste affatto.
Abbiamo un registro dei consigli che ovviamente i nostri utenti non possono vedere.
Lo vediamo come sviluppatori nel nostro console qui dove i server sono in esecuzione ma nessun altro lo vede.
Quindi ci concentreremo sull'aggiunta di alcuni messaggi e ti mostrerò come appare in
un attimo.
Prima di farlo abbiamo tre obiettivi principali, ne parlerò solo ora.
Quindi voglio dimostrarlo.
Per prima cosa ti mostri cosa aspettarti come apparirà come si comporta, quindi installeremo e configureremo
un pacchetto chiamato connect flash.
Quindi quello che stiamo facendo è aggiungere Flash o il lampeggiatore ai suoi diversi pronomi e la gente lo
chiama.
In altri quadri l'hash flash.
La gente lo chiama "flash message", ma fondamentalmente l'idea è che stiamo per mostrare un messaggio ad un
utente, come ad esempio l'accesso corretto o la disconnessione riuscita.
O forse qualcosa come te non ha il permesso di farlo.
Oppure effettua il login prima di aggiungere un campeggio in questo modo.
Vogliamo mostrarlo a un utente solo una volta e non vogliamo che sia un elemento permanente sulla pagina.
visualizzarli in flash una volta e poi se ne va nella pagina successiva o se
l'utente si aggiorna e quindi l'ultima cosa è aggiungere i nostri messaggi flash all'intestazione e aggiungere alcune classi di bootstrap che verranno formattate.
Vogliamo solo
Quindi ci sono alcuni modi per fare le cose con il bootstrap.
Questa è una caratteristica talmente comune che i messaggi che vengono visualizzati all'utente vengono visualizzati su tutti i tipi di siti
in cui il bootstrap ha uno stile incorporato che ne trarrà vantaggio.
Quindi inizierò mostrandoti come sarà.
Quindi ho il campo in esecuzione.
Fammi sapere che ti faccio vedere se mi disconnetto subito, quindi sono connesso come congelatore se esco e
ottengo un messaggio che informa loungy che possiamo modificare il messaggio.
Ovviamente se provo ad aggiungere un nuovo campeggio in questo momento quando non sono loggato, ora dovrei ricevere un messaggio che
dice che devi essere registrato per farlo.
E notare che è letto qui.
Quindi questa è una lezione di bootstrap.
Questo avviso che otteniamo se fossi fresco, la pagina scompare.
Quindi ora se provo a registrarmi devo dire che mi iscrivo come resti che già esiste.
Quindi non dovrei essere in grado di farlo in passato.
La pagina si aggiornerebbe.
Ma quello che finiremo con è un messaggio che dice che un utente con un determinato nome utente è già registrato.
OK.
Quindi lasciami iscrivere come nuovo.
Proviamo a fare errori.
Ora mi sono trasferito apparentemente dalle verdure agli elettrodomestici e ho ricevuto un messaggio con
successo.
Piacere di conoscerti Bunder.
E se aggiorno la pagina va via.
Quindi ci sono altri posti in cui abbiamo quei messaggi, ma te lo mostrerò.
Ad esempio, se provo a modificare questo campeggio che non possiedo.
Tater lo possiede.
Ho effettuato l'accesso a questo frullatore.
Non ho un link per andare a Modifica qui perché è nascosto.
Ma tecnicamente posso ancora andare a tagliare dove ora ho un messaggio che dice che non hai il permesso
di farlo.
Mi reindirizza qui.
Quindi la stessa cosa con i commenti se io se ci fosse un commento qui ed è stato creato da qualcun altro.
Se andassi manualmente a quel link e aggiungessi slash, vedrei anche un messaggio ma
è molto lavoro perché dobbiamo trovare l'ID.
E comunque non voglio entrarci adesso ma sarà lo stesso bit di codice che aggiungeremo che dirà
che non hai il permesso di farlo.
E infine se faccio il logout e torno indietro e provo ad aggiungere nuovi commenti ottengo lo stesso messaggio.
Devi essere registrato per farlo.
Proprio come se cercassi di creare un campeggio quando non ero stato firmato.
OK.
Questo è l'obiettivo finale ed è abbastanza facile per noi farlo funzionare.
Usando questo pacchetto potremmo fare questo senza un pacchetto, ovviamente, cosa potremmo fare qualcosa di simile.
Quando apriamo la versione corretta.
Così ho creato una nuova versione per questa v 11 su cui lavorerò all'interno.
Quindi vediamo in v. 11 e lasciami chiarire tutto e aprire sì.
OK.
Quindi lavoreremo qui.
Di nuovo questo è V 11 nel caso stiate seguendo.
La prima cosa che farò è mostrarti il ​​pacchetto che useremo.
Quindi si chiama Kinect Flash.
C'erano altri pacchetti là fuori che lo fanno.
Se date un'occhiata al repository di casa, la documentazione è in realtà un po 'obsoleta.
Usiamo Express per la quale è uscito prima nel 2015.
I documenti parlano di Express per puntare X e tre punti X per il prossimo.
le stesse, anche se tornate su Connect flash vedrete alcuni dei primi collegamenti esterni espressi 4.
Quindi queste istruzioni non sono esattamente 00 impostato con K'NEX flash che ho già dato
un'occhiata o potresti sempre usare qualcosa di simile espresso in seguito e puoi vedere che riceviamo lo stesso link e ci
sono tutorial qui sotto c'è un post di overflow dello stack su di esso se vuoi dare
un'occhiata
Così l'ho fatto prima.
Qualcosa che devi fare molto quando sai che il codice viene aggiornato quando vengono fuori cose nuove.
Soprattutto con qualcosa come Express 4. 0 dove le cose cambiano in modo significativo.
Un sacco di cose che facevano parte di Express sono state spostate da Express come pacchetti separati.
Alcuni nomi e sintassi sono cambiati.
Quindi dico sempre che è qualcosa che fai molto quando stai cercando di fare
qualcosa che non hai ancora fatto in Express add in Express per le tue ricerche perché spesso troverai fantastici tutorial per
questo.
Due anni fa il 90 percento è sempre lo stesso, ma quel 10 percento è davvero importante che
tu capisca come è diverso da te due anni fa rispetto all'attuale Express.
Tutto ok.
Quindi la prima cosa che vogliamo fare è installare questo pacchetto.
Quindi si chiama connect flash.
Quindi vogliamo che il dash del dash di installazione di NPM risparmi connect dash flash.
OK.
Ora che è finito qui aggiungeremo semplicemente Flash.
Chiameremo semplicemente il flash piuttosto che collegare i flash equals richiedono il flash del cruscotto di connessione.
Assicurati di avere una virgola lì dentro, quindi quello che dobbiamo fare è dire a dire all'app di usare Flash.
Quindi abbiamo preso il contenuto di K'NEX Flash che il pacchetto e salvato
nella variabile flash e avremo bisogno di eseguire quell'app variabile che usa il flash proprio così.
Quindi tecnicamente è tutto ciò che dobbiamo fare.
Ora abbiamo installato Connect Flash e se torniamo indietro e daremo un'occhiata ai documenti c'è qualche altra
configurazione che fanno qui con cookie parser in sessione, ma in realtà abbiamo già impostato quello
in cui stiamo già facendo il nostro.
Dove hai bisogno di una sessione esplicita e stiamo creando un segreto.
Quindi non dobbiamo preoccuparcene perché abbiamo già configurato la nostra app per utilizzare la
sessione Express.
OK, quindi quello che faremo è su ogni singola pagina che mostreremo il contenuto del flash.
Prenderemo il messaggio che è lì dentro.
Potrebbe essere buono o potrebbe essere cattivo potrebbe essere vuoto e lo mostreremo nella parte superiore della pagina
e ciò accadrà nel nostro file di intestazione.
E. J. Sì,
avremo un codice che mostra solo l'errore o il messaggio di successo e quindi tutto ciò che faremo è quando incontriamo
un errore o un luogo in cui vogliamo un messaggio, quindi un'istanza potrebbe essere invece di fare campeggio e al posto dei
nostri campeggi abbiamo questo è il login nel Middleware dove non è possibile aggiungere un nuovo campeggio se non si è connessi.
essere loggato per farlo o Effettuare il login.
Se noi, se andiamo a quel middleware e vedremo che è loggato, potremmo voler avere un messaggio che dice che devi
Quindi quel codice andrebbe proprio qui.
Quindi, appena prima di reindirizzare per accedere al collegamento, aggiungeremo qualcosa al flash.
Quindi sembra proprio che questo richieda il dot flash.
E poi possiamo dargli una chiave.
Quindi in un momento ti mostrerò.
Useremo il successo e
l'errore e lo useremo per determinare se il messaggio dovrebbe essere verde o rosso.
Quindi questa parte non ha importanza per ora, ma questa parte importa dove stiamo per passare un messaggio.
Quindi potremmo fare qualcosa di simile. Effettua prima il login.
Ancora una volta questo è all'interno del middleware registrato.
Quindi sta controllando se la richiesta è autenticata se gli utenti hanno effettuato il login.
Poi vai avanti a quello che stavi facendo prima.
Ma se questo non è il caso prima di reindirizzare per tagliare il login.
Sì, ricorda se reindirizziamo alla barra di accesso.
Senza questa linea continua anche.
Dovrò aprire la rotta ma andrà a destra al codice e alla barra di accesso che è proprio qui.
Quindi esegue il log-in prima di farlo anche se eseguiremo questo codice flash.
E ciò che questo farà basterà prendere l'accesso per primo e lo aggiungerà al
flash e non verrà visualizzato fino alla prossima cosa che vediamo.
In questo caso, in questo caso, non viene effettivamente eseguito il rendering di
qualcosa che semplicemente ci reindirizza per tagliare il login e il modo in cui funziona il Flash è davvero bello in quanto non si accenderà immediatamente immediatamente.
Funziona solo o appare alla pagina successiva.
Quindi lo fai davvero prima di reindirizzare.
Quindi, in questo caso, prima effettua il login e poi
reindirizziamo alla barra di accesso, quindi nel log e nel modulo, speriamo di vedere un messaggio.
Al momento non lo mostriamo comunque.
Quindi, ancora una volta solo per ripetere
che aggiungere questa linea non mostrerà nulla per noi tutto ciò che fa è che ci dà la possibilità di darci un modo per accedere a questo alla prossima richiesta.
Quindi non stiamo lampeggiando subito non stiamo vedendo nulla che non stiamo mostrando nulla all'utente.
Tutto ciò che fa è detto in flash e invece di successo penso che abbia più senso chiamare
questo errore nel flash add, per favore accedi prima per la prossima richiesta e poi reindirizziamo a slash logon.
Quindi, dobbiamo gestirlo in fase di accesso che è proprio qui barra di accesso.
Quindi potrei fare qualcosa come passare un messaggio.
E ovviamente tutto ciò che posso appena mostrarti
per iniziare così se abbiamo solo il messaggio di errore, l'hai incasinato proprio così che
potremmo semplicemente mostrarlo sul nostro modello in modo che il registro di slash sia all'interno del log-in dei fusibili.
Sì, proprio in cima potevo avere un H-1 che visualizzava il messaggio proprio così.
Niente di nuovo.
Quindi ti mostrerò come è fatto adesso.
Avvia il reindirizzamento del server per tagliare il log in e ricevo questo messaggio ogni volta che si verifica un errore.
L'hai incasinato.
Come puoi vedere, spero
che ciò che ti aspettavi a questo punto, perché lo ho codificato in ogni momento in cui andiamo a fare il login, ti vediamo incasinato.
OK, quindi, usando il flash, quello che possiamo
fare ora è dire che il messaggio è uguale alla richiesta di flash e possiamo semplicemente fare l'errore nel flash.
Quindi è un po 'confuso.
non dovrebbe esserci un errore nel flash.
Ma fondamentalmente l'idea è adesso se ho solo aggiornare la pagina riavviare il server e aggiornare
Quindi in realtà non vediamo nulla.
Ma se facciamo in modo che
questo codice esegua questo codice qui e il modo in cui stiamo tentando di accedere a qualcosa in cui dobbiamo essere loggati dove viene
chiamato questo middleware, allora ciò che accadrà è che stiamo aggiungendo questo al flash sotto l'errore
chiave con il valore si prega di accedere prima, quindi stiamo andando a tagliare il login.
Quindi all'interno
dell'accesso barra inviamo sotto la chiave della richiesta del messaggio l'errore flash, che è un sacco di cose che devono essere collegate ed è un po 'di confusione di nuovo.
Ma lascia che ti mostri solo adesso.
Quindi ricomincio.
Questa volta non ho dovuto farlo ma non vediamo nulla.
Ora lasciami andare ai campeggi e prova ad aggiungere un nuovo campeggio anche se non ho effettuato l'accesso.
E ora ricevo quel messaggio che dice Effettua il log in prima che
non c'era prima e se aggiorno la pagina va via.
Questa è una versione molto semplice di ciò che possiamo realizzare usando Flash.
con tutti i diversi messaggi e lo stile.
Quindi, prima di passare al prossimo video per implementarlo
Riassumiamo semplicemente come funziona di nuovo.
Quindi, ogni volta che vogliamo mostrare un messaggio, sia
che si tratti di un messaggio di successo o di un messaggio di errore, qualunque sia, useremo questa linea proprio qui.
Richiedi flash.
E poi passiamo in una chiave e un valore e lo facciamo prima di reindirizzare.
È molto importante se inserisco questa riga dopo il reindirizzamento.
Non funzionerà.
Quindi, prima di reindirizzare e quindi devi
ancora gestirlo nel modello stesso per gestirlo e il percorso tutto ciò che ti dà è la possibilità di aggiungere alcuni dati prima di reindirizzare.
Questo lo rende alla prossima rotta.
E quei dati non permarranno su ogni singola richiesta a quella rotta.
Quindi è una cosa sola.
Questo è il motivo per cui si chiama Flash.
OK.
farlo.
Quindi nel prossimo video ti mostrerò come implementarlo concretamente dove non dobbiamo
Trasmettendo il messaggio a tutti i
modelli in cui possiamo pensare stilisticamente, con il bootstrap in cui possiamo avere messaggi rossi e verdi possiamo avere
colori diversi se vogliamo che il rosso e il verde siano quelli standard.
OK.
Quindi questo è nel prossimo video.
Vedere il