Wie erstellt und implementiert man eine Nuxt-Anwendung?

Nuxt.js ist ein Open-Source-Framework, das auf Vue.js, Nitro und Vite aufbaut und die Entwicklung von Webanwendungen ermöglicht.

Inspiriert von Next.js (einem React-Framework für Server Side Rendering), ermöglicht Nuxt.js Entwicklern die Erstellung schneller Webanwendungen durch die Anwendung verschiedener Rendering-Modi.

Nuxt.js wurde 2016 veröffentlicht und hat aufgrund seiner entwicklerfreundlichen Philosophie und seiner umfangreichen Funktionen eine breite Akzeptanz unter Entwicklern gefunden.

Vorteile von Nuxt.js

Nuxt.js bietet mehrere Vorteile, die es zu einer überzeugenden Wahl für die Entwicklung von Vue.js machen:

Universal Rendering

Nuxt.js steuert, wie Ihre Webanwendung auf der Benutzerseite angezeigt wird. Es beginnt mit dem Rendering der Ausgangsseite auf dem Server, wodurch sie besonders schnell geladen wird, vor allem für Personen mit langsameren Internetverbindungen.

Dies hilft den Suchmaschinen, Ihre Website schneller zu durchsuchen, was zu einer besseren Suchmaschinenoptimierung führt.

Nuxt.js schaltet dann nahtlos auf ein clientseitiges Rendering (SPA) um, um zwischen den Seiten innerhalb Ihrer App zu navigieren. So bleibt alles schnell und reaktionsschnell, so wie Sie es von einer modernen Website erwarten würden.

Optimierte Leistung durch Hydratation und Code-Splitting

Nuxt 3 ermöglicht selektive Hydrierung, was bedeutet, dass Segmente des App-Status auf der Client-Seite hydriert werden, um das Laden der ersten Seite zu beschleunigen und die Benutzererfahrung zu verbessern, was sehr nützlich für eine App mit einem riesigen Statusbaum und vielen Teilen ist.

Ähnlich wie Next.js teilt Nuxt die Dateien automatisch in kleinere Pakete auf, die von den Routen abhängen.

Auf diese Weise benötigt der Browser vom Server nur den Code, der mit der aktuellen Ansicht zusammenhängt, was die Ladezeit der Seite für den Benutzer erheblich verkürzt.

Das bedeutet, dass weniger Bandbreitenressourcen beansprucht werden und die Benutzerfreundlichkeit verbessert wird.

Eingebautes Routing

Nuxt.js handhabt Routen standardmäßig über dateibasiertes Routing, was die Navigation und das Routenmanagement innerhalb Ihrer Anwendung vereinfacht.

Außerdem können Sie Ihre Routen für komplexere Routing-Szenarien dynamisch konfigurieren.

API-Routen

Mit Nuxt.js brauchen Sie für einfache Aufgaben keinen eigenen Server einzurichten! Es hat eingebaute Abkürzungen, die API-Routen genannt werden.

API-Routen können das Abrufen von Daten während des serverseitigen Renderings übernehmen und unterstützen RESTful- und GraphQL-APIs. Das macht Ihre App schnell und hilft Suchmaschinen, den Inhalt Ihrer App besser zu verstehen.

Beschränkungen von Nuxt.js

Nuxt.js bietet zwar eine leistungsstarke Entwicklungsumgebung, aber es gibt auch einige Einschränkungen zu beachten:

Lernkurve

Nuxt.js führt Konzepte ein, die sich von der traditionellen Vue.js-Entwicklung unterscheiden. Der Einstieg in Nuxt.js erfordert Zeit, um sich an die spezifische Architektur und die Funktionen anzupassen.

Nuxt bietet auch ein umfangreiches Ökosystem von Tools, Bibliotheken und Plugins. Sich mit diesen Optionen vertraut zu machen, kann die anfängliche Lernkurve erhöhen.

Begrenztes Ökosystem

