image upload try

FINAL with LMH.md

@@ -23,7 +23,17 @@ npm i vue-chartjs chart.js
 
 ```
 
+프로필 이미지
 
+https://ordinary-code.tistory.com/170
+
+https://dongyeopgu.github.io/django/django_image_upload.html
+
+구글 계정으로 로그인
+
+```
+https://medium.com/chanjongs-programming-diary/django-rest-framework%EB%A1%9C-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-api-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0-google-kakao-github-2ccc4d49a781
+```
 
 
 

PJT_FINAL/django_final/accounts/views.py

@@ -6,12 +6,31 @@
 
 from .serializers import *
 
-# Create your views here.
+#for profile
+import base64
+import os
+from datetime import datetime
+
 
 User = get_user_model()
 
 @api_view(['GET'])
 def profile(request, user_pk):
     user = get_object_or_404(User, pk=user_pk)
     serializer = ProfileSerializer(user)
-    return Response(serializer.data)
+    return Response(serializer.data)
+
+
+
+# @api_view(['POST'])
+# def upload_image(request):
+#     img_string = request.data['img_base64'] # POST요청을 통해 받은 base64정보
+#     imgdata = base64.b64decode(img_string) # 디코딩
+#     now = datetime.now()
+#     now = datetime.timestamp(now)
+#     filename = f'temp_image_{request.user}.jpg' # DB에 저장하지 않고 사용한다음 지우기 위해
+#     with open(filename, 'wb') as f:
+#         f.write(imgdata)				# 디코딩한 이미지를 사용하기 위해 잠시 저장
+#  	#### 이미지를 사용하는 코드 #####
+#     os.remove(filename)    				# 이미지를 사용한 후 삭제
+#     return Response({'result' : imgdata})

PJT_FINAL/django_final/django_final/settings.py

@@ -1,9 +1,21 @@
 from pathlib import Path
 
+# #google로 로그인
+# import os
+# import json
+# import sys
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
 
+# #google로 로그인
+# ROOT_DIR = os.path.dirname(BASE_DIR)
+# SECRET_BASE_FILE = os.path.join(BASE_DIR, 'secrets.json')
+# secrets = json.loads(open(SECRET_BASE_FILE).read())
+# for key, value in secrets.items():
+#     setattr(sys.modules[__name__], key, value)
+
+
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
 
@@ -46,6 +58,9 @@
     # # OpenAPI 3.0
     # 'drf_spectacular',
 
+    # #google로 로그인
+    # 'allauth.socialaccount.providers.google',
+
 
     'django.contrib.admin',
     'django.contrib.auth',
@@ -55,6 +70,24 @@
     'django.contrib.staticfiles',
 ]
 
+# #google로 로그인
+# SITE_ID = 1
+# ACCOUNT_USER_MODEL_USERNAME_FIELD = True # username 필드 사용 x
+# ACCOUNT_EMAIL_REQUIRED = False            # email 필드 사용 o
+# ACCOUNT_USERNAME_REQUIRED = True        # username 필드 사용 x
+# ACCOUNT_AUTHENTICATION_METHOD = 'email'
+
+# REST_USE_JWT = True
+
+# from datetime import timedelta
+
+# SIMPLE_JWT = {
+#     'ACCESS_TOKEN_LIFETIME': timedelta(hours=2),
+#     'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
+#     'ROTATE_REFRESH_TOKENS': False,
+#     'BLACKLIST_AFTER_ROTATION': True,
+# }
+# # 여기까지
 
 REST_FRAMEWORK = {
     # Authentication

PJT_FINAL/django_final/movies/serializers.py

@@ -14,7 +14,7 @@ class MovieGenreSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Movie
-        fields = ('id', 'title', 'genres', 'overview')
+        fields = ('id', 'title', 'vote_average', 'genres', 'overview')
 
 
 class TopMovieListSerializer(serializers.ModelSerializer):
@@ -31,7 +31,7 @@ class MovieSearchSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Movie
-        fields = ('pk', 'overview', 'title', 'poster_path', 'similarity',)
+        fields = ('pk', 'overview', 'title', 'vote_average', 'poster_path', 'similarity',)
 
 # 유저 정보
 class UserSerializer(serializers.ModelSerializer):

PJT_FINAL/django_final/secrets.json

@@ -0,0 +1,5 @@
+{
+    "SECRET_KEY" : "secret_key",
+    "SOCIAL_AUTH_GOOGLE_CLIENT_ID" : "google_client_id",
+    "SOCIAL_AUTH_GOOGLE_SECRET" : "google_secret_key"
+} 

PJT_FINAL/front_end/src/components/user/login.vue

@@ -2,6 +2,7 @@
   <div class="loginDiv">
     <div class="loginLogo">LOGIN</div>
     <div class="loginSenterDiv">
+
       <div class="loginInputDiv">
         <div>E-MAIL</div>
         <input  v-model="username" class="loginInput" type="email" />
@@ -25,13 +26,21 @@
             class="loginButton"
             :to="{ name: 'userSignUp' }"
           >간편 회원가입</b-button>
+          <b-button
+            style="margin-top:4rem; opacity:0.5;"
+            variant="light"
+            class="loginButton"
+
+          >google</b-button>
         <!-- </router-link> -->
       </div>
     </div>
   </div>
 </template>
 
 <script>
+
+
 export default {
   name: "LoginUser",
   data() {
@@ -51,12 +60,18 @@ export default {
         password: password,
       }
       this.$store.dispatch('logIn', payload)
-    }
+    },
   }
-};
+}
 </script>
 
 <style>
+.userImg{
+    width: 200px;
+    height: 200px;
+    border-radius: 100%;
+}
+
 .loginLogo {
   padding: 2rem;
   font-size: 5rem;

PJT_FINAL/front_end/src/components/user/signUp.vue

@@ -2,6 +2,12 @@
   <div class="loginDiv">
     <div class="loginLogo">SIGN UP</div>
     <div class="loginSenterDiv">
+      <div class="loginInputDiv">
+        <v-img  :src="profile_pic"
+            contain height="150px" width="200px" style="border: 2px solid black; margin-left:100px;"/>
+        <input  @change="onInputImage"  type="file" accept="image/*" />
+        {{profile_pic.url}}
+      </div>
       <div class="loginInputDiv">
         <div>E-MAIL</div>
         <input v-model="username" class="loginInput" type="email" />
@@ -26,29 +32,34 @@
 </template>
 
 <script>
+
 export default {
   name:'signUp',
   data() {
     return {
       username: null,
       password1: null,
       password2: null,
+      profile_pic: ''
     }
   },
   methods: {
     signUp() {
-      const username = this.username
-      const password1 = this.password1
-      const password2 = this.password2
-      const payload = {
-        username,
-        password1,
-        password2,
-      }
+      console.log(this.username)
+      console.log(this.profile_pic)
+      const payload = new FormData();
+      payload.append('username', this.username)
+      payload.append('password1', this.password1)
+      payload.append('password2', this.password2)
+      payload.append('profile_pic', this.profile_pic)
 
+      console.log(payload, '2')
+      console.log(this.profile_pic, '3')
       this.$store.dispatch('signUp', payload)
-      console.log('123123',payload);
-
+    },
+    onInputImage(e){
+      this.profile_pic = e.target.files[0]
+      console.log(this.profile_pic, '1')
     }
   }
 }

PJT_FINAL/front_end/src/components/user/userInfo.vue

@@ -35,7 +35,7 @@
   </b-tabs>
     </div>
     <div style="color : red">
-
+        <p>{{profile}}</p>
         <h1> {{profile.id}}</h1>
         <h1> {{profile.username}}</h1>
         <h1> {{profile.followings}}</h1>

PJT_FINAL/front_end/src/store/index.js

@@ -111,14 +111,13 @@ export default new Vuex.Store({
       axios({
         method: 'post',
         url: `${API_URL}/accounts/signup/`,
-        data: {
-          username: payload.username,
-          password1: payload.password1,
-          password2: payload.password2,
-        }
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        data: payload
       })
         .then((res) => {
-          // console.log(res)
+          console.log('hi', res.data)
           context.commit('SIGN_UP', res.data.key)
           localStorage.setItem("token", this.state.token)
           context.dispatch("fetchCurrentUser")