使用Django开发“TodoList”Web应用程序的步骤
简要概述
使用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/
如果成功,将显示如下应用程序。

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