Im Gegensatz zu anderen großen Frameworks wie React und Angular ist Nuxt relativ jung. Daher wächst das Ökosystem aus Bibliotheken und Plugins von Drittanbietern noch.

Sie werden maßgeschneiderte Lösungen entwickeln müssen, um bestimmte Anforderungen in bestimmten Situationen zu erfüllen.

Komplexität beim serverseitigen Rendering

Serverseitiges Rendering (SSR) ist zwar eine leistungsstarke Funktion in Nuxt.js, kann aber die App-Entwicklung komplexer machen. Im Vergleich zu einfacheren Rendering-Methoden hat SSR eine steilere Lernkurve.

Außerdem erfordert die effektive Implementierung von SSR eine sorgfältige Planung und Verwaltung der Datenabrufe und des Anwendungsstatus.

Dies kann zu möglichen Fehlern oder Inkonsistenzen zwischen dem ursprünglich auf dem Server gerenderten Inhalt und der endgültigen, interaktiven Version auf dem Client führen.

Erstellen und Bereitstellen einer Nuxt.js-Anwendung auf Back4app

Wir werden eine Kontaktmanagement-Anwendung erstellen, um besser zu verstehen, wie man eine Nuxt-App mit Back4App erstellt und einsetzt.

Mit dieser App können Benutzer ihre Kontaktinformationen erstellen, anzeigen und löschen und so ihr Netzwerkkontaktbuch übersichtlich und leicht zugänglich halten.

Für das Backend dieses Projekts werden wir die in Back4app integrierte PostgreSQL-Datenbank verwenden, um Kontaktinformationen wie Name, E-Mail, Telefonnummern und Unternehmen zu speichern.

Dieser Prozess wird mit Hilfe des AI-Agenten von Back4App vereinfacht.

Für das Frontend des Projekts werden wir Nuxt.js verwenden, um die Benutzeroberfläche der App zu erstellen. Dann verbinden wir das Front- und Back-End mit dem Parse SDK, bevor wir das Nuxt-Frontend mit Back4App Containern bereitstellen.

Dann fangen wir mal an.

Erstellen des Backends für Ihre Nuxt.js-Anwendung

Der erste Schritt zur Erstellung einer Nuxt-App besteht darin, das Backend vorzubereiten.

Um mit der Erstellung des Backends für Ihre Kontaktanwendung zu beginnen, navigieren Sie zur Back4App-Website, melden Sie sich an und erstellen Sie eine neue Anwendung, indem Sie auf “Build New App” klicken.

Wählen Sie die Option “Backend as a Service“, die Sie nach der Erstellung einer neuen Anwendung sehen, wie in der Abbildung unten dargestellt.

Geben Sie Ihrer Anwendung einen Namen und wählen Sie die Option PostgreSQL, die wir für die Datenbank verwenden werden.

Nachdem Sie auf die Schaltfläche “CREATE” geklickt haben, nimmt sich Back4app ein wenig Zeit, um Ihre Anwendung einschließlich der Datenbank einzurichten.

Sobald alles fertig ist, werden Sie automatisch zu Ihrer Anwendung weitergeleitet, wie in der folgenden Abbildung dargestellt.

Um das Design der PostgreSQL-Datenbank zu strukturieren, die Sie für die App verwenden werden, navigieren Sie zum AI Agent von Back4app und geben Sie die folgende Eingabeaufforderung ein.

Create database tables in my Back4app app; do you need me to provide any information?

Um Ihre Datenbank einzurichten, erstellt der KI-Agent eine Liste von Dingen, die er benötigt. Diese Liste enthält Details wie die eindeutigen Schlüssel für Ihre Anwendung und wie Ihre Daten strukturiert sind (das Schema).

Nachdem Sie dem KI-Agenten die Schlüssel Ihrer Anwendung mitgeteilt haben, geben Sie dem KI-Agenten vor, wie Ihr Datenbankschema aussehen soll. Es sollte dem untenstehenden Schema für die Kontaktanwendung, die wir erstellen, ähnlich sein:

