teratail
回答率
85.48%
質問するログイン新規登録
トップDjangoに関する質問djangoのview設定について

編集履歴

質問編集履歴

3

本文修正

2022/07/27 11:02

投稿

deango
deango

スコア161

test CHANGED
File without changes
test CHANGED
@@ -15,8 +15,8 @@
15
15
  発生している事象は以下です。
16
16
  |フォロー状態|フォローボタン押下前|
17
17
  |:--|:--:|
18
- |フォロー済み|「フォロー中」が表示される|
18
+ |フォロー済み|**1ユーザフォローしていると、すべてのユーザで「フォロー中」が表示される**|
19
- |未フォロー|**「フォロー中」が表示される**|
19
+ |未フォロー|**誰もフォローしていない場合のみ「フォローする」が表示される**|
20
20
 
21
21
  ### 該当のソースコード
22
22
  以下はmodelの設定です。
@@ -78,7 +78,7 @@
78
78
  ```
79
79
 
80
80
  以下はhtmlです。
81
- if following.id in followed_listで「フォロー中」「フォロー済」の表示切替をしていますが、フォローボタン押下前がうまく動作しません。
81
+ if following.id in followed_listで「フォロー中」「フォロー済」の表示切替をしていますが、うまく動作しません。
82
82
  ```
83
83
  {% for following in alluser_list %}
84
84
  <tr class="text">
DjangoAjaxHTML

2

本文修正

2022/07/25 12:38

投稿

deango
deango

スコア161

test CHANGED
@@ -1 +1 @@
1
- ajaxでの非同期通信を使用する際のdjangoのview設定について
1
+ djangoのview設定について
test CHANGED
@@ -3,23 +3,57 @@
3
3
  DJANGOでSNSアプリを作成しています。
4
4
  フォローボタンをajaxの非同期通信を利用して実装中なのですが、
5
5
  ボタンを押す前の状態が意図した動きにならず、困っています。
6
+ ※ajaxの設定については正常に動作しているため、コード記載しておりません。
6
7
 
7
8
  ### 期待する動作
8
- |フォロー状態|フォローボタン押下前|フォローボタン押下１回目|フォローボタン押下２回目|
9
+ |フォロー状態|フォローボタン押下前|
9
- |:--|:--:|--:|--:|
10
+ |:--|:--:|
10
- |フォロー済み|「フォロー中」が表示される|「フォローする」が表示される|「フォロー中」が表示される|
11
+ |フォロー済み|「フォロー中」が表示される|
11
- |未フォロー|「フォローする」が表示される|「フォロー中」が表示される|「フォローする」が表示される|
12
+ |未フォロー|「フォローする」が表示される|
12
13
 
13
14
  ### 発生している問題・エラーメッセージ
14
15
  発生している事象は以下です。
15
- |フォロー状態|フォローボタン押下前|フォローボタン押下１回目|フォローボタン押下２回目|
16
+ |フォロー状態|フォローボタン押下前|
16
- |:--|:--:|--:|--:|
17
+ |:--|:--:|
17
- |フォロー済み|「フォロー中」が表示される|「フォローする」が表示される|「フォロー中」が表示される|
18
+ |フォロー済み|「フォロー中」が表示される|
18
- |未フォロー|**「フォロー中」が表示される**|「フォロー中」が表示される|「フォローする」が表示される|
19
+ |未フォロー|**「フォロー中」が表示される**|
19
20
 
20
21
  ### 該当のソースコード
22
+ 以下はmodelの設定です。
23
+ ```model
24
+ from django.db import models
25
+ from django.contrib.auth.models import AbstractUser
26
+
27
+ class CustomUser(AbstractUser):
28
+ avatar = models.ImageField(upload_to='images', verbose_name='プロフィール画像', blank=True, null=True)
29
+ profile = models.TextField(verbose_name='自己紹介', max_length=420, blank=True, null=True)
30
+
31
+ class Meta:
32
+ verbose_name_plural = 'CustomUser'
33
+
34
+
35
+ class Relationship(models.Model):
36
+
37
+ # 自分をフォローしてくれている人
38
+ follower = models.ForeignKey(CustomUser, related_name='follower', on_delete=models.CASCADE)
39
+ # 自分がフォローしている人
40
+ following = models.ForeignKey(CustomUser, related_name='following', on_delete=models.CASCADE)
41
+
42
+ # 重複してフォロー関係を作成しないように制約を設定する
43
+ class Meta:
44
+ constraints = [
45
+ models.UniqueConstraint(fields=['follower', 'following'],
46
+ name='user-relationship')
47
+ ]
48
+
49
+ def __str__(self):
50
+ return "{} : {}".format(self.follower.username, self.following.username)
51
+ ```
52
+
53
+
21
- 以下は問題と思われるviewの設定です。
54
+ 以下はviewの設定です。
55
+
22
- ```django
56
+ ```view
23
57
  class UserListView(LoginRequiredMixin, ListView):
