使用Django开发“TodoList”Web应用程序的步骤

2 年 ago
逸, 科
5 minutes

简要概述

使用Python3和Django3来创建一个ToDo列表。使用Django的通用类视图来实现以下基本的CRUD功能。

展示待办事项列表功能
显示待办事项详细内容功能
创建待办事项功能
编辑待办事项功能
删除待办事项功能

开发环境

开发环境使用以下内容：
Python 3.10.6
Django 4.1.5（与版本3.0相比增加了一些功能，但基本规格没有改变。）

GitHub – GitHub (基于 Git 的代码托管平台)

样本程序的存储库位于以下网址：
https://github.com/miyazaki-tsubasa/TodoListproject/tree/main/todoproject

用Django创建的任务清单。

虚拟环境的建立

用下列命令构建Python虚拟环境。确认Python版本。

$ python3

当版本显示出来后，点击确定即可。

创建项目

创建一个名为todoproject的文件。

tsuba_miya2345@ASUS01:~/work/todoproject$

根据上述方式进行创建。

创建虚拟环境

tsuba_miya2345@ASUS01:~/work/todoproject$ python3 -m venv venv

tsuba_miya2345@ASUS01:~/work/todoproject$ ls

确认venv已创建

tsuba_miya2345@ASUS01:~/work/todoproject$ source ~/venv/bin/activate

(venv)tsuba_miya2345@ASUS01:~/work/todoproject$

成为这种情况。

请在虚拟环境中使用以下命令安装Django。

(venv)tsuba_miya2345@ASUS01:~/work/todoproject$ pip3 install django

创建项目

请使用以下命令来创建Django项目。

(venv)~$ python3 -m django startproject todoproject .

创建待办事项应用程式

请执行以下命令以创建一个待办事项应用程序：

$ python3 manage.py startapp todo

嵌入式设置的待办事项应用程序

修改 mysite/settings.py 文件，将 todo 应用程序集成进去。

mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig', #todoアプリケーションの組み込み
]

创建一个待办事项应用程序的模型。

这次我们创建了一个简单的模型，其中包括”任务标题”、”备忘录”、”优先级”和”删除项目”。

在 todo/models.py 文件中

from django.db import models

# Create your models here.

CHOICE = (('danger','high'),('warning','normal'),('primary','low'))

class TodoModel(models.Model):
    title = models.CharField(max_length=100)
    memo = models.TextField()
    priority = models.CharField(
        max_length=50,
        choices = CHOICE,
        null =True
     )
    duedate = models.DateField()

#管理画面のobjectの表示をタイトルと一致して表示
    def __str__(self):
        return self.title

创建一个待办事项应用程序的视图。

使用Django的通用类视图来创建ToDo应用程序的视图，以适应ToDo的每个功能。

以下是todo/views.py文件的本地化中文解释：

todo/views.py是一个文件的路径，表示在todo应用程序中的视图部分。

todo/views.pyfrom django.shortcuts import render
from django.views.generic import ListView,DetailView,CreateView,DeleteView,UpdateView
from .models import TodoModel
from django.urls import reverse_lazy

# ToDoの一覧表示機能
class TodoList(ListView):
    template_name = 'list.html'
    model = TodoModel

# ToDoの詳細表示機能
class TodoDetail(DetailView):
    template_name = 'detail.html'
    model = TodoModel

# ToDoの作成機能
class TodoCreate(CreateView):
    template_name = 'create.html'
    model = TodoModel
    fields = ('title','memo','priority','duedate')
    success_url = reverse_lazy('list')

# ToDoの削除機能
class TodoDelete(DeleteView):
    template_name = 'delete.html'
    model = TodoModel
    success_url = reverse_lazy('list')

# ToDoの編集機能
class TodoUpdate(UpdateView):
    template_name = 'update.html'
    model = TodoModel
    fields = ('title','memo','priority','duedate')
    success_url = reverse_lazy('list')

设置todo应用程序的URL

首先，当在浏览器中通过todo/进行连接时，要进行的是在todo应用的URL设置上而不是todoproject的URL设置上进行参考。

todoproject/urls.py的中文翻译选项：
– 项目/urls.py
– 项目的urls.py文件
– 任务项目的URL配置
– 待办事项项目的URL配置文件

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

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

将todo应用程序的URL设置如下所示。

todo/urls.py 的中文翻译如下：“`任务/网址.py“`

#from django.contrib import admin
from django.urls import path,include
from .views import TodoList,TodoDetail,TodoCreate,TodoDelete,TodoUpdate

