AI 웹 개발 과정/팀 프로젝트

유화제작프로젝트 - 기능구현

만 기 2022. 7. 6. 22:36

 

히스토리 페이지 기능 구현

사용자가 이미지를 합성한 후 나온 결과를 저장하면 히스토리 페이지에 기록된다.

 

 

코드

history/models.py

# 히스토리 모델
class History(models.Model):
    user = models.ForeignKey(User, verbose_name='사용자', on_delete=models.CASCADE)
    image = models.OneToOneField(Image, verbose_name='사용된 이미지', on_delete=models.CASCADE)
    created_at = models.DateTimeField('등록일', auto_now_add=True)
    exposure_start = models.DateTimeField('노출 시작일', default=datetime(2022, 6, 29))
    exposure_end = models.DateTimeField('노출 종료', default=datetime(2023, 6, 29))

    def __str__(self):
        return f"{self.user.username}'s history - {self.id}"

# 코멘트 모델
class Comment(models.Model):
    user = models.ForeignKey(User, verbose_name='사용자', on_delete=models.CASCADE)
    history = models.ForeignKey(History, verbose_name='결과 히스토리', on_delete=models.CASCADE)
    content = models.CharField('댓글 내용', max_length=100)

    def __str__(self):
        return f"{self.user.username}'s comment - {self.id}"

# 좋아요 모델
class Like(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    history = models.ForeignKey(History, on_delete=models.CASCADE)

History 모델

  • user field: User 모델과 One To Many 관계
  • image field : Image 모델과 One To One 관계

Like 모델

  • User 모델과 History 모델의 중간 테이블 역할 (Many To Many)

 

 

history/urls.py

# history/
urlpatterns = [
    path('', views.HistoryView.as_view()),
    path('comment/<history_id>/', views.CommentView.as_view()),
    path('comment/<history_id>/<comment_id>/', views.CommentView.as_view()),
    path('like/<history_id>', views.LikeView.as_view()),
]

 

 

history/views.py

HistoryView

class HistoryView(APIView):

    # 결과 히스토리 조회
    def get(self, request):
        
        today = timezone.now()
        query = (
            Q(exposure_start__lte = today) & 
            Q(exposure_end__gte = today)
        )

        # 노출일자 사이에 해당되는 히스토리를 최신순으로 가져온다.
        histories = History.objects.filter(query).order_by('-id')
        
        # histories 쿼리셋을 시리얼라이저
        histories_serializer = HistorySerializer(histories, many=True).data
        return Response({"result_history":histories_serializer}, status=status.HTTP_200_OK)
    
    # 결과 히스토리 저장
    def post(self, request):
        # request.data['user']=request.user.id
        print(request.data)
        image_id = request.data.get("image","")
        image_obj = Image.objects.get(id=image_id)

        history_serializer = HistorySerializer(data=request.data)

        if history_serializer.is_valid():
            history_serializer.save(user=request.user, image=image_obj)
            return Response(history_serializer.data, status=status.HTTP_200_OK)
        
        return Response(history_serializer.errors, status=status.HTTP_400_BAD_REQUEST)

* GET 요청 : 히스토리 페이지에서 저장된 결과 보여주기

 - timezone.now 사용하여 현재 날짜를 기준으로 

 - Q는 장고 model orm으로 사용하여 조건을 추가할 수 있다.

 - field look up 문법 lte, gte 사용하여 오늘이 노출 시작일과 종료일 안에 있다는 조건

 - order_by("-id ") : 최근에 생성된 모델부터 나열

 - history 시리얼라이저 : 여러개 모델이 존재하게되므로 many=True 설정

 

* POST 요청 : 

클라이언트에서 받은 데이터를 시리얼라이저해서 valid 검증 후에 save 할때, 로그인된 유저와 받은 이미지 아이디로 이미지필드에서 모델을 가져와서 저장한다.

 

 

history/serializer.py

# 히스토리 시리얼라이저
class HistorySerializer(serializers.ModelSerializer):
    user = serializers.SerializerMethodField()
    image = ImageSerializer(read_only=True)
    like = serializers.SerializerMethodField(read_only=True)

    def get_user(self, obj):
        return obj.user.username
    
    def get_like(self, obj):
        like_count = obj.like_set.count()
        return like_count

    def create(self, validated_data):
        history = History(**validated_data)
        history.save()
        return history

    class Meta:
        model = History
        fields = ["id", "user", "image", "created_at",
                  "exposure_start", "exposure_end", "like"]

 

 

 

DRF 와 프론트엔드 연동

참조 : https://velog.io/@codren/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%99%80-DRF-%ED%86%B5%ED%95%A9-jQuery-Ajax

 

프론트엔드와 DRF 통합 (jQuery Ajax)

jQuery, Ajax, Popover 기능 구현

velog.io

 

https://developer.mozilla.org/en-US/docs/Web/API/fetch

 

fetch() - Web APIs | MDN

The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

developer.mozilla.org