221009 작심삼일 프로젝트 2일차 (django)

백앤드 부분 추가해야할 사항
트위터 수정
파일 업로드 완료
프로필 사진 업로드 및 트윗 사진 업로드
프로필 부분 이름 설정

 

프론트엔드 부분
앱 설치를 위한 셋팅
nginx 연동

 

 

파일업로드 중 글쓰기 부분작성

twitter/model.py 트위터 필드 추가 및 업로드시 파일명 변경함수를 이용하게 수정함

 

from twitter.utils import rename_imagefile_to_uuid

#테이블생성
class Twitter(models.Model):
    writer = models.ForeignKey(User,on_delete=models.CASCADE) #작성자를 릴레이션 하는 필드
    contents = models.TextField() #트윗내용 저장되는 필드
    imgsrc = models.ImageField(null=True, upload_to=rename_imagefile_to_uuid, max_length=255, blank=True) #이미지 경로 저장하는 필드 구분자는  |
    create_date = models.DateTimeField(auto_now_add=True) #작성일자

    def __str__(self):
        return "twitter"

twitter/utils.py 파일 생성하여 파일명 중복 처리 함수 만들기

import os
from uuid import uuid4

def rename_imagefile_to_uuid(instance,filename):
    print(instance)
    upload_to = f'image/{instance}'
    ext = filename.split('.')[-1]
    uuid = uuid4().hex

    if instance:
        filename = '{}_{}.{}'.format(uuid, instance, ext)
    else:
        filename = '{}.{}'.format(uuid, ext)

    return os.path.join(upload_to, filename)

twitter/froms.py 트위터 필드에에 파일 업로드 추가

fields = ('contents','id','imgsrc')

url.py 수정

#맨아래부분
]+static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

twitter/view.py 수정

if type == 'new':  # 새 게시물 작성 /prog/new?bname=free /porg/read?id=3
    if request.method == "GET":
        twitterForm = TwitterForm()
        post = {'html_title': '새 게시물 작성'}
        return render(request, 'index.html', {'twitterForm': twitterForm, 'post': post})
    elif request.method == "POST":
        twitterForm = TwitterForm(request.POST)
        if twitterForm.is_valid():
            twitter = twitterForm.save(commit=False)
            twitter.imgsrc = request.FILES['imgsrc'] #들어온 파일들중에 이름이 imgsrc인 녀석을 대입시켜준다
            #원래는 이미지 확인하는 소스를 만들어야 하지만 테스트 이므로 그냥 한다.
            twitter.writer = request.user
            print(twitter.imgsrc)
            twitter.save()
            return redirect('/list/')

템플릿에 파일업로드 추가 및 업로드된 이미지 불러오기 추가

 

 

여기까지 작업하는데 2시간...

 

 

프로필 수정 페이지 만들기... 일단 디자인이 없다...

 

일단 하나씩 할란다. 프로필 이미지 클릭시 이미지 수정하게 만들기 (이건 자바스크립트 작업이다.)

 

 

 

 

프로필 이미지 수정으로 들어오면 처리하는 함수

urls.py

path('edituser/',user.views.edit_user_profile),

user/view.py

@login_required(login_url='login') #사용자 프로필 수정이므로 로그인여부확인
def edit_user_profile(request):
    if request.method == "POST":
        file_Form = FileForm(request.POST)
        if file_Form.is_valid():
            profile_file = file_Form.save(commit=False)
            if request.FILES:  # 파일 업로드 여부 체크
                profile_file.imgfile = request.FILES['imgfile']  # 들어온 파일들중에 이름이 imgsrc인 녀석을 대입시켜준다
                # 원래는 이미지 확인하는 소스를 만들어야 하지만 테스트 이므로 그냥 한다.
            profile_file.writer = request.user
            profile_file.save()
            return redirect('/list/')
    return redirect('/list/')

 

 

list에서 접속한 사람의 이미지 프로필 가져오기 작업

 

twitter/view.py

def list(request):
    posts = Twitter.objects.all().order_by('-id')
    users = get_user_model().objects.all()
    if request.user.is_authenticated:
        users.login_user = request.user
        users.login_user_img = get_user_img(users.login_user.id)
        #users.login_user_img.imgfile
    return render(request, 'index.html',
                  {'posts': posts, 'request': request, 'users': users})

def get_user_img(uid):
    aa = FileUpload.objects.get(writer=uid)
    print(aa.imgfile)
    return aa

 

index.html javascript 추가

아래 소스를 사용하기 위해선 jquery를 불러와야한다
    <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
상단에 이거 추가

$('#target_img').click(function (e) {
  document.user_edit_img.target_url.value = document.getElementById( 'target_img' ).src;
  e.preventDefault();
  $('#imgfile').click();
});

function changeValue(obj){
  document.user_edit_img.submit();
}

 

오늘은 여기까지!! 커밋하자

 

검색해보니 유저에 프로필을 one one 릴레이션을 할수가 있다

 

 

user.model.py

from django.db import models
from django.contrib.auth.models import User
from django.db.models.signals import post_save
from django.dispatch import receiver
from twitter.utils import rename_imagefile_to_uuid

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    user_img = models.ImageField(null=True, upload_to=rename_imagefile_to_uuid, max_length=255, blank=True)
    bio = models.TextField(max_length=500, blank=True)
    location = models.CharField(max_length=30, blank=True)
    birth_date = models.DateField(null=True, blank=True)
    def __str__(self):
        return "User"
@receiver(post_save, sender=User)
def create_user_profile(sender, instance, created, **kwargs):
    if created:
        Profile.objects.create(user=instance)
@receiver(post_save, sender=User)
def save_user_profile(sender, instance, **kwargs):
    instance.profile.save()

 

twitter.view.py 도 수정

def list(request):
    posts = Twitter.objects.all().order_by('-id')
    users = get_user_model().objects.all()

    if request.user.is_authenticated:
        users.login_user = request.user
        users.login_user_img = get_user_img(request.user)
        print(users.login_user_img)
    return render(request, 'index.html',
                  {'posts': posts, 'request': request, 'users': users})

def get_user_img(uid):
    #유저정보를 가져오고
    uno = User.objects.get(username=uid)
    #유저 프로파일에서 이미지를 가져온다
    profile = Profile.objects.get(Q(user_id=uno.id))
    if profile.user_img:
        return profile.user_img
    else:
        return "/noimage.png"

 

장고를 쓰다보니 대박인게.. 릴레이션으로 묶으면 자동으로 다불러와진다....

post.writer.profile.user_img

이게 된다.. 호출을 안해도 정말 편하네...

 

 

 

 

 

 

 

 

 

 

 

 

 

추후 해야할 작업

게시글 쓴사람과 사람목록 불러오는데에서 프로필 이미지 가져오기.....

릴레이션 쪽 손봐야할듯...

리스트 페이지 ajax로 계속 불러오기

posts = Twitter.objects.all().order_by('-id')[:3]


뒤에 대괄호가 불러올 갯수 [ 시작점 : 갯수 ] 인듯

 

 

결국 이시간으로는 nginx까지는 연동가능할거같아...

https://wikidocs.net/6611

02) Nginx, uWSGI 배포

 

 

참고자료

https://choboit.tistory.com/83

[React-Native] 1. M1 Mac에서 React-Native 환경 구축

https://eveningdev.tistory.com/47

[Django] 장고(django) 파일 업로드(file upload) 기능 실습하기

https://hangjastar.tistory.com/202

[Django] ImageField 저장 시 이름 변경하기