1. Contact Class:
Class Name: Contact

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)

Nachdem Sie die oben genannten Informationen an den Agenten weitergegeben haben, können Sie durch Navigation in der Datenbank überprüfen, ob die Kontaktklasse und die zugehörigen Felder erstellt worden sind.

Als Nächstes fordern Sie den KI-Agenten mit der unten stehenden Aufforderung auf, Ihre Datenbank mit Testdaten zu füllen.

Populate my contact database with some test data with around 10 test contacts with variations in their information.

Jetzt haben Sie Testdaten, mit denen Sie arbeiten können.

Erstellen von Cloud-Code

Mit der Cloud Code-Funktion von Back4App können Sie eigenen JavaScript-Code direkt auf den Servern von Back4App ausführen.

Diese Funktion hilft Ihnen, die Verarbeitungslast auf Ihrer mobilen App oder Website zu reduzieren. Außerdem schützt es Ihre Daten und Ihre Anwendung vor Sicherheitslücken, da der Cloud-Code auf den sicheren Servern von Back4App ausgeführt wird.

Nachdem Sie nun eine Testdatenbank mit Kontakten aufgebaut haben, ist es an der Zeit, Funktionen für Ihr Kontaktmanagementsystem zu implementieren.

In diesem Abschnitt lernen Sie, wie Sie Cloud-Code erstellen, um bestimmte Funktionen für Ihre Anwendung zu implementieren, z. B.:

• Alle Kontakte anzeigen
• Neue Kontakte erstellen
• Löschen von Kontakten

Sie werden diese Funktionen mit dem Back4App AI Agent implementieren. Lassen Sie uns beginnen.

Um alle Bücher aus der Bibliothek zu holen, geben Sie dem Back4App AI-Agenten die folgende Aufforderung zur Generierung des erforderlichen Cloud-Codes.

Develop a cloud code function named "getContacts" to retrieve all contacts 
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.

Als nächstes beauftragen Sie den Back4App AI Agent mit der Erstellung neuer Kontakte, indem Sie die folgende Eingabeaufforderung übermitteln:

Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.

Schließlich geben Sie dem Back4App AI Agent noch die folgende Aufforderung, eine Funktion zum Löschen von Kontakten aus der Datenbank zu erstellen.

Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.

Um zu überprüfen, ob der Agent Ihre Cloud-Funktionen korrekt generiert hat, sehen Sie sich die Datei main.js an, die sich am Ende dieses Navigationspfads befindet.

Back4app Dashboard → Cloud Code → Funktionen & Webhosting → cloud → main.js.

Sie sollten die drei Funktionen sehen, die Sie in derselben Datei main.js definiert haben, um sicherzustellen, dass Ihre Cloud-Funktionen korrekt erstellt wurden.

Aufbau des Frontends Ihrer Anwendung

Wir werden ein Frontend erstellen, das mit allen von uns erstellten Cloud-Code-Funktionen interagiert. Wir werden das Frontend mit Nuxt.js erstellen.

Um mit der Entwicklung des Frontends zu beginnen, führen Sie den folgenden Code seriell im Terminal Ihres bevorzugten Verzeichnisses aus:

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

Mit diesen Codezeilen wird eine Nuxt-Anwendung mit dem Namen b4a_nuxt_app initialisiert, und anschließend werden alle erforderlichen Pakete und Abhängigkeiten installiert, damit Ihre Anwendung korrekt funktioniert.

Nachdem Sie die oben genannten Befehle in Ihrem Terminal ausgeführt haben, installieren Sie einige npm-Pakete, die Ihnen bei der Gestaltung Ihrer Anwendung helfen. Führen Sie die folgenden npm-Befehle seriell in Ihrem Terminal aus, um diese Pakete zu installieren:

npm install sass
npm install -D tailwindcss postcss autoprefixer

