Statische Site -Generatoren sind für ihre Geschwindigkeit, Sicherheit und Benutzererfahrung beliebt. Manchmal benötigt Ihre Anwendungsdaten, die beim Erstellen der Website nicht verfügbar sind. React ist eine Bibliothek zum Erstellen von Benutzeroberflächen, mit denen Sie dynamische Daten in Ihrer Client -Anwendung abrufen und speichern können.
Fauna ist eine flexible, serverlose Datenbank, die als API geliefert wird, die den Betriebsaufwand wie Kapazitätsplanung, Datenreplikation und geplante Wartung vollständig beseitigt. Mit Fauna können Sie Ihre Daten als Dokumente modellieren, sodass sie für Webanwendungen, die mit React geschrieben wurden, zu einer natürlichen Anpassung. Obwohl Sie über einen JavaScript -Treiber direkt auf Fauna zugreifen können, erfordert dies eine benutzerdefinierte Implementierung für jeden Client, der eine Verbindung zu Ihrer Datenbank herstellt. Durch die Platzierung Ihrer Fauna -Datenbank hinter einer API können Sie jedem autorisierten Client eine Verbindung herstellen, unabhängig von der Programmiersprache.
Mit Netlify-Funktionen können Sie skalierbare, dynamische Anwendungen erstellen, indem Sie den serverseitigen Code bereitstellen, der als API-Endpunkte funktioniert. In diesem Tutorial erstellen Sie eine serverlose Anwendung mit React, Netlify -Funktionen und Fauna. Sie lernen die Grundlagen des Speicherns und Abrufen Ihrer Daten mit Fauna. Sie erstellen und bereitstellen Netlify -Funktionen, um auf Ihre Daten in Fauna sicher zugreifen zu können. Schließlich stellen Sie Ihre React -Anwendung für Netlify bereit.
Fauna ist eine verteilte, stark konsistente OLTP-NoSQL- serverlose Datenbank, die säurekonform ist und eine Multi-Model-Schnittstelle bietet. Fauna unterstützt auch Dokument-, Relational-, Graph- und zeitliche Datensätze aus einer einzelnen Abfrage. Zunächst erstellen wir zunächst eine Datenbank in der Fauna -Konsole, indem wir die Registerkarte Datenbank auswählen und auf die Schaltfläche Datenbank erstellen klicken.
Als nächstes müssen Sie eine Sammlung erstellen. Dazu müssen Sie eine Datenbank auswählen und unter der Registerkarte Sammlungen auf die Sammlung erstellen.
Fauna verwendet eine bestimmte Struktur, wenn es um anhaltende Daten geht. Das Design besteht aus Attributen wie dem Beispiel unten.
{
"Ref": Ref (Sammlung ("Avengers"), "299221087899615749"),
"Ts": 1623215668240000,
"Daten": {
"ID": "DB7BD11D-29C5-4877-B30D-DFC4DFB2B90E",
"Name": "Captain America",
"Kraft": "hohe Stärke",
"Beschreibung": "Schild"
}
}Beachten Sie, dass Fauna eine Ref -Spalte beibehält, die eine eindeutige Kennung ist, die zur Identifizierung eines bestimmten Dokuments verwendet wird. Das TS -Attribut ist ein Zeitstempel, um den Zeitpunkt des Erstellens des Datensatzes und das für die Daten verantwortliche Datenattribut zu bestimmen.
Lassen Sie uns als nächstes zwei Indizes für unsere Avengers -Sammlung erstellen. Dies wird im letzten Teil des Projekts ziemlich wertvoll sein. Sie können einen Index von der Registerkarte Index oder aus der Registerkarte Shell erstellen, die eine Konsole zum Ausführen von Skripten bereitstellt. Fauna unterstützt zwei Arten von Abfragetechniken: FQL (Faunas Abfragesprache) und GraphQL. FQL arbeitet auf dem Schema von Fauna, das Dokumente, Sammlungen, Indizes, Sets und Datenbanken enthält.
Erstellen wir die Indizes aus der Shell.
Dieser Befehl erstellt einen Index in der Sammlung, der nach dem ID -Feld im Datenobjekt einen Index erstellt. Dieser Index gibt einen Schiedsrichter des Datenobjekts zurück. Erstellen wir als nächstes einen weiteren Index für das Namensattribut und nennen Sie es avenger_by_name .
Um einen Serverschlüssel zu erstellen, müssen wir auf der Registerkarte Sicherheit navigieren und auf die Schaltfläche Neue Taste klicken. In diesem Abschnitt werden Sie aufgefordert, einen Schlüssel für eine ausgewählte Datenbank und die Rolle des Benutzers zu erstellen.
In diesem Abschnitt werden wir sehen, wie wir Netlify -Funktionen mit React erstellen. Wir werden Create-React-App verwenden, um die React-App zu erstellen.
NPX erstellen React-App Avengers-Faunadb
Lassen Sie uns nach dem Erstellen der React -App einige Abhängigkeiten installieren, einschließlich Fauna- und Netlify -Abhängigkeiten.
Garn addieren Axios Bootstrap-Knoten-Sass UUID Faunadb React-Netlify-Identität React-Netlify-Identitäts-Widget
Lassen Sie uns nun unsere erste Netlfiy -Funktion erstellen. Um die Funktionen zu erfüllen, müssen wir zunächst Netlifiy CLI weltweit installieren.
NPM Netlify -Cli -g installieren
Nachdem die CLI installiert ist, erstellen wir mit den folgenden Feldern eine .env -Datei in unserem Projektroot.
Faunadb_server_secret = <faunadb secret key> React_app_netlify = <netlify app url></netlify></faunadb>
Lassen Sie uns als nächstes sehen, wie wir mit dem Erstellen von Netlify -Funktionen beginnen können. Dafür müssen wir ein Verzeichnis in unserem Projektroot namens Funktionen und eine Datei namens netlify.toml erstellen, die für die Wartung von Konfigurationen für unser Netlify -Projekt verantwortlich ist. Diese Datei definiert das Verzeichnis, das Build -Verzeichnis und die zu ausgeführten Befehle unserer Funktion.
[bauen] command = "npm run build" Funktionen = "Funktionen/" Publish = "Build" [[umleitet]]] von = "/api/*" to = "/.netlify/functions/:splat" Status = 200 Force = true
Wir werden eine zusätzliche Konfiguration für die Netlify -Konfigurationsdatei durchführen, wie im Abschnitt Umleitung in diesem Beispiel. Beachten Sie, dass wir den Standardpfad der Netlify -Funktion von /.netlify/** zu /api /ändern. Diese Konfiguration dient hauptsächlich zur Verbesserung des Aussehens und des Feldes der API -URL. Um unsere Funktion auszulösen oder aufzurufen, können wir den Pfad verwenden:
https://domain.com/api/getpokemons
…anstatt:
https://domain.com/.netlify/getpokemons
Lassen Sie uns als nächstes unsere Netlify -Funktion im Funktionsverzeichnis erstellen. Aber zuerst erstellen wir eine Verbindungsdatei für Fauna namens util/Connections.js, wobei ein Fauna -Verbindungsobjekt zurückgegeben wird.
const faunadb = erfordern ('faunadb');
const q = faunadb.Query
const clientQuery = new Faunadb.client ({{
Geheimnis: process.env.faunadb_server_secret,
});
module.exports = {clientQuery, q};Lassen Sie uns als Nächstes eine Helferfunktion überprüft, die nach Referenz und Rückkehr zurückkehrt, da wir die Daten während der gesamten Anwendung mehrmals analysieren müssen. Diese Datei ist util/helper.js .
const responseObj = (statuscode, data) => {
zurückkehren {
Statuscode: Statuscode,
Header: {
/ * Für die Unterstützung von CORs zur Arbeit erforderlich *///
"Zugangskontroll-Allow-Origin": "*",
"Zugangskontrolle-Allowader": "*",
"Access-Control-Allow-Methoden": "Get, post, Optionen",
},
Körper: JSON.Stringify (Daten)
};
};
const requestObj = (data) => {
return json.parse (Daten);
}
module.exports = {responseObj: responseObj, RequestObj: RequestObj}Beachten Sie, dass die oben genannten Helferfunktionen die CORS -Probleme , die String- und Parsen von JSON -Daten abwickeln. Lassen Sie uns unsere erste Funktion getavengers erstellen, die alle Daten zurückgibt.
const {responseObj} = require ('./ util/helper');
const {q, clientQuery} = required ('./ util/connection');
exports.handler = async (Ereignis, Kontext) => {
versuchen {
lass avengers = erwarten clientQuery.Query (
Q.Map (
Q.Paginat (q.dokumente (q.collection ('avengers')),
Q.lambda (x => Q.get (x))
)
)
Return Responseobj (200, Avengers)
} catch (error) {
console.log (Fehler)
return responseObj (500, fehler);
}
};Im obigen Code -Beispiel können Sie sehen, dass wir mehrere FQL -Befehle wie Map , Paginate , Lamda verwendet haben. Der Kartenschlüssel wird verwendet, um das Array durchzusetzen, und es dauert zwei Argumente: ein Array und Lambda . Wir haben den Paginat für den ersten Parameter übergeben, der nach Referenz prüft, und eine Ergebnisseite zurückgeben (ein Array). Als nächstes verwendeten wir eine Lamda -Anweisung, eine anonyme Funktion, die einer anonymen Pfeilfunktion in ES6 ziemlich ähnlich ist.
Erstellen wir als nächstes unsere Funktion addAVenger, die für das Erstellen/Einfügen von Daten in die Sammlung verantwortlich ist.
const {requestObj, responseObj} = required ('./ util/helfer');
const {q, clientQuery} = required ('./ util/connection');
exports.handler = async (Ereignis, Kontext) => {
let Data = RequestObj (Ereignis.body);
versuchen {
lass avenger = erwarten clientQuery.Query (
Q.Create (
Qollection ('Avengers'),
{
Daten: {
id: data.id,
Name: Data.Name,
Kraft: Data.Power,
Beschreibung: Data.Description
}
}
)
);
Return Responseobj (200, Avenger)
} catch (error) {
console.log (Fehler)
return responseObj (500, fehler);
}
};Um Daten für eine bestimmte Sammlung zu speichern, müssen wir übergeben oder Daten an die Daten übergeben: {} -Objekt wie im obigen Codebeispiel. Dann müssen wir es an die Erstellung von Funktionen übergeben und auf die gewünschte Sammlung und die Daten verweisen. Lassen Sie uns unseren Code ausführen und sehen, wie er über den Befehl netlify dev funktioniert.
Lassen Sie uns die Funktion getavengers durch den Browser durch die URL http: // localhost: 8888/api/getavengers auslösen.
Die obige Funktion holt das Avenger -Objekt mit der Namenseigenschaft , die aus dem Index avenger_by_name sucht. Aber zuerst rufen wir die GetAVengerByName -Funktion über eine Netlify -Funktion auf. Lassen Sie uns dafür eine Funktion namens Searchavenger erstellen.
const {responseObj} = require ('./ util/helper');
const {q, clientQuery} = required ('./ util/connection');
exports.handler = async (Ereignis, Kontext) => {
const {
QueryStringParameters: {Name},
} = Ereignis;
versuchen {
lass avenger = erwarten clientQuery.Query (
q.call (Q.Funktion ("getAVengerByName"), [Name])
);
Return Responseobj (200, Avenger)
} catch (error) {
console.log (Fehler)
return responseObj (500, fehler);
}
};Beachten Sie, dass die Anruffunktion zwei Argumente annimmt, bei denen der erste Parameter die Referenz für die von uns erstellte FQL -Funktion und die Daten, die wir an die Funktion übergeben müssen, sein.
Jetzt, da mehrere Funktionen verfügbar sind, werden wir diese Funktionen durch React konsumieren. Da es sich bei den Funktionen um Rest -APIs handelt, verwenden wir sie über Axios und verwenden wir für die staatliche Verwaltung die Kontext -API von React. Beginnen wir mit dem Anwendungskontext namens AppContext.js .
importieren {createContext, Usereducer} aus "React";
Appredner aus "./ -Appeducer" importieren "
const initialState = {
isediting: falsch,
Avenger: {Name: '', Beschreibung: '', Power: ''},
Avengers: [],
Benutzer: null,
Isloggedin: Falsch
};
Export const AppContext = createContext (InitialState);
exportieren const AppContextProvider = ({Kinder}) => {
const [Zustand, Versand] = Usereducer (APPREKER, InitialState);
const login = (Data) => {Dispatch ({type: 'login', payload: data})}
const logout = (Data) => {Dispatch ({type: 'logout', payload: data})}
const getavenger = (data) => {sendatming ({type: 'get_avenger', payload: data})}
const updateAvenger = (data) => {sendet ({type: 'update_avenger', payload: data})}
const clearAVenger = (data) => {sendatch ({type: 'clear_avenger', payload: data})}
const selectAVenger = (Data) => {Dispatch ({type: 'select_avenger', payload: data})}
const getavengers = (Data) => {Dispatch ({type: 'get_avengers', payload: data})}
const createAVenger = (data) => {sendat ({type: 'create_avenger', payload: data})}
const deleteavegers = (Data) => {Dispatch ({type: 'delete_avenger', payload: data})}
return <appcontext.provider value="{{{{{{{{{{{{{{{{{{{{{{{{" ...zustand login logout selectaverger aktualisierung clearavenger getavenger getavengers kreaturen l> {Kinder} </appcontext.provider>
}
Exportieren Sie Standard -AppContextProvider;Erstellen wir die Reduzierer für diesen Kontext in der Datei appreducer.js , die aus einer Reduzierfunktion für jeden Vorgang im Anwendungskontext besteht.
const updateItem = (avengers, data) => {
let avenger = avengers.find ((avenger) => avenger.id === data.id);
lass updateAvenger = {... avenger, ... data};
let avengerIndex = avengers.findIndex ((avenger) => avenger.id === data.id);
zurückkehren [
... Avengers.slice (0, avengerIndex),
Aktualisiert,
... avengers.slice (avengerIndex),
];
}
const deleteEm = (avengers, id) => {
return avengers.filter ((avenger) => avenger.data.id! == id)
}
const appredner = (Zustand, Aktion) => {
Switch (action.type) {
Fall 'select_avenger':
zurückkehren {
...Zustand,
isediting: wahr,
Avenger: Action.Payload
}
Fall 'Clear_avenger':
zurückkehren {
...Zustand,
isediting: falsch,
Avenger: {Name: '', Beschreibung: '', Power: ''}
}
Fall 'update_avenger':
zurückkehren {
...Zustand,
isediting: falsch,
Avengers: UpdateItem (state.avengers, action.payload)
}
Fall 'get_avenger':
zurückkehren {
...Zustand,
Avenger: action.payload.data
}
Fall 'get_avegers':
zurückkehren {
...Zustand,
Avengers: array.isArray (action.payload && action.payload.data)? action.payload.data: [{... action.payload}]
};
Fall 'create_avenger':
zurückkehren {
...Zustand,
Avengers: [{Daten: action.payload}, ... state.avengers]
};
Fall 'Delete_avenger':
zurückkehren {
...Zustand,
Avengers: DeleteItem (state.avengers, action.payload)
};
Fall 'Login':
zurückkehren {
...Zustand,
Benutzer: action.payload,
Isloggedin: Richtig
};
Fall 'Logout':
zurückkehren {
...Zustand,
Benutzer: null,
Isloggedin: Falsch
};
Standard:
Rückkehrstatus
}
}
Standard -Appredner exportieren;
Da der Anwendungskontext jetzt verfügbar ist, können wir Daten aus den Netlify -Funktionen abholen, die wir in unserem Anwendungskontext erstellt und bestehen. Lassen Sie uns also sehen, wie man eine dieser Funktionen aufruft.
const {avengers, getavengers} = useContext (AppContext);
const getavengers = async () => {
lass {data} = warte axios.get ('/api/getavengers);
getavengers (Daten)
}Um die Daten in die Anwendungskontexte zu erhalten, importieren wir die Funktion getavengers aus unserem Anwendungskontext und übergeben die durch den Get -Anruf abgerufenen Daten. Diese Funktion ruft die Reduzierfunktion auf, die die Daten im Kontext hält. Um auf den Kontext zuzugreifen, können wir das Attribut namens Avengers verwenden. Lassen Sie uns als nächstes sehen, wie wir Daten zur Avengers -Sammlung speichern können.
const {createAvenger} = useContext (AppContext);
const createAvenger = async (e) => {
E.PreventDefault ();
lass new_avenger = {id: uUid (), ... newavenger}
Warten Sie Axios.post ('/api/addavenger', new_avenger);
klar();
CreateAvenger (new_avenger)
}Das obige NewVenger -Objekt ist das Statusobjekt, das die Formulardaten aufbewahrt. Beachten Sie, dass wir an jedem unserer Dokumente eine neue ID vom Typ UUID weitergeben. Wenn die Daten in der Fauna gespeichert werden, werden wir die Funktion der CreateAvenger im Anwendungskontext verwenden, um die Daten in unserem Kontext zu speichern. In ähnlicher Weise können wir alle Netlify -Funktionen mit CRUD -Operationen wie diesen über Axios aufrufen.
Nachdem wir eine Arbeitsanwendung haben, können wir diese App für Netlify bereitstellen. Es gibt verschiedene Möglichkeiten, wie wir diese Anwendung bereitstellen können:
Die Verwendung der CLI fordert Sie auf, bestimmte Details und Auswahlen einzugeben, und die CLI wird den Rest behandeln. In diesem Beispiel werden wir die Anwendung jedoch über GitHub bereitstellen. Melden wir uns zunächst beim Netlify -Dashboard an und klicken Sie von der Git -Schaltfläche auf eine neue Site . Anschließend werden Sie aufgefordert, das Repo auszuwählen, das Sie zur Bereitstellung und die Konfigurationen für Ihre Website wie Build, Build -Ordner usw. benötigen.
Netlify Identity bietet Ihrer Anwendung eine vollständige Reihe von Authentifizierungsfunktionen, mit denen wir authentifizierte Benutzer in der gesamten Anwendung verwalten können. Die Netlify -Identität kann problemlos in die Anwendung integriert werden, ohne dass andere Dienstleistungen und Bibliotheken von Drittanbietern verwendet werden. Um die Netlify -Identität zu ermöglichen, müssen wir uns in unserem Neltify -Dashboard anmelden. Unter unserer bereitgestellten Website müssen wir uns auf die Registerkarte Identität wechseln und die Identitätsfunktion zulassen.
Das Aktivieren der Identität bietet einen Link zu Ihrer Netlify -Identität. Sie müssen diese URL kopieren und in die .Env -Datei Ihrer Anwendung für react_app_netlify hinzufügen. Als nächstes müssen wir die Netlify-Identität zu unserer React-Anwendung über die Netlify-Identity-Widget und die Netlify-Funktionen hinzufügen. Aber zuerst fügen wir die Eigenschaft react_app_netlify für die Identitätskontext -Anbieterkomponente in der Index.js -Datei hinzu.
Import reagieren aus "reagieren";
Importreactom von 'react-dom';
import './index.css';
Importieren "React-Netlify-Identity-Widget/Styles.css" "
Importieren Sie 'Bootstrap/dist/css/bootstrap.css';
App von './app' importieren;
Importieren Sie {IdentityContextProvider} aus "React-Netlify-Identity-Widget".
const url = process.env.react_app_netlify;
Reactdom.render (
<identitycontextprovider url="{url}">
<app></app>
</identitycontextprovider>,
document.getElementById ('root')
);Diese Komponente ist die Navigationsleiste, die wir in dieser Anwendung verwenden. Diese Komponente befindet sich über allen anderen Komponenten als idealer Ort für die Authentifizierung. Dieser React-Netlify-Identitäts-Widget fügt eine weitere Komponente hinzu, die den Benutzer signi = in und anmelden.
Lassen Sie uns als nächstes die Identität in unseren Netlify -Funktionen verwenden. Die Identität führt einige geringfügige Änderungen in unseren Funktionen ein, wie die folgende Funktion getavenger.
const {responseObj} = require ('./ util/helper');
const {q, clientQuery} = required ('./ util/connection');
exports.handler = async (Ereignis, Kontext) => {
if (context.clientcontext.user) {
const {
queryStringParameters: {id},
} = Ereignis;
versuchen {
const avenger = erwartet clientQuery.Query (
Q.get (
Q.Match (q.index ('avenger_by_id'), id)
)
);
Return Responseobj (200, Avenger)
} catch (error) {
console.log (Fehler)
return responseObj (500, fehler);
}
} anders {
return responseobj (401, 'nicht autorisiert');
}
};Der Kontext jeder Anfrage besteht aus einer Eigenschaft namens ClientContext . Dies besteht aus authentifizierten Benutzerdetails. Im obigen Beispiel verwenden wir eine einfache Bedingung, um den Benutzerkontext zu überprüfen.
Um den Clientcontext in jeden unserer Anfragen zu erhalten, müssen wir das Benutzer -Token über die Autorisierungsheader übergeben.
const {user} = nützlichkeitscontext ();
const getavenger = async (id) => {
Sei {data} = warte axios.get ('/api/getavenger/? id =' id, user && {
Header: {
Autorisierung: `Bearer $ {user.token.access_token}`
}
});
getavenger (Daten)
}Dieses Benutzer -Token ist im Benutzerkontext verfügbar, sobald sie sich über das Netlify -Identitäts -Widget bei der Anwendung angemeldet haben.
Wie Sie sehen können, scheinen Netlify -Funktionen und Fauna ein vielversprechendes Duo für das Erstellen von serverlosen Anwendungen zu sein. Sie können diesem Github -Repo für den vollständigen Code folgen und sich auf diese URL für die funktionierende Demo beziehen.
Zusammenfassend lässt sich sagen, dass Fauna und Netlify ein vielversprechendes Duo für das Erstellen von serverlosen Anwendungen sein. Netlify bietet auch die Flexibilität, seine Funktionalität über die Plugins zu erweitern, um die Erfahrung zu verbessern. Der Preisplan mit Bezahlung, während Sie gehen, ist ideal für Entwickler, um mit Fauna zu beginnen. Fauna ist extrem schnell und skaliert automatisch, sodass Entwickler die Zeit haben, sich mehr denn je auf ihre Entwicklung zu konzentrieren. Fauna kann komplexe Datenbankvorgänge verarbeiten, in denen Sie in relationalen, dokument-, graphischen und zeitlichen Datenbanken finden würden. Fauna -Fahrer unterstützen alle wichtigen Sprachen wie Android, C#, Go, Java, JavaScript, Python, Ruby, Scala und Swift. Mit all diesen hervorragenden Funktionen scheint Fauna eine der besten serverlosen Datenbanken zu sein. Weitere Informationen finden Sie in der Fauna -Dokumentation.
Das obige ist der detaillierte Inhalt vonZugriff auf Ihre Daten mit Netlify -Funktionen und reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was nützt Bitlocker?
Welche Arten von CSS-Selektoren gibt es?
Tastenkombinationen für den Windows-Sperrbildschirm
So verwenden Sie die Funktion math.round
So posten Sie Text in WeChat Moments
Verwendung von Hintergrundbildern
Webservice-Aufrufmethode
So lösen Sie die Ausnahme „IllegalArgument'.
Der Unterschied zwischen Artikel-Tag und Abschnitts-Tag
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