24
58
  template_name = 'account/userlist.html'
25
59
  model = Relationship
@@ -41,88 +75,47 @@
41
75
 
42
76
  return context
43
77
 
44
- def userlist_relation(request):
45
- if request.method == "POST":
46
- following = get_object_or_404(CustomUser, pk=request.POST.get('following_id'))
47
- follower = request.user
48
- followed = False
49
- follow = Relationship.objects.filter(following=following, follower=follower)
50
- if follow.exists():
51
- follow.delete()
52
- else:
53
- follow.create(following=following, follower=follower)
54
- followed = True
55
-
56
- context = {
57
- 'following_id': following.id,
58
- 'followed': followed,
59
- }
60
- return JsonResponse(context)
61
-
62
-
63
78
  ```
64
79
 
65
- 以下は正常に動作していると思われるuserlist.htmlとモデルです。
80
+ 以下はhtmlです。
66
- ボタンの設定している箇所とajaxのコード部分を記載しています。
81
+ if following.id in followed_listで「フォロー中」「フォロー済」の表示切替をしていますが、フォローボタン押下前がうまく動作しません。
67
82
  ```
83
+ {% for following in alluser_list %}
84
+ <tr class="text">
85
+ <td class="text-center align-middle">
86
+ <div class="mx-auto" id="target">
87
+ {# プロフィール画像列 #}
88
+ <div class="rounded-circle text-center square border">
89
+ <a href="{% url 'diary:diary_list' following.username %}" class="text-decoration-none">
90
+ {% if following.avatar %}
91
+ <img class="fit-img" src="{{ following.avatar.url }}">
92
+ {% else %}
93
+ <img class="fit-img" src="{% static 'assets/img/avatar_default.png' %}">
94
+ {% endif %}
95
+ </a>
96
+ </div>
97
+ </div>
98
+ </td>
99
+ <td class="text-center align-middle">{{ following.username }}</td>
100
+ <td class="text-center align-middle">{{ following.profile | truncatechars:20 }}</td>
101
+ <td class="text-center align-middle">
68
- <form action="{% url 'accounts:userlist_relation' %}" method="POST" >
102
+ <form action="{% url 'accounts:userlist_relation' %}" method="POST" >
69
- {% csrf_token %}
103
+ {% csrf_token %}
70
- {% if following.id in followed_list %}
104
+ {% if following.id in followed_list %}
71
- <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm">
105
+ <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm">
72
- フォロー中
106
+ フォロー中
73
- </button>
107
+ </button>
74
- {% else %}
108
+ {% else %}
75
- <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm">
109
+ <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm">
76
- フォローする
110
+ フォローする
77
- </button>
111
+ </button>
78
- {% endif %}
112
+ {% endif %}
79
- </form>
113
+ </form>
114
+ </td>
115
+ </tr>
116
+ {% endfor %}
117
+ ```
80
118
 
81
- <script type="text/javascript">
82
- $(document).ready(function(event){
83
- $(document).on('click', '#follow', function(event){
84
- event.preventDefault();
85
- $.ajax({
86
- type: 'POST',
87
- url: "{% url 'accounts:userlist_relation' %}",
88
- data: {
89
- 'following_id': $(this).attr('name'),
90
- 'csrfmiddlewaretoken': '{{ csrf_token }}'},
91
- dataType: 'json',
92
- success: function(response){
93
- selector = document.getElementsByName(response.following_id);
94
- if(response.followed){
95
- $(selector).html("フォロー中");
96
- }
97
- else {
98
- $(selector).html("フォローする");
99
- }
100
- }
101
- });
102
- });
103
- });
104
- </script>
105
-
106
- ```
107
- ```
108
- class Relationship(models.Model):
109
-
110
- # 自分をフォローしてくれている人
111
- follower = models.ForeignKey(CustomUser, related_name='follower', on_delete=models.CASCADE)
112
- # 自分がフォローしている人
113
- following = models.ForeignKey(CustomUser, related_name='following', on_delete=models.CASCADE)
114
-
115
- # 重複してフォロー関係を作成しないように制約を設定する
116
- class Meta:
117
- constraints = [
118
- models.UniqueConstraint(fields=['follower', 'following'],
119
- name='user-relationship')
120
- ]
121
-
122
- def __str__(self):
123
- return "{} : {}".format(self.follower.username, self.following.username)
124
-
125
- ```
126
119
 
127
120
  お力添えいただけますでしょうか。
128
121
 
DjangoAjaxHTML

1

文法の修正

2022/07/18 14:25

投稿

deango
deango

スコア161

test CHANGED
File without changes
test CHANGED
@@ -1,95 +1,101 @@
1
1
  ### 前提
2
2
 
3
3
  DJANGOでSNSアプリを作成しています。
4
- フォロー機能で使用するフォロー・アンフォローボタンをajaxの非同期通信を利用して実装中なのですが、
4
+ フォローボタンをajaxの非同期通信を利用して実装中なのですが、
5
- ページ遷移を行った後、非同期通信のボタン押下前、フォロー済み状態のボタンの表示が意図した動きにならず、原因を探しております。
5
+ ボタンを押す前の状態が意図した動きにならず、困っています。
6
+
7
+ ### 期待する動作
8
+ |フォロー状態|フォローボタン押下前|フォローボタン押下１回目|フォローボタン押下２回目|
9
+ |:--|:--:|--:|--:|
10
+ |フォロー済み|「フォロー中」が表示される|「フォローする」が表示される|「フォロー中」が表示される|
11
+ |未フォロー|「フォローする」が表示される|「フォロー中」が表示される|「フォローする」が表示される|
6
12
 
7
13
  ### 発生している問題・エラーメッセージ
8
-
9
14
  発生している事象は以下です。
10
- |フォロー状態|非同期通信のボタン押下前|非同期通信のボタン押下１回目|非同期通信のボタン押下２回目|
15
+ |フォロー状態|フォローボタン押下前|フォローボタン押下１回目|フォローボタン押下２回目|
11
16
  |:--|:--:|--:|--:|
17
+ |フォロー済み|「フォロー中」が表示される|「フォローする」が表示される|「フォロー中」が表示される|
12
- |フォロー済み|**フォローボタンが表示される**|フォローボタンが表示される|アンフォローボタンが表示される|
18
+ |未フォロー|**「フォロー中」が表示される**|「フォロー中」が表示される|「フォローする」が表示される|
13
- |未フォロー|フォローボタンが表示される|アンフォローボタンが表示される|フォローボタンが表示される|
14
-
15
- ### 期待する動作
16
- |フォロー状態|非同期通信のボタン押下前|非同期通信のボタン押下１回目|非同期通信のボタン押下２回目|
17
- |:--|:--:|--:|--:|
18
- |フォロー済み|**アンフォローボタンが表示される**|フォローボタンが表示される|アンフォローボタンが表示される|
19
- |未フォロー|フォローボタンが表示される|アンフォローボタンが表示される|フォローボタンが表示される|
20
- ```
21
19
 
22
20
  ### 該当のソースコード
23
21
  以下は問題と思われるviewの設定です。
24
22
  ```django
25
23
  class UserListView(LoginRequiredMixin, ListView):
26
- template_name = 'account/userlist.html'
24
+ template_name = 'account/userlist.html'
27
- model = CustomUser
25
+ model = Relationship
28
- paginate_by = 3
29
26
 
30
- def get_queryset(self):
27
+ def get_context_data(self, **kwargs): # 追加
31
- return CustomUser.objects.all().exclude(id=self.request.user.id)
28
+ context = super().get_context_data(**kwargs)
32
29
 
30
+ # ログインユーザ以外のユーザのオブジェクトを取得
33
- def get_context_data(self, **kwargs): # 追加
31
+ alluser_list = CustomUser.objects.all().exclude(id=self.request.user.id)
34
- context = super().get_context_data(**kwargs)
32
+ context['alluser_list'] = alluser_list
33
+
34
+ # ログインユーザがフォローしているユーザのオブジェクトを取得
35
+ followed_list = []
35
- user = self.request.user
36
+ for following in alluser_list:
36
- followings = (Relationship.objects.filter(follower_id=user.id)).values_list('following_id')
37
+ followed = Relationship.objects.filter(follower_id=self.request.user.id)
38
+ if followed.exists():
39
+ followed_list.append(following.id)
37
- context['following_list'] = CustomUser.objects.filter(id__in=followings)
40
+ context['followed_list'] = followed_list
41
+
38
- return context
42
+ return context
39
43
 
40
44
  def userlist_relation(request):
41
45
  if request.method == "POST":
42
- item = get_object_or_404(CustomUser, pk=request.POST.get('item_id'))
46
+ following = get_object_or_404(CustomUser, pk=request.POST.get('following_id'))
43
47
  follower = request.user
44
48
  followed = False
45
- follow = Relationship.objects.filter(follower=follower, following=item)
49
+ follow = Relationship.objects.filter(following=following, follower=follower)
46
50
  if follow.exists():
47
51
  follow.delete()
48
52
  else:
49
- follow.create(follower=follower, following=item)
53
+ follow.create(following=following, follower=follower)
50
54
  followed = True
51
55
 
52
56
  context = {
53
- 'item_id': item.id,
57
+ 'following_id': following.id,
54
58
  'followed': followed,
55
59
  }
56
60
  return JsonResponse(context)
57
61
 
62
+
58
63
  ```
64
+
59
- 以下は正常に動作していると思われるuserlist.htmlです。
65
+ 以下は正常に動作していると思われるuserlist.htmlとモデルです。
60
66
  ボタンの設定している箇所とajaxのコード部分を記載しています。
61
67
  ```
62
68
  <form action="{% url 'accounts:userlist_relation' %}" method="POST" >
63
- {% csrf_token %}
69
+ {% csrf_token %}
64
- {% if item.id in following_list %}
70
+ {% if following.id in followed_list %}
65
- <button id="userlist" name="{{item.id}}" class="btn btn-outline-danger btn-sm">
71
+ <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm">
66
- Unfollow
72
+ フォロー中
67
- </button>
73
+ </button>
68
- {% else %}
74
+ {% else %}
69
- <button id="userlist" name="{{item.id}}" class="btn btn-outline-primary btn-sm">
75
+ <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm">
70
- Follow
76
+ フォローする
71
- </button>
77
+ </button>
72
- {% endif %}
78
+ {% endif %}
73
79
  </form>
74
80
 
75
81
  <script type="text/javascript">
76
82
  $(document).ready(function(event){
77
- $(document).on('click', '#userlist', function(event){
83
+ $(document).on('click', '#follow', function(event){
78
84
  event.preventDefault();
79
85
  $.ajax({
80
86
  type: 'POST',
81
87
  url: "{% url 'accounts:userlist_relation' %}",
82
88
  data: {
83
- 'item_id': $(this).attr('name'),
89
+ 'following_id': $(this).attr('name'),
84
90
  'csrfmiddlewaretoken': '{{ csrf_token }}'},
85
91
  dataType: 'json',
86
92
  success: function(response){
87
- selector = document.getElementsByName(response.item_id);
93
+ selector = document.getElementsByName(response.following_id);
88
94
  if(response.followed){
89
- $(selector).html("Unfollow");
95
+ $(selector).html("フォロー中");
90
96
  }
91
97
  else {
92
- $(selector).html("Follow");
98
+ $(selector).html("フォローする");
93
99
  }
94
100
  }
95
101
  });
@@ -98,6 +104,25 @@
98
104
  </script>
99
105
 
100
106
  ```
107
+ ```
108
+ class Relationship(models.Model):
109
+
110
+ # 自分をフォローしてくれている人
111
+ follower = models.ForeignKey(CustomUser, related_name='follower', on_delete=models.CASCADE)
112
+ # 自分がフォローしている人
113
+ following = models.ForeignKey(CustomUser, related_name='following', on_delete=models.CASCADE)
114
+
115
+ # 重複してフォロー関係を作成しないように制約を設定する
116
+ class Meta:
117
+ constraints = [
118
+ models.UniqueConstraint(fields=['follower', 'following'],
119
+ name='user-relationship')
120
+ ]
121
+
122
+ def __str__(self):
123
+ return "{} : {}".format(self.follower.username, self.following.username)
124
+
125
+ ```
101
126
 
102
127
  お力添えいただけますでしょうか。
103
128
 
DjangoAjaxHTML