Todo-App-Backend-Vorlage
Vue — Schema, API & KI-Leitfaden

Wichtige Erkenntnisse

Übersicht

Eine Todo-App ist einer der häufigsten Ausgangspunkte zum Lernen der Backend-Entwicklung. Im Hintergrund benötigt sie Benutzerregistrierung, Aufgaben-CRUD, besitzbasierte Zugriffskontrolle und optional Echtzeitsynchronisation.

Das folgende Schema definiert zwei Klassen — _User (integriert) und Todo — die durch einen Pointer verbunden sind. Mit dem Back4app Vue SDK können Sie von Ihrer App aus mit diesem Backend interagieren — Abfragen, Erstellen, Aktualisieren und Löschen von Objekten — ohne eine benutzerdefinierte API-Schicht zu schreiben.

Warum Ihr Vue Todo-Backend mit Back4app erstellen?

Back4app bietet Ihnen ein fertiges Backend und ein typisiertes SDK, damit Sie Ihre Todo-App erstellen können, ohne REST-Glue zu schreiben oder die Authentifizierung selbst zu verwalten.

• •SDK & Typsicherheit: Das SDK hält Todo und Benutzer typsicher und verarbeitet JSON, sodass Sie weniger Boilerplate schreiben.
• •Async & optionale Offline: Verwenden Sie async/await; unterstützte SDKs bieten lokale Speicherung, sodass Ihre Liste offline funktioniert und beim Online-Sein synchronisiert wird.
• •Live Queries: Abonnieren Sie Änderungen an Todo, damit die UI in Echtzeit über WebSockets aktualisiert wird.

Das gleiche Schema und die gleichen APIs für jeden Stack — wechseln Sie später die Clients, ohne das Backend zu ändern.

Kernvorteile

Ein produktionsbereites Todo-Backend, damit Sie schneller liefern und sich auf Ihre App konzentrieren können.

Technologiestack

Alles, was diese Todo-App-Vorlage auf einen Blick antreibt.

ER-Diagramm

Entity-Relationship-Diagramm für das Vue Todo-App-Datenmodell.

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

Integrationsfluss

Auth-to-CRUD-Sequenz: wie Ihre Vue-App mit Back4app kommuniziert — anmelden, dann Todos abfragen und erstellen.

sequenceDiagram
  participant User
  participant App as Vue App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load todos
  App->>Back4app: new Parse.Query('Todo').find()
  Back4app-->>App: List of Todo
  App-->>User: Show list

  User->>App: Create todo
  App->>Back4app: todo.save()
  Back4app-->>App: Todo (objectId)
  App-->>User: Updated list

Datenwörterbuch

Vollständige Feldreferenz für jede Klasse im Schema.

Sicherheit & Berechtigungen

Wie Eigentum, ACLs und Klassenberechtigungen Daten in diesem Schema schützen.

Schema (JSON)

Rohes JSON-Schema-Definition — kopieren und in Ihrer Back4app-App verwenden oder über die API importieren.

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API Playground

Testen Sie die REST- und GraphQL-Endpunkte für das Todo-Schema. Antworten aus den obigen Beispieldaten — kein Back4app-Konto erforderlich.

Verwendet dasselbe Todo-Schema wie diese Vorlage.

Schritt-für-Schritt Vue Integration

Verbinden Sie sich von einer Vue App mit Ihrem Back4app Backend unter Verwendung des Back4app Vue SDK.

1. Schritt 1: Installieren Sie das Back4app Vue SDK

   Fügen Sie das Back4app SDK für Ihren Stack hinzu (z.B. npm, pubspec oder Paketmanager).

   Bash

   Kopieren

   1

   npm install parse pinia

2. Schritt 2: Initialisieren Sie Back4app in Ihrer App

   Initialisieren Sie das Back4app SDK beim Start der App mit Ihrer App-ID und der Server-URL.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   // main.ts
   import { createApp } from 'vue';
   import { createPinia } from 'pinia';
   import Parse from 'parse';
   import App from './App.vue';
   
   Parse.initialize(
     import.meta.env.VITE_PARSE_APP_ID,
     import.meta.env.VITE_PARSE_JS_KEY,
     { serverURL: 'https://parseapi.back4app.com' }
   );
   Parse.serverURL = 'https://parseapi.back4app.com';
   
   createApp(App).use(createPinia()).mount('#app');

3. Schritt 3: Alle Todos abfragen

   Verwenden Sie das SDK, um alle Todo-Objekte nach Priorität abzurufen.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   // In component or store
   async function getTodos() {
     const query = new Parse.Query('Todo');
     query.ascending('priority');
     return await query.find();
   }

4. Schritt 4: Erstellen Sie ein Todo

   Erstellen Sie ein neues Todo mit Titel, erledigt und Priorität und speichern Sie es.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   async function createTodo(title: string, priority = 3) {
     const Todo = Parse.Object.extend('Todo');
     const todo = new Todo();
     todo.set('title', title);
     todo.set('done', false);
     todo.set('priority', priority);
     await todo.save();
     return todo;
   }

5. Schritt 5: Todos aktualisieren und löschen

   Felder aktualisieren und speichern oder das Objekt löschen.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   async function markDone(objectId: string) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     todo.set('done', true);
     await todo.save();
   }
   async function deleteTodo(objectId: string) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     await todo.destroy();
   }

Vollständiges Datenmodell

Kopieren Sie ein vollständiges Todo-Modell für typsichere Serialisierung (z. B. Klasse, Schnittstelle oder Typdefinition).

// types/todo.ts
interface Todo {
  objectId?: string;
  title: string;
  done: boolean;
  dueDate?: string;
  priority: number;
  owner?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

function toTodo(obj: Parse.Object): Todo {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    done: obj.get('done') ?? false,
    dueDate: obj.get('dueDate')?.toISOString?.() ?? undefined,
    priority: obj.get('priority') ?? 3,
    owner: obj.get('owner'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Häufig gestellte Fragen

Häufige Fragen zum Backend-Template der Todo-App.