장고 - Qiita의 tutorial 앱을 개관하고 기능을 더하기 (1)

1년 정도 전에 쓴 기사입니다.

Public에 공개할 수 있도록 Qiita에 투고하겠습니다.

소개

이 기사에서는
- 장고 응용 프로그램의 각 파일의 상관 관계와 거친 역할을 이해할 수 있습니다.
- 기존 애플리케이션을 개관하고 적절한 변경이 가능합니다.
- 장고를 모르는 사람들에게는, 그런 느낌인가라는 이미지를 갖게 된다

목적이야. 개인적으로는 복습의 노력으로 임합니다.

아래 기사의 앱을 검토하고,
[Python] 장고 자습서 - 범용 비즈니스 웹 앱을 가장 빠르게 만들 수 있습니다.

이번에는
로그인 기능과 화면 작성 (2)
화상 파일의 업로드·표시를 가능하게 하는 (1)작업을 실시합니다.

다음은 이번 (1)의 작업을 마친 것
htps : // 기주 b. 이 m / 리오 157 / c 루 - 흠뻑 - p. 기 t

개발 환경

Windows10

Ubuntu LTS18.04 - Windows for Linux Terminal

Visual Studio Code에서 Ubuntu를 열었습니다.

완성형

아이템 일람 화면


아이템 상세 화면

기능

이번에는 이미지 업로드와 목록 화면, 상세 화면에서 업로드된 이미지를 표시합니다.

이번은 편의상 서버측의 처리와 프런트 엔드측의 조작을 분명히 나누어 씁니다.

또한 이미지에 관해서는 먼저 터미널에서
pip3 install pillows
로 이미지를 장고로 처리할 수 있도록 합니다.

이미지 업로드 처리

이미지 업로드 처리는 거의 정형적입니다.
코드 조작과 그 의도를 # 코멘트 아웃에 써 갑니다.

서버측에서 이미지를 받을 수 있도록 해 갑니다.

settings.py (project 아래)

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

#まずは画像ファイルの保管、受取先を指定します。最終行当たりに追加。
#MEDIA_ROOT:projectと同じ階層にmediaフォルダがある
#MEDIA_URL:(Djangoでは画像ファイルに1対1でURLが対応するため)メディアファイル公開時のURL指定です。

urls.py (project 아래)

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
#メディアファイル公開用のURLを追加します。最終行当たりに追加。

forms.py

class ItemForm(forms.ModelForm):

    class Meta:
        model = Item
        fields = ('name','age','sex','memo','images')
        widgets = {
                    'name': forms.TextInput(attrs={'placeholder':'記入例：山田　太郎'}),
                    'age': forms.NumberInput(attrs={'min':1}),
                    'sex': forms.RadioSelect(),
                    'memo': forms.Textarea(attrs={'rows':4}),
                    'images': forms.ClearableFileInput(attrs={'multiple': False}),
                  }
                  #imagesを追加します。これによりメディアファイルをデータベース化し、'images'として引き出すことができるようになりました。

models.py

    images = models.ImageField(
        verbose_name='画像ファイル',
        upload_to='',
        default='defo.png'
    )
    #class Item(models.Model):に追加。upload_to=''でsettings.py上に書いた保存先が指定される。
    #defaultにメディアファイルをアップロードしていないときに表示する画像を指定します。mediaフォルダ下にdefo.pngを配置。

이미지 표시

데이터베이스화된 이미지를 꺼내 목록 화면과 상세 화면에 표시
프런트 엔드를 만지기 때문에 templates 아래의 조작이됩니다.

item_filter.html (목록 화면의 각 항목의 항목)

                    <!--一覧において画像を表示したい-->
                    <div class="row">
                        <div class="col-3">
                            <p>画像</p>
                        </div>
                        <div class="col-9">
                            <img src="{{ item.images.url }}" width=150>
                        </div>
                    </div>
                    <!--同階層に並ぶ名前、登録日の下に追加します。-->
                    <!--Djangoではサーバー側のデータを引き出すときに{{}}や{%%}で囲むことでディレクトリを指定したりします。-->

item_card.html (아이템 상세 화면)

<div class="row">
    <div class="col-3">
        <p>画像ファイル</p>
    </div>
    <div class="col-9">
        <form method="post" enctype="multipart/form-data">
            <!--入力した画像を表示させたい-->
            <img src="{{ object.images.url }}" width=300>
        </form>
        {{ form.media }}
    </div>
</div>
<!--項目名:備考の上に追加します。-->

item_forms.html (아이템 작성 화면)

    <div class="row">
        <div class="col-12">
            <!-- enctype=...の追加-->
            <form method="post" id="myform" enctype="multipart/form-data">
                {% crispy form%}
            </form>
        </div>
    </div>
<!--{%crispy form%}にメディアファイルを含むデータが格納されてますので、enctypeを指定する必要があります。-->
<!-- なおcrispyについて詳しくは省きますが、crispy_forms appにより入力項目をきれいに整理してくれます。-->

되돌아가다

이번에는 이미지 업로드 기능과 그 이미지 표시에 대해 Django에서 구현했습니다.
정말로 작성 화면, 편집 화면에 있어서 프리뷰 기능의 구현과, 복수 화상의 업로드·표시에 대해서도 하고 싶었습니다만, (프리뷰 기능은 JavaScript로 할 수 있는 것 같습니다) 이번은 간이한 구현으로 간이한 기능을 하는 취지 이었기 때문에 생략해 주었습니다.

또, 이번의 이하 기사가 미디어 파일이 아니고, 다른 파일의 업로드에 대해서 쓰고 있습니다만, 조작은 거의 동일하므로 비교의 참고로 해 주세요.
[Django] 파일 업로드 기능 사용 [기본 설정편]

다음 번

다음은 Django에서 로그인 기능을 구현합니다.
Django에서는 로그인 기능이 표준으로 갖추어져 있지만 프로젝트 내에 새롭게 애플리케이션을 만드는 형태로 구현합니다.