Python Django教程之实现待办事项应用程序

Python Django教程之实现待办事项应用程序

1. 前置知识

在学习实现待办事项应用程序之前，我们需要掌握以下基础知识：

Django框架：Django 是一个基于 Python 语言的开源 Web 应用程序框架，遵循MVT（模型-视图-模板）设计模式。它提供了完整的开发工具和模块，使得我们能够使用 Python 构建高效的 Web 应用。

HTML、CSS、JavaScript：HTML 是一种标记语言，用于创建网页；CSS 是一种层叠样式表语言，用于描述网页的显示风格；JavaScript 是一种脚本语言，用于制作网页的动态效果。

2. 创建 Django 项目

我们先来创建一个 Django 项目：

# 创建项目
django-admin startproject todo_list
# 启动开发服务器
python manage.py runserver

在浏览器中访问 http://localhost:8000/，你将看到 Django 的欢迎页面。

3. 创建待办事项应用程序

接下来，我们需要创建待办事项应用程序：

# 创建应用程序
python manage.py startapp todo

创建完成后，我们需要在主项目的 `settings.py` 文件中注册该应用程序：

# todo_list/settings.py
INSTALLED_APPS = [
    # ...
    'todo',
]

4. 数据库设计

在这个应用程序中，我们需要存储待办事项的相关信息。因此，我们需要定义一个数据模型来表示每个待办事项。

# todo/models.py
from django.db import models
class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    def __str__(self):
        return self.title

上述代码中，我们创建了一个名为 `Task` 的 Django 模型，它具有以下字段：

- `title`：待办事项的标题，使用 `CharField` 类型表示，长度为 200；

- `completed`：待办事项是否完成，使用 `BooleanField` 类型表示，初始值为 `False`；

- `created_at`：待办事项创建时间，使用 `DateTimeField` 类型表示，自动填充当前时间；

- `updated_at`：待办事项更新时间，使用 `DateTimeField` 类型表示，每次保存时自动更新。

5. 创建视图函数

我们需要创建视图函数来处理用户的请求并返回相应的页面。

# todo/views.py
from django.shortcuts import render
from .models import Task
def index(request):
    tasks = Task.objects.order_by('-created_at')
    context = {'tasks': tasks}
    return render(request, 'todo/index.html', context)

上述代码中，我们编写了一个名为 `index` 的视图函数，它查询数据库中所有待办事项，并将数据传递给模板进行渲染。

6. 创建模板

现在，我们需要创建模板文件 `index.html`，用于显示待办事项的列表。

{% extends 'todo/base.html' %}
{% block content %}
  
Todo List
  

    {% csrf_token %}
    
    Add
  

  {% if tasks %}
    
      {% for task in tasks %}
        
          {{ task.title }}
          

            Edit
            

              {% csrf_token %}
              Delete
            

            

              {% csrf_token %}
              {% if task.completed %}Undo{% else %}Complete{% endif %}
            

          

        
      {% endfor %}
    
  {% else %}
    No tasks.
  {% endif %}
{% endblock %}

上述代码中，我们使用 Django 模板语言编写了一个简单的 HTML 页面，其中包含待办事项的列表。具体来说，我们需要展示待办任务的标题，是否已完成等信息，并提供编辑、删除和标记（完成或撤销）功能。

7. 创建 URL 路由

现在，我们需要创建 URL 路由来将请求路由到我们的视图函数。

# todo/urls.py
from django.urls import path
from . import views
app_name = 'todo'
urlpatterns = [
    path('', views.index, name='index'),
    path('add/', views.add, name='add'),
    path('edit//', views.edit, name='edit'),
    path('toggle//', views.toggle, name='toggle'),
    path('delete//', views.delete, name='delete'),
]

上述代码中，我们创建了名为 `app_name` 的应用程序命名空间，并将 URL 路由映射到视图函数。

8. 编写视图函数

我们需要编写视图函数来处理添加、编辑、删除和切换任务状态的请求。

首先，我们来编写添加任务的视图函数：

# todo/views.py
from django.shortcuts import render, redirect
from django.urls import reverse
from django.http import Http404
from .models import Task
from .forms import TaskForm
def add(request):
    if request.method == 'POST':
        form = TaskForm(request.POST)
        if form.is_valid():
            title = form.cleaned_data['title']
            task = Task(title=title)
            task.save()
            return redirect(reverse('todo:index'))
    else:
        form = TaskForm()
    context = {'form': form}
    return render(request, 'todo/add.html', context)

在上述代码中，我们编写了一个名为 `add` 的视图函数，它将添加的任务保存到数据库，并重定向到待办任务列表页。

我们同样需要创建编辑和删除任务的视图函数：

# todo/views.py
def edit(request, id):
    try:
        task = Task.objects.get(id=id)
    except Task.DoesNotExist:
        raise Http404('Task not found')
    if request.method == 'POST':
        form = TaskForm(request.POST, instance=task)
        if form.is_valid():
            form.save()
            return redirect(reverse('todo:index'))
    else:
        form = TaskForm(instance=task)
    context = {'form': form, 'task': task}
    return render(request, 'todo/edit.html', context)
def delete(request, id):
    try:
        task = Task.objects.get(id=id)
    except Task.DoesNotExist:
        raise Http404('Task not found')
    if request.method == 'POST':
        task.delete()
        return redirect(reverse('todo:index'))
    context = {'task': task}
    return render(request, 'todo/delete.html', context)

上述代码中，`edit` 视图函数将打开一个表单，用于编辑指定任务的标题和完成状态。`delete` 视图函数将删除指定任务。

最后，我们来编写切换任务状态的视图函数：

# todo/views.py
def toggle(request, id):
    try:
        task = Task.objects.get(id=id)
    except Task.DoesNotExist:
        raise Http404('Task not found')
    task.completed = not task.completed
    task.save()
    return redirect(reverse('todo:index'))

上述代码中，我们只需要将指定任务的完成状态取反，并将更改保存到数据库。

9. 创建表单

我们还需要创建表单类来处理添加和编辑任务的请求。下面是一个简单的表单类示例：

# todo/forms.py
from django import forms
from .models import Task
class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'completed']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control'}),
            'completed': forms.CheckboxInput(attrs={'class': 'form-check-input'}),
        }

上述代码中，我们创建了一个名为 `TaskForm` 的表单类，它使用 Django 表单模型，并定义了一个包含 `title` 和 `completed` 两个字段的表单。

10. 整合样式表

最后，我们需要整合样式表 `styles.css`，用于美化应用程序页面效果。

  
    
    
    
  
  
    

    

      {% block content %}
      {% endblock %}
    

  

总结

在本文中，我们学习了如何使用 Django 框架创建一个待办事项应用程序。我们了解了 Django 的模型-视图-模板设计模式，学习了如何设计数据库模型并使用视图函数和模板渲染器来处理请求和响应。同时，我们还学习了如何使用表单类和样式表来改进应用程序的界面和功能。