urlpatterns = [
    path('list/', TodoList.as_view(),name='list'),
    path('detail/<int:pk>', TodoDetail.as_view(),name='detail'),
    path('create', TodoCreate.as_view(),name='create'),
    path('delete/<int:pk>',TodoDelete.as_view(),name='delete'),
    path('update/<int:pk>',TodoUpdate.as_view(),name='update')

]

创建待办事项应用程序模板

请先按照下面的方式创建一个用于模板的目录。

(venv) tsuba_miya2345@ASUS01:~/work/todoproject$ mkdir -p templates/todo

下面我们将创建一个作为HTML基础的模板。

todoproject/templates/base.html is a Chinese version of the request.

<!doctype html>
<html lang="en">
 <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    {% block header %}
    {% endblock header %}
    {% block content %}
    {% endblock content %}
</body>
</html>

按照以下方式创建用于ToDo列表显示功能的模板。

todoproject/templates/todo/list.html 的翻译为中文:
项目目录/模板/待办事项/列表.html

{% extends 'base.html' %}

{% block header %}
<div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">TodoList</h1>
      <p class="lead">TodoListを作成して、生産的な毎日を過ごしましょう</p>
    </div>
  </div>{% endblock %}

{% block content %}
    <div class="container">
    <a href="{% url 'create'  %}" class="btn btn-secondary mb-2 " tabindex="-1" role="button" aria-disabled="true">新規作成画面へ</a>
    {% for item in object_list %}
    <div class="alert alert-{{ item.priority }}" role="alert">
        <p>{{ item.title }}  期日{{ item.duedate | date:"o/n/j "}}</p>
        <a href="{% url 'update' item.pk %}" class="btn btn-info " tabindex="-1" role="button" aria-disabled="true">編集画面へ</a>
        <a href="{% url 'delete' item.pk %}" class="btn btn-success " tabindex="-1" role="button" aria-disabled="true">削除画面へ</a>
        <a href="{% url 'detail' item.pk %}" class="btn btn-primary " tabindex="-1" role="button" aria-disabled="true">詳細画面へ</a>
    </div> 
 {% endfor %}
</div>
 {% endblock content %}

请按照以下方式创建用于Todo的新建功能的模板。

请将以下内容用中文进行本地化改写，只需要一种选项:
todoproject/templates/todo/create.html

{% extends 'base.html' %}

{% block content %}
<form action = '' method = 'POST'>{% csrf_token %}
{{ form.as_p }}
<input type = 'submit' value = 'create'>
</form>
{% endblock content %}

根据以下方式创建用于ToDo详细显示功能的模板。

请将以下内容用中文进行翻译，只需要给出一种选项：
todoproject/templates/todo/detail.html

{% extends 'base.html' %}

{% block header %}
<div class="alert alert-dark" role="alert">
    detail
</div>
{% endblock %}

{% block content %}
<div class="alert alert-success" role="alert">
    {{ object.title }}
</div>
<div class="alert alert-success" role="alert">
    {{ object.memo }}
</div>
{% endblock content %}

按照以下方式创建用于删除ToDo功能的模板。

请原生地用中文解释以下内容，只需要一种选项：
todoproject/templates/todo/delete.html。

「todoproject/templates/todo/delete.html」意思是指位于todoproject项目中的模板文件，用于处理待办事项的删除操作。

{% extends 'base.html' %}
{% block content %}
<form action = '' method = 'POST'>{% csrf_token %}
<input type = 'submit' value = 'delete'>
</form>
{% endblock content %}

请按照以下方式创建用于ToDo更新功能的模板。

将以下内容以中文进行本地化释义，仅需一种选项：
todoproject/templates/todo/update.html

待办项目/模板/待办事项/更新.html

{% extends 'base.html' %}

{% block content %}
<form action = '' method = 'POST'>{% csrf_token %}
{{ form.title }}
{{ form.memo }}
{{ form.priority }}
{{ form.duedate }}
<input type = 'submit' value = 'update'>
</form>
{% endblock content %}

待办事项应用程序的迁移

请执行以下命令来创建用于todo应用的数据库表。

(venv) tsuba_miya2345@ASUS01:~/work/todoproject $ python3 manage.py makemigrations

(venv) tsuba_miya2345@ASUS01:~/work/todoproject$ python3 manage.py migrate

确认应用程序的运行

程序已经完成，现在进行应用程序的运行验证。
通过以下命令启动Django服务器。

(venv) tsuba_miya2345@ASUS01:~/work/todoproject$ python3 manage.py runserver

打开浏览器，并访问下列网址：
http://127.0.0.1:8080/todo/list/
如果成功，将显示如下应用程序。

スクリーンショット_20230112_160927.png

上述的例子是一个实际进行新建并创建任务的例子。

✖
广告
将在 10 秒后关闭
bannerAds