用Django/Mac创建的针对新工程师的新工程师编写的新工程师ToDo应用程序

2 年 ago
新, 韵
5 minutes

首先

你好，我是一位没有实际工作经验/没有任何IT知识的新手工程师。
这次我第一次使用Python/Django开发了一个应用程序。

这是我第一次制作应用程序，我感到非常兴奋！然而，这种兴奋感在一瞬间被打破了…
我自己的知识和经验明显不足，完全无法动手…
那一刻，真的很痛苦…

为了不让其他新人工程师有同样的经历，我打算记录下来！

进行的内容

用电脑：苹果电脑

    • Pythonのインストール

 

    • Djangoでの開発環境の準備

 

    ToDoListの機能を持ったWebアプリケーション開発

Python的安装

首先，我进行了开发所用Python的安装。
另外，还需要先安装用于安装Python的工具。
作为一个初学者，我在这个阶段已经很难了…

安装Homebrew

首先，我们要确认Homebrew是否已经安装成功。

启动终端，并执行以下命令。

brew -v

关于显示

如果显示为 “zsh: command not found: brew”

表示没有安装Homebrew

如果显示为 “Homebrew ~.~.~”

表示已经安装了，所以可以跳过这一步。

请在终端中执行以下命令。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
请注意：在途中的时候，会要求您输入用于登录电脑的密码，输入后按下Enter键（此时屏幕上不会显示任何内容，但密码已正常输入）。另外，在安装过程中也需要按下“Enter键”。

在使用搭载M1芯片的Mac电脑时，请执行以下两个命令。

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc

source ~/.zshrc

接下来，执行以下命令。

brew -v

只要显示类似「Homebrew ~.~.~」这样的文字就可以了！

安装pyenv

首先，需要确认一下是否安装了pyenv。

执行以下命令

pyenv -v

关于显示

如果显示为“zsh: command not found: pyenv”

这意味着尚未安装Homebrew

如果显示为“pyenv ~.~.~”

表示已经安装，所以可以跳过这一节

执行以下命令

brew install pyenv

执行以下命令

pyenv -v

只要显示类似「pyenv ~.~.~」的文字就可以了！

pyenv的配置

执行以下命令后，您可以将pyenv初始化配置的设置写入.zshrc文件中。

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc

echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc

echo 'eval "$(pyenv init -)"' >> ~/.zshrc

通过执行以下命令，使.zshrc文件的设置生效。

source ~/.zshrc
注意：执行这些命令时，不会有任何特别的显示。

通过以上步骤，pyenv的设置已经完成。

安装xz

执行下列命令。

brew install xz

安装Python

首先，我们将检查要安装的版本。

请执行下面的命令

pyenv install --list

找到以「3.6.5」或类似数字开头的部分。
这里显示的是当前可安装的Python版本。

请执行以下命令以安装（刚刚查询到的最新版本）。

pyenv install 3.13.0a0

接下来，请执行以下命令以进行版本确认。

pyenv versions

在这种状态下，您无法使用之前安装的版本。

请运行以下命令。

pyenv global 3.13.0a0

执行并确认以下命令。

python --version

准备Django开发环境。

Django的安装

创建用于管理应用程序的目录。

移动到先前的目录，然后在终端中执行以下命令。

pip3 install django

确认Django是否已安装并查看其版本。

请用Shell脚本执行以下命令。

python -m django --version

现在我们已经准备好了所有Web应用程序开发所需要的东西。
接下来，让我们开始开发正题的Web应用程序吧！

开发具备ToDoList功能的Web应用程序

创建项目

那么，我们开始开发ToDo应用程序了。
这篇文章我参考了一下。

第一次使用Django时，需要进行初始设置。
通常情况下，会自动生成用于构建Django项目的代码。
（此处省略有关项目的说明）

用命令行将代码移到所需的目录中
执行以下命令

django-admin startproject mysite

让我们看一下，这将在当前目录下创建一个名为mysite的文件夹。

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