Mit den obigen Codezeilen werden SASS, ein CSS-Präprozessor, und TailwindCSS, ein CSS-Framework, installiert. Sie werden diese Pakete verwenden, um Ihre Anwendung schnell zu gestalten.

Als nächstes konfigurieren Sie TailwindCSS in Ihrer Anwendung, indem Sie den folgenden Befehl ausführen:

npx tailwindcss init

Der obige Code erstellt eine Datei tailwind.config.js im Stammverzeichnis Ihrer Nuxt-Anwendung.

Die Datei tailwind.config.js ist der zentrale Konfigurationspunkt für Ihre Tailwind-CSS-Integration in Nuxt.js. Sie ermöglicht es Ihnen, verschiedene Aspekte von Tailwind CSS an Ihre spezifischen Projektanforderungen anzupassen.

Öffnen Sie Ihre Anwendung in Ihrem bevorzugten Texteditor (VSCode, Eclipse, Sublime Text). Navigieren Sie zur Datei tailwind.config.js und strukturieren Sie sie so, dass sie wie der unten stehende Codeblock aussieht:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Das Inhaltsarray im obigen Codeblock enthält die Dateipfade, die Tailwind CSS überwacht, um seine Utility-Klassen zu generieren.

Als Nächstes erstellen Sie einen Ordner assets im Stammverzeichnis Ihrer Anwendung. Erstellen Sie in diesem Ordner eine Datei main.scss, um Stile zu Ihrer Anwendung hinzuzufügen. Fügen Sie den unten stehenden Code in die Datei main.scss ein:

/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f2f2f2;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

Der obige Codeblock importiert zwei verschiedene Google-Schriften, integriert Tailwind-CSS für die Gestaltung von Elementen, setzt eine hellgraue Hintergrundfarbe für Ihre Webanwendung und definiert benutzerdefinierte Klassen für die effiziente Anwendung der importierten Schriften.

Diese Datei main.scss bietet eine solide Grundlage für den Aufbau des visuellen Stils Ihrer Webanwendung.

Fügen Sie in die Datei nuxt.config.ts, in der die Konfigurationen für Ihre Nuxt-Anwendung gespeichert sind, den folgenden Code ein:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
});

In Ihrer Nuxt-Konfigurationsdatei haben Sie die Datei main.scss als die einzige CSS-Datei definiert, die Ihre Nuxt-Anwendung verwenden wird. Außerdem haben Sie das Server Side Rendering für Ihre Nuxt-Anwendung deaktiviert.

Da Nuxt das Routing automatisch über das dateibasierte Routing-System abwickelt und wir mit der Konfiguration der Anwendung fertig sind, können wir uns an die Erstellung verschiedener Webseiten machen.

Um die Benutzeroberfläche für diese Anwendung zu erstellen, werden wir drei Seiten in einem Seitenordner im Stammverzeichnis des Projekts erstellen. Diese Seiten werden sein:

• index.vue: Dies ist die Startseite, auf der der Zweck der Anwendung vorgestellt wird.
• contactForm.vue: Diese Seite ermöglicht es Benutzern, neue Kontakte zu erstellen und in der Datenbank zu speichern.
• contactsList.vue: Diese Seite listet alle in der Datenbank gespeicherten Kontakte auf.

Fügen Sie nun in Ihre index.vue-Datei den folgenden Code ein:

// index.vue
<template>
  <div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
    <h1 class="text-4xl">Welcome to {{ appName }}!</h1>
    <p class="text-[#888888] font-md text-md w-1/2">
      This application helps you manage your contacts. You can view existing
      contacts, add new ones, and keep your contact information organized.
    </p>
    <NuxtLink to="/contactForm">
      <button
        class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
      >
        Add Contact
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
const appName = "Contact Book";
</script>

<style scoped>
.welcome {
  text-align: center;
  padding: 2rem;
}
</style>

Dieser Codeblock erstellt die Begrüßungsseite für Ihre Kontaktmanagement-Anwendung.

