Todo 應用程式後端模板
Vue - 模式、API 與 AI 指南

主要心得

概述

Todo 應用程式是學習後端開發最常見的起點之一。它需要使用者註冊、任務 CRUD、基於所有權的存取控制，以及可選擇的即時同步。

下面的模式定義了兩個類別 - _User（內建）和 Todo，它們由一個 Pointer 連接。使用 Back4app Vue SDK，您可以從應用程式與此後端互動 - 查詢、建立、更新及刪除物件 - 而無需撰寫自訂 API 層。

为什么使用 Back4app 构建您的 Vue Todo 后端？

Back4app為您提供了一個就緒的後端和類型化的 SDK，因此您可以建立您的 Todo 應用程式，而無需自行撰寫 REST 程式或管理 auth。

• •SDK 與類型安全: SDK 保持 Todo 和 User 的類型安全，並處理 JSON，因此您可以少寫一些模板。
• •非同步與可選的離線: 使用 async/await；支援的 SDK 提供本機釘選功能，因此您的清單可以離線運作，並在重新連線時進行同步。
• •__品牌0__: 訂閱 Todo 變更，讓使用者介面透過 WebSockets 即時更新。

每個堆疊都有相同的模式和 API - 稍後可切換用戶端，而無需變更後端。

核心優勢

生產就緒的 Todo 後端，讓您可以更快速地出貨並專注於您的應用程式。

技術堆疊

此 Todo 應用程式範本的所有功能一目了然。

ER 圖

Vue Todo 應用程式資料模型的實體關係圖。

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"

整合流程

Auth-to-CRUD 序列：您的 Vue 應用程式如何與 Back4app 對話 - 登入，然後查詢和建立待辦事項。

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

資料詞典

模式中每個類別的完整欄位參考。

安全性與權限

擁有權、ACL 及類別層級權限如何保護此模式中的資料。

模式 (JSON)

原始 JSON 方案定義 - 複製並在您的 Back4app 應用程式中使用，或透過 API 匯入。

{
  "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 遊樂場

請嘗試 Todo 方案的 REST 和 GraphQL 端點。來自上述範例資料的回應 - 不需要 Back4app 帳戶。

使用與此模板相同的 Todo 模式。

分步式 Vue 整合

使用 Back4app Vue SDK 從 Vue 應用程式連接至您的 Back4app 後端。

1. 步驟 1: 安裝 Back4app Vue SDK

   為您的堆疊加入 Back4app SDK (例如 npm、pubspec 或套件管理員)。

   Bash

   複製

   1

   npm install parse pinia

2. 步驟 2：在應用程式中初始化 Back4app

   在應用程式啟動時，使用您的應用程式 ID 和伺服器 URL 來初始化 Back4app SDK。

   JavaScript

   複製

   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. 步驟 3：查詢所有待辦事項

   使用 SDK 取得所有 Todo 物件，並依優先順序排序。

   JavaScript

   複製

   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. 步驟 4：建立待辦事項

   建立有標題、已完成和優先順序的新 Todo，然後儲存。

   JavaScript

   複製

   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. 步驟 5：更新和刪除待辦事項

   更新欄位並儲存，或刪除物件。

   JavaScript

   複製

   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();
   }

完整資料模型

複製完整的 Todo 模型進行類型安全序列化 (例如類別、介面或類型定義)。

// 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,
  };
}

常見問題

有關 Todo 應用程式後端模板的常見問題。