在这里，我们将省略对每个文件角色的解释。

开发服务器

让我们验证一下Django项目能否正常运行。

如果能够导航到外部的mysite目录下，请执行以下命令。

python manage.py runserver

然后，在命令行上可以看到以下输出。

Performing system checks...

System check identified no issues (0 silenced).

You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.

8月 23, 2023 - 13:00:00
Django version 4.2, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
在这个阶段，如果收到警告，请忽略并继续进行！

现在，Django开发服务器已经成功启动了。请使用浏览器访问Django并尝试一下！

只要出现了显示“恭喜！”并且火箭升空的页面，那就算成功了！

制作ToDoList应用程序

好吧，终于要开始制作应用程序了。
应用程序可以放在Python路径的任何位置。

请移动到任意目录下，并执行以下命令。

python manage.py startapp todo

通过这个命令，将创建一个名为ToDo的目录。
整体情况如下所示。

todo/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

集成的ToDo应用程序

我将编辑下面的文件并将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アプリケーションの組み込み
]

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

这次我们创建了一个模型，包括「标题」、「内容」、「优先级」和「截止日期」。

输入了如下所示的代码。

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)
    contents = models.TextField()
    priority = models.CharField(
        max_length=50,
        choices = CHOICE,
        null =True
     )
    duedate = models.DateField()

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

创建一个ToDo应用程序的视图

使用Django的通用视图来创建ToDo应用程序的视图，以便支持每个功能的要求。

我输入了以下代码。

from 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 = 'todo/list.html'
    model = TodoModel

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

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

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

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

設定ToDo應用程式的URL

首先，在通過浏览器连接时，需要在mysite的URL设置中引用todo应用程序的URL设置，而不是mysite的URL设置。

输入以下代码

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

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

接下来，按照以下的方式输入代码。

#from django.contrib import admin
from django.urls import path,include
from todo.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')

创建一个ToDo应用程序的模板。

首先，在todo目录下创建一个用于模板的目录。

請按照以下方式創建HTML基礎模板：

<!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列表显示功能的模板

按照以下方式创建

{% 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的新建功能所创建的模板。

按照以下方式创建

{% extends 'base.html' %}

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

用于ToDo详细显示功能的模板。

根据以下方式创建

{% 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.contents }}
</div>
{% endblock content %}

用于ToDo删除功能的模板。

以下就中译意思成下面这样编写

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

用于ToDo更新功能的模板

按照以下方式创建

{% extends 'base.html' %}

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

待办事项应用的迁移

您需要在数据库中创建用于ToDo应用程序的表格。
请进入外部的mysite目录并执行以下命令。

python manage.py makemigrations

python manage.py migrate
注意：对于第二次以上的makemigrations，请注意。当在已经存在记录的情况下添加一个不允许为空且没有默认值设置的字段时，由于旧记录中将包含NULL值，因此会导致错误。

待办事项应用程序的管理员

按照下面的方式创建

from django.contrib import admin

from .models import TodoModel
# Register your models here.
admin.site.register(TodoModel)

确认应用程序的运行

因为程序已经完成，现在让我们进行操作确认！
利用下面的命令来启动服务器。

python manage.py runserver
スクリーンショット 2023-08-23 15.59.14.png

以上, ToDoList的应用程序已经完成了！

就算是这样简单的网站，也要经历这么多的步骤啊。
如果变成复杂的网站的话，我们还是别去考虑了。

闲话

对于即将学习Django的新人工程师，我只想告诉你一件事。
抄袭并不是一件坏事，但机械式地学习是不可取的。
说实话，我就是因为机械地学习并遇到困境而感到焦虑。
如果不理解各个文件的角色和处理流程，当出现错误时完全不知道该如何进行修复。
然而，一旦理解了各个文件的角色和处理流程，工作效率就大幅提升了。
希望你可以参考这个故事，努力学习吧！

参考网站

Python安装
Django入门
ToDoList应用

✖
广告
将在 10 秒后关闭
bannerAds