質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Q&A

解決済

1回答

598閲覧

【Django】従テーブルのデータ一覧がテンプレートに表示されない

Mr_PONPON_MARU

総合スコア35

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

0グッド

0クリップ

投稿2023/04/27 20:26

編集2023/04/29 16:18

実現したいこと

会員制の記事公開アプケーションを作成していて、マイページで自身の主テーブルに格納されているユーザ情報だけでなく、従テーブルに格納されている投稿記事も同時に表示させるページを作成したい。(下記画像参照)

イメージ説明

前提

主テーブルと従テーブルの仕様は下記参照。CustomUserモデルとArticleモデルはそれぞれaccountsアプリケーションのmodels.pyとprototypingアプリケーションのmodels.pyで別々に定義している。

イメージ説明

prototyping/accounts/models.py

1from django.db import models 2from django.contrib.auth.models import AbstractUser 3from django.utils.translation import gettext_lazy as _ 4 5 6# Create your models here. 7class CustomUser(AbstractUser): 8 """拡張ユーザーモデル""" 9 10 username = models.CharField( 11 _("username"), 12 max_length=30, 13 help_text='Required 30 characters or fewer.', 14 unique=True, 15 error_messages={ 16 'unique': _("This Username already exists."), 17 },) 18 19 email = models.EmailField( 20 _('email'), 21 unique=True, 22 error_messages={ 23 'unique': _("A user with that email address already exists."), 24 },) 25 26 fb_link = models.URLField(verbose_name='Facebook Link', null=True, blank=True) 27 28 ig_link = models.URLField(verbose_name='Instagram Link', null=True, blank=True) 29 30 tw_link = models.URLField(verbose_name='Twitter Link', null=True, blank=True) 31 32 bg_image = models.ImageField(verbose_name='Backgroung Image', null=True, blank=True, upload_to='bgimage/') 33 34 icon = models.ImageField(verbose_name='Icon Image', null=True, blank=True, upload_to='icon/') 35 36 profession = models.CharField(verbose_name='Profession', null=True, blank=True, max_length=20) 37 38 introduction = models.TextField(verbose_name='Introduction', null=True, blank=True, max_length=500) 39 40 class Meta: 41 verbose_name_plural = 'CustomUser' 42 43 44

prototyping/article/models.py

1from django.db import models 2from accounts.models import CustomUser 3from mdeditor.fields import MDTextField 4# Create your models here. 5 6 7class Article(models.Model): 8 9 """記事タグ""" 10 tag_choices = ( 11 ('ELECTRONICS','ELECTRONICS'), 12 ('INSTALLATION','INSTALLATION'), 13 ('SERVICES','SERVICES'), 14 ('CRAFT','CRAFT') 15 ) 16 17 post_user = models.ForeignKey(CustomUser, verbose_name='Post User', on_delete=models.CASCADE,) 18 title = models.TextField(verbose_name='title', max_length=50,) 19 content = MDTextField() 20 photo = models.ImageField(verbose_name='photo', null=True, blank=True,) 21 thumbnail = models.ImageField(verbose_name='thumbnail', null=True, blank=True,) 22 tag = models.CharField(verbose_name='article tag', choices=tag_choices, max_length=30,) 23 created_at = models.DateField(verbose_name='created_at', auto_now_add=True,) 24 view_count = models.PositiveIntegerField(verbose_name='view count', default=0,)

該当のソースコード

下記サイトを参考に、views.pyでは14行目で主テーブルに紐付く従テーブルのレコードを抽出したクエリーセットをオーバーライドしている

・Djangoでデータを取得してみる(外部キー)
https://yk5656.hatenablog.com/entry/20210410/1617980400

prototyping/article/views.py

1from django.views import generic 2from django.contrib.auth.mixins import LoginRequiredMixin 3 4from accounts.models import CustomUser 5from .models import Article 6 7class MyPageView(LoginRequiredMixin, generic.DetailView): 8 template_name = 'mypage.html' 9 model = CustomUser 10 slug_field = 'username' 11 slug_url_kwarg = 'username' 12 13 def get_queryset(self): 14 articles = CustomUser.objects.filter(article__post_user=self.request.user).order_by('-created_at') 15 return articles

protptyping/article/urls.py

1from django.urls import path 2from . import views 3 4app_name = 'article' 5 6urlpatterns = [ 7 -中略- 8 path('mypage/<username>/', views.MyPageView.as_view(), name='mypage'), 9]

mypage.html