Er zeigt einen Titel, eine Beschreibung des Zwecks der Anwendung und eine Schaltfläche zum Navigieren zur Seite mit dem Kontaktformular an. Der Codeblock definiert auch TailWind-Klassen zur Gestaltung der Anwendung.

Fügen Sie außerdem in die Datei contactForm.vue den folgenden Code ein:

<template>
  <div>
    <p class="montserrat text-2xl font-medium text-center">
      Fill the form below to create a contact
    </p>
    <form
      @submit.prevent="createContact"
      class="flex flex-col gap-8 items-center mt-10"
    >
      <input
        v-model="contact.name"
        type="text"
        placeholder="Name"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.email"
        type="email"
        placeholder="Email"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.phone"
        type="tel"
        placeholder="Phone"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.address"
        type="text"
        placeholder="Address"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.company"
        type="text"
        placeholder="Company"
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <div>
        <button
          class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          type="submit"
        >
          Submit
        </button>
      </div>
      <p v-if="message" :class="{ error: isError }">{{ message }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const contact = ref({
  name: "",
  email: "",
  phone: "",
  address: "",
  company: "",
});
const message = ref("");
const isError = ref(false);

</script>

<style>
.error {
  color: red;
}
</style>

Der obige Codeblock definiert die Struktur eines Formulars, das App-Benutzer zum Erstellen und Speichern von Kontakten verwenden können. Hier sind die wichtigsten Punkte:

Ein Formularelement erfasst die Kontaktdaten (Name, E-Mail, Telefon, Adresse, Firma) über verschiedene Eingabefelder.

Jedes Eingabefeld ist mit einer Eigenschaft im Kontaktobjekt(V-Modell) verknüpft und verwendet entsprechende Eingabetypen für die Validierung.

Eine Schaltfläche zum Absenden löst die Funktion createContact aus, die wir im nächsten Abschnitt implementieren werden. In einem Meldungsbereich wird außerdem eine Rückmeldung (Erfolg oder Fehler) auf der Grundlage der Variablen message und isError angezeigt.

Der Codeblock verwendet Vue’s ref, um 3 reaktive Variablen zu erstellen:

• Kontakt: Speichert die eingegebenen Kontaktinformationen.
• Nachricht: Enthält Rückmeldungen für den Benutzer.
• istFehler: Gibt an, ob die Meldung einen Fehler darstellt.

Eine einfache Stilregel definiert das Aussehen von Fehlermeldungen unter Verwendung der Klasse .error im Codeblock.

Fügen Sie außerdem in die Datei contactsList.vue den folgenden Code ein:

<template>
  <div class="px-8">
    <p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
    <div class="grid grid-cols-3 gap-5 items-center justify-center">
      <div
        v-for="contact in contacts"
        :key="contact.objectId"
        class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg 
				        flex flex-col gap-3 p-3 w-11/12 items-center"
      >
        <p class="text-lg">Name: {{ contact.name }}</p>
        <p class="text-lg">Email: {{ contact.email }}</p>
        <p class="text-lg">Phone: {{ contact.phone }}</p>
        <p class="text-lg">Address: {{ contact.address }}</p>
        <p class="text-lg">Company: {{ contact.company }}</p>
        <div class="mt-5">
          <button
            @click="deleteContact(contact.objectId)"
            class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const contacts = ref([]);
</script>

Der obige Codeblock zeigt eine Liste von Kontakten in Ihrer Anwendung an. Hier sind die wichtigsten Punkte:

Der Codeblock erstellt einen Abschnitt mit dem Titel “Ihre Kontakte” und verwendet ein responsives Grid-Layout (3 Spalten) für die Anzeige der Kontakte.

Es durchläuft ein Kontakt-Array mit v-for und präsentiert die Informationen jedes Kontakts (Name, E-Mail, Telefon, Adresse, Unternehmen).

Jeder Kontakteintrag hat eine Schaltfläche “Löschen”, die die Funktion deleteContact auslöst, die wir später implementieren werden.

Der Codeblock verwendet ein reaktives Array(Kontakte), um die Kontaktliste zu speichern. Dadurch wird sichergestellt, dass die Benutzeroberfläche dynamisch aktualisiert wird, wenn sich die Daten ändern. Das Kontakte-Array speichert Daten, die Sie aus der Back4app-Datenbank geholt haben

Fügen Sie den folgenden Code in Ihre app.vue-Datei im Stammverzeichnis ein, um Routen zu all diesen Seiten einzubinden.

<template>
  <div>
    <NuxtLayout>
      <header class="flex justify-between p-8 roboto font-light">
        <NuxtLink to="/">
          <p class="text-2xl">Contact Book</p>
        </NuxtLink>

        <nav class="flex gap-5 text-md">
          <NuxtLink to="/contactsList" class="hover:text-[#888888]"
            >Contacts</NuxtLink
          >
          <NuxtLink to="/contactForm" class="hover:text-[#888888]"
            >Add Contact</NuxtLink
          >
        </nav>
      </header>
      <main>
        <NuxtPage />
      </main>
    </NuxtLayout>
  </div>
</template>

Der Codeblock definiert das Gesamtlayout der Nuxt-Anwendung mit der Komponente.

Der Codeblock enthält ein horizontales Navigationsmenü mit Links zu den Seiten contactsList.vue und contactForm.vue.

Der Codeblock enthält auch die Komponente, eine Schlüsselkomponente in Nuxt.js, die den Inhalt der aktuellen Seite dynamisch wiedergibt.

Dadurch wird sichergestellt, dass Ihre Anwendung den richtigen Inhalt anzeigt, der auf der Navigation des Benutzers innerhalb der Anwendung basiert.

Verbinden der Front-End- und Back-End-Bits Ihrer Anwendung

Um Ihre Nuxt-Kontaktanwendung mit Ihrer Back4app-Datenbank und Backend-Instanz zu verbinden, müssen Sie das Parse SDK installieren.

Das Parse SDK schlägt die Brücke zwischen Ihrer Front-End-Anwendung (Benutzeroberfläche) und Ihrem Back4App-Backend und ermöglicht Ihnen die Interaktion mit Back4App-Datenbanken und Cloud-Funktionen.

Um das Parse SDK zu installieren, führen Sie den folgenden Befehl im Terminal Ihres Stammverzeichnisses aus:

npm install parse

Nach der Installation müssen Sie Parse initialisieren, indem Sie die folgenden Informationen abrufen:

• ID der Anwendung
• JavaScript-Schlüssel
• Back4app Server URL

Sie erhalten diese Informationen, indem Sie auf dem Dashboard Ihrer Back4app-Anwendung zu Sicherheit & Schlüssel navigieren. Bewahren Sie Ihre App-ID und Ihren JavaScript-Schlüssel sicher in Ihrer Anwendung auf.

Ändern Sie nun Ihre app.vue-Datei, um Parse in Ihrer Anwendung zu initialisieren:

<template>
<!--   Previous Content -->
</template>

<script setup>
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>

Ändern Sie auch Ihre contactForm.vue- und contactsList.vue-Dateien, um Ihre Cloud-Code-Funktionen mit dem Frontend Ihrer Anwendung zu verbinden.

Fügen Sie in Ihre contactForm.vue-Seite den folgenden Code ein:

<template>
<!--   Previous Content -->
</template>

<script setup>
import { ref } from 'vue';
import Parse from 'parse';

const contact = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  company: '',
});
const message = ref('');
const isError = ref(false);

