🛍장고로 쇼핑몰 만들기(DRF,serializer)

팔리동·2021년 4월 20일

🛍장고로 쇼핑몰 만들기(DRF,serializer)

serializer.py

from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):

    class Meta:
        model = Product
        fields = '__all__'

Serializers allow complex data such as querysets and model instances to be converted to native Python datatypes that can then be easily rendered into JSON, XML or other content types.

출처: https://www.django-rest-framework.org/api-guide/serializers/

product.views.py

from rest_framework import generics
from rest_framework import mixins

class ProductListAPI(generics.GenericAPIView, mixins.ListModelMixin):
    serializer_class = ProductSerializer

    def get_queryset(self):
        return Product.objects.all().order_by('id')

    def get(self, request , *args , **kwargs):
        return self.list(request, *args, **kwargs)

class ProductDetailAPI(generics.GenericAPIView, mixins.RetrieveModelMixin):
    serializer_class = ProductSerializer

    def get_queryset(self):
        return Product.objects.all().order_by('id')

    def get(self, request , *args , **kwargs):
        return self.retrieve(request, *args, **kwargs)

ProductListAPI는 제품 리스트를 보여주고 ProductDetailAPI는 제품 하나의 객체를 보여준다.
json type으로 보여준다.

url 연결

urlpatterns = [
    .
    .
    .
    path('api/product/', ProductListAPI.as_view()),
    path('api/product/<int:pk>/', ProductDetailAPI.as_view()),

]

url 연결을 통해 view함수를 실행하게 했다.

url 접속

list

detail

templates

{% extends "base.html" %}
{% load humanize %}
{% block header %}
<script>
  function product_detail(id) {
    $.ajax({
      url: "/api/product/" + id,
      success: function (result) {
        $("#product-" + id).popover({
          html: true,
          content: result.name + "<br/>" + result.price
        }).popover('show');
      }
    });
  }

  function product_leave(id) {
    $("#product-" + id).popover('hide');
  }
  $(document).ready(function () {});
</script>
{% endblock %}
{% block contents %}
<div class="row mt-5">
  <div class="col-12">
    <table class="table table-light">
      <thead class="thead-light">
        <tr>
          <th scope="col">#</th>
          <th scope="col">상품명</th>
          <th scope="col">가격</th>
          <th scope="col">등록날짜</th>
        </tr>
      </thead>
      <tbody class="text-dark">
        {% for product in product_list %}
        <tr>
          <th scope="row">{{ product.id }}</th>
          <th><a id="product-{{ product.id }}" onmouseenter="product_detail({{ product.id }});"
              onmouseleave="product_leave({{ product.id }});" href="/product/{{ product.id }}">{{ product.name }}</a>
          </th>
          <th>{{ product.price|intcomma }} 원</th>
          <th>{{ product.register_date|date:'Y-m-d H:i' }}</th>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}