從頭開始建立 Django CRUD Todo 應用程式

我相信學習全端開發的最佳方法是使用該語言創建一個具有簡單前後端/端和資料庫連接的 CRUD 應用程式。
因此，本指南將引導您使用 Django 建立簡單的 CRUD（建立、讀取、更新、刪除）Todo 應用程式。我們將設定項目，建立應用程序，並在 Django 推薦的目錄結構中組織所有內容。

我的 Github、推特

先決條件

在我們開始之前，請確保您已經：

• Python已安裝（最好是3.6版本）
• Django 安裝（如果尚未安裝，請使用 pip install django 安裝）

步驟概述

1. 設定 Django 專案和應用程式
2. 定義 Todo 的模型
3. 為 CRUD 操作建立視圖
4. 為每個視圖新增 URL
5. 為應用程式建立 HTML 範本
6. 運行伺服器

---

第 1 步：設定 Django 專案和應用程式

1. 建立一個名為todo_project的Django專案：

   django-admin startproject todo_project
   cd todo_project

1. 建立一個名為todo的應用程式：

   python manage.py startapp todo

1. 此時的目錄結構：

您的資料夾應如下所示：

   todo_project/
   ├── manage.py
   ├── todo/                  # App directory created
   │   ├── migrations/
   │   ├── __init__.py
   │   ├── admin.py
   │   ├── apps.py
   │   ├── models.py
   │   ├── tests.py
   │   ├── views.py
   └── todo_project/
       ├── __init__.py
       ├── asgi.py
       ├── settings.py
       ├── urls.py
       ├── wsgi.py

1. 在 todo_project/settings.py 中註冊應用程式： 開啟 settings.py 並將「todo」加入 INSTALLED_APPS：

   INSTALLED_APPS = [
       # Other installed apps
       'todo',
   ]

---

第 2 步：定義 Todo 模型

1. 在 todo/models.py 中定義 Todo 模型：

新增以下程式碼以建立一個模型，其中包含任務（描述）和已完成（狀態）欄位。

   from django.db import models

   class Todo(models.Model):
       task = models.CharField(max_length=200)
       completed = models.BooleanField(default=False)

       def __str__(self):
           return self.task

1. 應用遷移:

定義模型後，執行以下指令為此模型建立資料庫表：

   python manage.py makemigrations
   python manage.py migrate

---

步驟3：建立CRUD操作的視圖

在 todo/views.py 中定義用於建立、列出、更新和刪除待辦事項的視圖：

from django.shortcuts import render, redirect
from .models import Todo

# Create a new Todo
def create_todo(request):
    if request.method == 'POST':
        task = request.POST['task']
        Todo.objects.create(task=task)
        return redirect('list_todos')
    return render(request, 'todo/create_todo.html')

# List all Todos
def list_todos(request):
    todos = Todo.objects.all()
    return render(request, 'todo/list_todos.html', {'todos': todos})

# Update a Todo
def update_todo(request, todo_id):
    todo = Todo.objects.get(id=todo_id)
    if request.method == 'POST':
        todo.task = request.POST['task']
        todo.completed = 'completed' in request.POST
        todo.save()
        return redirect('list_todos')
    return render(request, 'todo/update_todo.html', {'todo': todo})

# Delete a Todo
def delete_todo(request, todo_id):
    todo = Todo.objects.get(id=todo_id)
    todo.delete()
    return redirect('list_todos')

---

第 4 步：新增 URL 模式

在 todo/urls.py 中定義每個視圖的 URL：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.list_todos, name='list_todos'),
    path('create/', views.create_todo, name='create_todo'),
    path('update/<int:todo_id>/', views.update_todo, name='update_todo'),
    path('delete/<int:todo_id>/', views.delete_todo, name='delete_todo'),
]

在主 urls.py 檔案中，包含應用程式的 URL：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('todo.urls')),
]

---

第 5 步：建立 HTML 模板

現在，在 todo 應用程式的 templates 目錄中建立 HTML 模板。遵循以下結構：

todo/
├── migrations/
├── templates/
│   └── todo/
│       ├── list_todos.html
│       ├── create_todo.html
│       └── update_todo.html
├── models.py
├── views.py
└── ...

1. 建立範本資料夾結構：

   mkdir -p todo/templates/todo

1. 建立範本:

list_todos.html

顯示任務清單並提供用於新增、編輯或刪除任務的連結。

   django-admin startproject todo_project
   cd todo_project

建立待辦事項.html

用於新增任務的表單。

   python manage.py startapp todo

update_todo.html

用於編輯現有任務的表單。

   todo_project/
   ├── manage.py
   ├── todo/                  # App directory created
   │   ├── migrations/
   │   ├── __init__.py
   │   ├── admin.py
   │   ├── apps.py
   │   ├── models.py
   │   ├── tests.py
   │   ├── views.py
   └── todo_project/
       ├── __init__.py
       ├── asgi.py
       ├── settings.py
       ├── urls.py
       ├── wsgi.py

---

第 6 步：運行伺服器

現在一切都已設定完畢，運行 Django 開發伺服器來測試應用程式：

   INSTALLED_APPS = [
       # Other installed apps
       'todo',
   ]

在瀏覽器中造訪http://127.0.0.1:8000/。您應該看到待辦事項清單並能夠建立、更新和刪除任務。

---

最終目錄結構

   from django.db import models

   class Todo(models.Model):
       task = models.CharField(max_length=200)
       completed = models.BooleanField(default=False)

       def __str__(self):
           return self.task

---

就是這樣！您已成功建立具有 CRUD 介面的 Django Todo 應用程式。這種結構是可擴展的，您現在可以添加其他功能或使用 CSS 設計應用程式的樣式。快樂編碼！

以上是從頭開始建立 Django CRUD Todo 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！