Nuxt-Integration

Erstelle ein neues Nuxt-Projekt mit einer pages/index.vue.

Hardcode vorerst den Titel und den Text der Seite.

<script setup>

  const page = {
    "title": "Home",
    "text": "Lorem ipsum dolor sit amet."
  }

</script>

<template>
  <main>
  <h1>{{ page.title }}</h1>
  <p>{{ page.text }}</p>
  </main>
</template>

Jetzt verschieben wir diese Daten aus dem Code nach Orbitype.

Erstelle ein neues Orbitype-Projekt mit einer Datei pages/home.json.

Öffne die Datei, wechsle in den Code-Modus und kopiere deine Daten hinein:

{
  "title": "Home",
  "text": "Lorem ipsum dolor sit amet."
}

Wechsle zurück zur Vue-Datei und ersetze die hardcodierten Daten durch einen Fetch-Call:

const page = await $fetch(import.meta.env.VITE_S3_URL + "/pages/home.json")

Es wird empfohlen, die S3-Basis-URL aus einer Umgebungsvariable zu laden.

Du findest deine S3-Basis-URL in den Projekteinstellungen.

Alternativ kannst du im Kontextmenü einer Datei Get file URL auswählen.

Nun kannst du die Seitendaten in Orbitypes visueller Baumansicht bearbeiten.

Probiere komplexere Strukturen wie Arrays und verschachtelte Objekte aus.

Orbitype unterstützt jede JSON-kompatible Datenstruktur.

Für komplexere Anwendungsfälle kannst du eine Datenbank mit deinem Projekt verbinden.

Über die API von Orbitype kannst du dann alle möglichen CRUD-Operationen umsetzen.

Beginne damit, in den Projekteinstellungen einen neuen Connector hinzuzufügen.

Wähle die SQL-Implementierung und gib die Zugangsdaten deiner Datenbank an.

Diese werden beim Speichern mit AES-256 verschlüsselt.

Erstelle anschließend einen API-Schlüssel für den neuen Connector und speichere ihn als Umgebungsvariable.

Erstelle in deinem Nuxt-Projekt eine Datei server/api/comments/index.get.js.

Nutze die Orbitype-API, um eine Liste von Kommentaren abzurufen:

import qs from "qs" // npm install qs

export default defineEventHandler(async (event) => {

  const bindings = getQuery(event)

  let sql = "SELECT * FROM comments"

  if (bindings.id) sql += " WHERE id = :id"

  else sql += " ORDER BY created_at DESC"

  return await $fetch("https://core.orbitype.com/api/sql/v1" + qs.stringify({ sql, bindings }),
  { headers: { "X-API-KEY": import.meta.env.ORBITYPE_API_KEY } })
})

Ähnlich kannst du einen neuen Kommentar mit einer INSERT-Anweisung erstellen.

Erstelle dazu eine Datei server/api/comments/index.post.js mit folgendem Inhalt:

export default defineEventHandler(async (event) => {

  const bindings = await readBody(event)

  let sql = "INSERT INTO comments (text)"

  sql += " VALUES (:text)"

  return await $fetch("https://core.orbitype.com/api/sql/v1",
  {
    method: "POST",
    body: { sql, bindings },
    headers: { "X-API-KEY": import.meta.env.ORBITYPE_API_KEY },
  })
})

Ähnlich kannst du einen neuen Kommentar mit einer INSERT-Anweisung erstellen.

Erstelle dazu eine Datei server/api/comments/index.post.js mit folgendem Inhalt:

export default defineEventHandler(async (event) => {

  const bindings = await readBody(event)

  let sql = "INSERT INTO comments (text)"

  sql += " VALUES (:text)"

  return await $fetch(

  "https://core.orbitype.com/api/sql/v1",
  {
    method: "POST",
    body: { sql, bindings },
    headers: { "X-API-KEY": import.meta.env.ORBITYPE_API_KEY },
  })
})

Rufe in deinen Vue-Templates die API-Endpunkte auf und nutze die Daten:

<script setup>

const comments = await $fetch("/api/comments")

async function createComment() {

await $fetch("/api/comments", {

method: "POST",

body: { text: "Hallo, Welt!" },

})

}

</script>

<template>
  <ul>
    <li v-for="c of comments">
      <h2>{{ c.text }}</h2>
      <time>{{ c.created_at }}</time>
    </li>
  </ul>
</template>