【Python】使用Docker、Django和Postgresql开发Web应用，并在Render.com上进行发布（第2部分）

2 年 ago

清, 宇

4 minutes

首先

前提 (paraphrased in Chinese)

以下是上次的续篇。
【Python】使用Docker、Django和PostgreSQL开发Web应用程序，并在Render.com上发布（第1部分）。

目标

第二步是创建公告板功能。

開發環境

Google Chrome

创作过程

创建一个board应用程序

我們將為網站設計一個名為「板塊應用程式」的應用程式。

操作步骤是：

从容器中退出

是的。

# コンテナに入る
docker compose exec web bash

（ここからwebコンテナ内）

# 現在の階層を確認
pwd # /code となっているはずです

# 「boardアプリ」を作成
django-admin startapp board

# boardディレクトリがあるか確認
ls # boardという名前のディレクトリが作成できているはずです

# コンテナから出る
exit

（ここまでwebコンテナ内）

在这个任务中将创建一个 board 应用程序。

在VSCode中配置board应用程序的设置。

以下是步骤的顺序。

创建并编辑board/templates/board/index.html

可以在 config/settings.py 中注册 home 应用程序。

# boardアプリを登録

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'board.apps.BoardConfig', # boardアプリを追加
]

...

2. 编辑 config/urls.py

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

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

3. 创建home/urls.py

# home/urls.pyの作成
touch board/urls.py

创建board/models.py文件。

from django.db import models

class Board(models.Model):
    name = models.CharField('お名前', max_length=50)
    content = models.TextField('内容', max_length=140)

    def __str__(self):
        return self.name

我们将分别创建名为name和content的模型来代表投稿者的姓名和投稿内容。

# コンテナに入る
docker compose exec web bash

（ここからwebコンテナ内）

# マイグレーションファイルの出力
python manage.py makemigrations

# マイグレート
python manage.py migrate

# コンテナから出る
exit

（ここまでwebコンテナ内）

我的迁移已完成。

5. 创建board/forms.py

from django import forms

from .models import Board


class BoardForm(forms.ModelForm):
    class Meta:
        model = Board
        fields = ['name', 'content']
        widgets = {
            'name': forms.TextInput(),
            'content': forms.Textarea()
        }

使用模型定义表单。
在提交时需要名字，并且如果为空则无法提交。

6. 编辑 board/views.py 文件

from django.shortcuts import render, redirect

# モデルとフォームを呼び出す
from .models import Board
from .forms import BoardForm

# 投稿機能と投稿の表示
def board(request):
    template_name = 'board/board.html'
    contents = Board.objects.all()
    form = BoardForm(request.POST or None)
    params = {'contents': contents, 'form': form}
    if form.is_valid():
        board = form.save(commit=False)
        board.save()
        return redirect('board:board')
    return render(request, template_name, params)

7. 编辑 board/urls.py

from django.urls import path

# views.pyからboardを呼び出す
from .views import board

app_name = 'board'

urlpatterns = [
    path('', board, name='board'),
]

8. 创建board/templates/board目录

mkdir -p board/templates/board

9. 创建并编辑board/templates/board/base.html。

touch board/templates/board/base.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrapを使用 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  <title>ミニ掲示板</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <!-- Navbar content -->
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">ミニ掲示板</span>
    </div>
  </nav>

  <div class="container mt-5">
    {% block content %}
    {% endblock content %}
  </div>
</body>

</html>

通过创建base.html文件，可以在其他HTML文件中进行重用。

创建和编辑board/templates/board/index.html。

touch board/templates/board/board.html

{% extends 'board/base.html' %}

# 投稿一覧と投稿欄を表示
{% block content %}
<h1 class="mb-3 border-bottom">投稿一覧</h1>

{% for content in contents %}
<div class="d-flex flex-row ">
  <div class="p-2">{{ content.id }}</div>
  <div class="p-2">{{ content.name }}</div>
</div>
<p>{{ content.content }}</p>
{% endfor %}

<h2 class="mb-3 mt-5 border-bottom">投稿欄</h2>
<form method="POST">{% csrf_token %}
  <div class="mb-3">
    <label class="form-label">お名前</label>
    <br>
    {{ form.name }}
  </div>
  <div class="mb-3">
    <label class="form-label">内容</label>
    <br>
    {{ form.content }}
  </div>
  <div class="mb-3">
    <button type="submit">送信</button>
  </div>
</form>
{% endblock content %}

完成的东西 de

下一次

第二节到此结束。

下一次我們將部署到Render.com。

参考资料

Docker×Django×PostgreSQLの環境構築(備忘録)