const createContact = async () => {
  try {
    await Parse.Cloud.run('createContact', { ...contact.value });
    message.value = 'Contact created successfully!';
    isError.value = false;
    
    contact.value = { name: '', email: '', phone: '', address: '', company: '' };
  } catch (error) {
    message.value = `Error: ${error.message}`;
    isError.value = true;
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

Der obige Code-Block verbindet Ihre Cloud-Code-Funktion für die Logik hinter der Erstellung eines neuen Kontakts mit Ihrer Nuxt-Anwendung.

Es interagiert mit dem Backend, um die Kontaktinformationen zu speichern, und gibt dem Benutzer eine Rückmeldung über den Erfolg oder Misserfolg des Vorgangs.

Der Codeblock versucht (mit einem try-catch-Block), eine Funktion namens createContact auf dem Back4App-Server unter Verwendung des Parse-SDK auszuführen(await Parse.Cloud.run('createContact', {...contact.value})). Dadurch werden die Kontaktinformationen(contact.value) zur Speicherung an den Back4App-Server gesendet.

Nach erfolgreicher Speicherung erscheint die Meldung “Kontakt erfolgreich angelegt!”, und das Formular wird gelöscht, wodurch das Kontaktobjekt zurückgesetzt wird und neue Einträge möglich sind.

Wenn jedoch ein Fehler auftritt, wird eine informative Fehlermeldung angezeigt, die Details vom Server mit Schablonenliteralen enthält(${error.message}).

Fügen Sie den folgenden Code in Ihre contactsList.vue-Datei ein:

<template>
  <!--   Previous Content -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";

const contacts = ref([]);

const fetchContacts = async () => {
  try {
    contacts.value = await Parse.Cloud.run("getContacts");
  } catch (error) {
    console.error("Failed to fetch contacts", error);
  }
};

const deleteContact = async (objectId) => {
  try {
    await Parse.Cloud.run("deleteContact", { objectId });
    contacts.value = contacts.value.filter(
      (contact) => contact.objectId !== objectId,
    );
  } catch (error) {
    console.error("Failed to delete contact", error);
  }
};

onMounted(fetchContacts);
</script>

Der obige Code verwaltet das Abrufen und Löschen von Kontakten für Ihre Anwendung. Er interagiert mit dem Back4App Backend, um die Speicherung und den Abruf von Daten zu verwalten.

Der Codeblock definiert zwei wesentliche Funktionen:

• fetchContacts: Diese asynchrone Funktion ruft die Liste der Kontakte aus dem Backend ab. Sie verwendet Parse.Cloud.run('getContacts') und ruft die Cloud-Code-Funktion “getContacts” auf Ihrem Back4App-Server auf. Die abgerufenen Kontakte werden in einem reaktiven Array namens contacts gespeichert.

• löschenKontakt: Diese asynchrone Funktion dient zum Löschen eines bestimmten Kontakts. Sie nimmt eine objectId als Argument, eine eindeutige Kennung für den Kontakt in der Backend-Datenbank. Die Funktion verwendet Parse.Cloud.run('deleteContact', { objectId }), um die Cloud-Codefunktion namens “deleteContact” aufzurufen und übergibt die zu löschende objectId. Bei Erfolg filtert der Code das lokale Kontakt-Array, um die gelöschten Kontakte zu entfernen.

Nachdem Sie nun das Front- und Backend der Anwendung verbunden haben, können Sie eine Vorschau der Anwendung anzeigen, indem Sie den folgenden npm-Befehl ausführen.

npm run dev

Sie werden feststellen, dass der Nuxt Nitro Server geladen wird. Nach dem Laden sollte die Anwendung unter der URL http://localhost:3000/ verfügbar sein . Wenn Sie zur URL navigieren, sollten Sie einen Bildschirm ähnlich der folgenden Abbildung sehen.

Wenn Sie zur Seite Kontakte navigieren, sollten Sie eine Reihe von Kontakten sehen. Bei diesen Kontakten handelt es sich um die Dummy-Daten, die der Back4app AI Agent während der Erstellung des Back4app-Backends für Sie erstellt hat.

Wenn Sie auf den Link Kontakt hinzufügen klicken, sollten Sie ein Formular zur Eingabe von Details für den neuen Kontakt sehen. Zum Beispiel:

Sie sollten die Felder deutlich sehen, wenn Sie auf die Schaltfläche “Absenden” klicken. Wenn Sie zur Seite “Kontakte” navigieren, sehen Sie den neu erstellten Kontakt.

Bereitstellen der vollständig erstellten Webanwendung

Nachfolgend finden Sie die Schritte zur Bereitstellung einer Nuxt-Anwendung. Nachdem Sie die Anwendung erstellt und getestet haben, können Sie die Nuxt-Anwendung mithilfe von Back4app-Containern bereitstellen, um Ihre Anwendung zu veröffentlichen.

Um den Bereitstellungsprozess zu beschleunigen, fordern Sie den Back4app AI Agent mit den folgenden Anweisungen auf:

Give me simplified steps to deploy my Nuxt application with Back4app containers

Sie sollten ähnliche Schritte wie die unten beschriebenen sehen.

Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container

Um Ihre Anwendung zu dockerisieren, erstellen Sie eine Dockerdatei und eine .dockerignore-Datei im Stammverzeichnis und fügen Sie die folgenden Skripte ein.

In der Dockerdatei:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]

Auch in der Datei .dockerignore:

node_modules
.nuxt

Ein Dockerfile enthält Anweisungen für die Erstellung eines Docker-Images. Die Dockerdatei enthält Installationsschritte für die erforderlichen Anwendungsabhängigkeiten.

Die Datei .dockerignore ist eine einfache Textdatei, die Muster auflistet, die Docker anweisen, welche Dateien und Ordner beim Erstellen des Abbilds ausgeschlossen werden sollen.

Um nun das Docker-Image Ihrer Anwendung zu erstellen, führen Sie den folgenden Docker-Befehl in Ihrem Terminal aus:

docker build -t b4a_contacts_app .

Stellen Sie sicher, dass Sie Ihre Anwendung auf Ihr GitHub-Konto pushen, bevor Sie versuchen, die Anwendung auf Back4app bereitzustellen. Sobald Sie die Anwendung gepusht haben, integrieren Sie Ihr GitHub-Konto mit Back4app.

Sie können dies mit der Back4app Github-App tun. Nachdem Sie Ihr GitHub mit Back4app integriert haben, können Sie nun Ihre Anwendung bereitstellen.

Navigieren Sie von Ihrem Back4app-Dashboard zur Seite Container.

Dann klicken Sie auf die Schaltfläche “Neue App erstellen” auf dem Bildschirm. Sie wählen dann das Repository aus, das Sie bereitstellen möchten, geben ihm den Namen b4a_contacts_app und erstellen die Anwendung. Es sollte einige Zeit dauern, bis die Bereitstellung abgeschlossen ist.

Nach der Bereitstellung sollte Ihre Live-App unter dieser URL verfügbar sein: https: //b4acontactsapp1-5990olnw.b4a.run/.

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie eine Nuxt.js-Anwendung mit einer PostgreSQL-Datenbank erstellen und bereitstellen können, und zwar innerhalb des Back4app-Ökosystems.

Sie haben auch die Vor- und Nachteile der Erstellung von Webanwendungen mit Nuxt.js kennengelernt.

Von der Erstellung der Cloud-Code-Funktionen und dem Design der Datenbank mit dem Back4App AI Agent bis hin zum Verständnis der benutzerfreundlichen Low-Code-Schnittstelle des Back4App-Backends.

Außerdem haben Sie die Nuxt-Anwendung mit Back4App Containern implementiert und sich mit den zahlreichen Tools vertraut gemacht, die Back4App zur Optimierung der App-Entwicklung bereitstellt.

Mit dieser Kombination von Tools sind Sie auf dem besten Weg, Webanwendungen schnell zu erstellen und zu implementieren.

Sie können mehr über die Funktionsweise des KI-Agenten erfahren, um sich mit der Rationalisierung Ihrer App-Entwicklung vertraut zu machen.