1{% extends 'base.html' %} 2 3{% load static %} 4 5{% block title %}My Page | Prototyping Labo{% endblock %} 6 7{% block head %}{% endblock %} 8 9{% block search %}{% endblock %} 10 11{% block background %} 12<section class="js-parallax u-promo-block u-promo-block--mheight-500 u-overlay u-overlay--dark text-white" {% if object.bg_image %} style="background-image:url('{{ object.bg_image.url }}');"{% else %} style="background-image:url('{% static 'img/bg_image_default.png' %}');"{% endif %}> 13 <!-- Promo Content --> 14 <div class="container u-overlay__inner u-ver-center u-content-space"> 15 <div class="row justify-content-center"> 16 <div class="col-12"> 17 <div class="text-center"> 18 <h1 class="display-sm-4 display-lg-3">{{ object.username }}</h1> 19 {% if object.profession %} 20 <p class="h6 text-uppercase u-letter-spacing-sm mb-2"> {{ object.profession }}</p> 21 {% endif %} 22 <ul class="list-inline text-center mb-0"> 23 {% if object.fb_link %} 24 <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Facebook"> 25 <a class="text-white" href="{{ object.fb_link }}"> 26 <i class="fab fa-facebook"></i> 27 </a> 28 </li> 29 {% endif %} 30 {% if object.tw_link %} 31 <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Twitter"> 32 <a class="text-white" href="{{ object.tw_link }}"> 33 <i class="fab fa-twitter"></i> 34 </a> 35 </li> 36 {% endif %} 37 {% if object.ig_link %} 38 <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Instagram"> 39 <a class="text-white" href="{{ object.ig_link }}"> 40 <i class="fab fa-instagram"></i> 41 </a> 42 </li> 43 {% endif %} 44 </ul> 45 46 </div> 47 </div> 48 </div> 49 </div> 50 <!-- End Promo Content --> 51</section> 52{% endblock %} 53 54{% block category %}{% endblock %} 55 56{% block contents %} 57<section> 58 <div class="container"> 59 <!-- Profile Block --> 60 <div class="row"> 61 <div class="col-md-4 mx-auto"> 62 <div class="u-pull-half text-center"> 63 {% if object.icon %} 64 <img class="img-fluid u-avatar u-box-shadow-lg rounded-circle mb-3" width="200" height="auto" src="{{ object.icon.url }}" alt="Image Description"> 65 {% else %} 66 <img class="img-fluid u-avatar u-box-shadow-lg rounded-circle mb-3" width="200" height="auto" src="{% static 'img/default_icon.png' %}" alt="Image Description"> 67 {% endif %} 68 </div> 69 </div> 70 </div> 71 <!-- End Profile Block --> 72 73 <!-- About --> 74 <div class="row u-content-space-bottom"> 75 <div class="col-lg-6 mb-5 mb-lg-5 pl-lg-5 mx-auto"> 76 {% if object.introduction %} 77 <h4 class="mb-3">About me</h4> 78 <p>{{ object.introduction }}</p> 79 {% endif%} 80 </div> 81 </div> 82 <!-- End About --> 83 </div> 84</section> 85<!-- End About Section --> 86 87<div class="container"> 88 <hr class="my-0"> 89</div> 90 91<!-- Portfolio --> 92<section class="u-content-space"> 93 <div class="container"> 94 <header class="text-center w-md-50 mx-auto mb-8"> 95 <h2 class="h1">Prototyping Works</h2> 96 </header> 97 98 <ul class="js-shuffle-controls u-portfolio-controls text-center mb-5"> 99 <li class="u-portfolio-controls__item"><a href="#!" data-group="all" class="active">All</a></li> 100 <li class="u-portfolio-controls__item"><a href="#!" data-group="its-illustration">ELECTRONICS</a></li> 101 <li class="u-portfolio-controls__item"><a href="#!" data-group="its-design">INSTALLATION</a></li> 102 <li class="u-portfolio-controls__item"><a href="#!" data-group="its-graphic">SERVICES</a></li> 103 <li class="u-portfolio-controls__item"><a href="#!" data-group="its-logo">CRAFT</a></li> 104 </ul> 105 106 <!-- Work Content --> 107 <div class="js-shuffle u-portfolio row no-gutters mb-6"> 108 {% for article in article_list %} 109 <figure class="col-sm-6 col-md-4 u-portfolio__item" data-groups='["its-illustration"]'> 110 <img class="u-portfolio__image" src="{{ article.thumbnail.url }}" alt="Image Description"> 111 <figcaption class="u-portfolio__info"> 112 <h6 class="mb-0">{{ article.title }}</h6> 113 <small class="d-block">Branding</small> 114 </figcaption> 115 <a class="js-popup-image u-portfolio__zoom" href="assets/img-temp/portfolio/img1.jpg">Zoom</a> 116 </figure> 117 {% endfor %} 118 <!-- sizer --> 119 <figure class="col-sm-6 col-md-4 u-portfolio__item shuffle_sizer"></figure> 120 </div> 121 <!-- End Work Content --> 122 </div> 123</section> 124<!-- End Portfolio --> 125{% endblock %} 126 127{% block js %}{% endblock %}

発生している問題

ターミナルやブラウザ上ではエラーメッセージが表示されないが、mypage.htmlの「Work Content部(107行目から122行目まで)」が表示されず、どこに問題があるのか判別できず、類似ケースを調べても解決策が分からなかった。

開発環境

・Django3系
・MacOSローカル内
・Anaconda3
・Python3.7.6

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

テンプレートを下記のようにすることで解決しました

{% for article in object.article_set.all %} <figure class="col-sm-6 col-md-4 u-portfolio__item" data-groups='["its-illustration"]'> <img class="u-portfolio__image" src="{{ article.thumbnail.url }}" alt="Image Description"> <figcaption class="u-portfolio__info"> <h6 class="mb-0">{{ article.title }}</h6> <small class="d-block">Branding</small> </figcaption> <a class="js-popup-image u-portfolio__zoom" href="assets/img-temp/portfolio/img1.jpg">Zoom</a> </figure> {% endfor %}

投稿2023/04/29 07:18

Mr_PONPON_MARU

総合スコア35

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問