django프로젝트 무한스크롤,미디어쿼리,검색기능

오늘도 어제의 이어서 계속해서 작업을 이어나갔다.

오늘은 미디어쿼리로 css작업을 거의 완성 하였다!

미디어쿼리는

@media screen and (max-width:550px) {
    .img_container {
        width: 350px;
        height: 350px;
    }

이런형식으로 max-width을 정해주고 그안에 요소를 크기에 맞춰서 정렬해주면 된다.

이것도 컨테이너와 부모요소들이 정렬이 잘되어있으면 width랑 height 값만 조정해주면

보다 쉽게 할 수 있다.

검색기능 외래키 사용

def search(request):
    if request.method =='POST':
        post = request.POST.get('search','')
        all = Food.objects.all()
        result = all.filter(
            Q(category__category__contains= post)  |
            Q(store__icontains = post) |
            Q(address__icontains = post),
        )

        for results in result:
            if results.img == "":
                results.img = './static/img/noimage.png'

        return render(request,'search.html',{'post':post,'result':result})

어제 검색기능에서 외래키 부분에서 조금 막혔는데
외래키는 categoory 태그 -> 모델 로 역방향 참조? 라고 해야하나 이렇게 조회를 하면 가져올 수 있다!

생각보다 어렵지 않아서 다행이였다.

이번 프로젝트에서는 ajax 를 사용하지 않으려 했는데, template 문법으로만 구현하기 힘든 부분이 있다. 그예로 무한스크롤인데, django에서 제공하는 페이지네이션은 뭔가 복잡하고, 쓸모없는 부분이많아서 직접 구현하기로하였다.

def ajax_method(request):

    result = 'success'
    test = Food.objects.all()[10:20]

    # datas = food_data[10:20]
    test = serializers.serialize('json',test)
    # data = data_set
    return HttpResponse(test, content_type="text/json-comment-filtered")

ajax 로 데이터를 보낼때 queryset 은 보내지 않는다 그래서 이걸
serialize 를 이용해서 json형태로 변환해서 보내줘야 한다. 여기서도 많이 애를 먹었다.

문제는, 이렇게 보내준 데이터가 array 형식이라서 이걸 하나하나 다풀어줘야하는데, 안풀린다.. 그래서 결국 튜터님께 질문을 하러 갔다.

test.forEach(function(element){
   let store = element['fields']['store']
   let address = element['fields']['address']
});

콘솔을 찍을때 test로 받아온 변수를 test.element['fields']['store'] 이렇게 찍어야 데이터 조회가 가능하다. 결국 element 로 접근을 해야한다. 또 하나 배웠다.

프로젝트가 디테일로 접어들수록 더더욱 어려워진다. 로직도 최대한 간결하게 짜고싶지만 아직은 그렇지 않은 부분이 많아서 전체적으로 수정을 할 예정이다.