vue-django 연결

 from django.urls import path, include
 from django.urls import path, include
 from django.conf.urls import url
 from django.conf.urls import url
-from api.views import VideoFileUploadView, VideoFileList
+from api.views import VideoFileUploadView, VideoFileList, FileListView
 from . import views
 from . import views
 from rest_framework.routers import DefaultRouter
 from rest_framework.routers import DefaultRouter
+from django.views.generic import TemplateView
 
 
 router = DefaultRouter()
 router = DefaultRouter()
 router.register('db/videofile', views.VideoFileViewSet)
 router.register('db/videofile', views.VideoFileViewSet)
@@ -12,6 +13,8 @@ urlpatterns = [
     # FBV
     # FBV
     path('api/upload', VideoFileUploadView.as_view(), name="file-upload"),
     path('api/upload', VideoFileUploadView.as_view(), name="file-upload"),
     path('api/upload/<int:pk>/', VideoFileList.as_view(), name="file-list"),
     path('api/upload/<int:pk>/', VideoFileList.as_view(), name="file-list"),
+    path('api/file', FileListView.as_view(), name="file"),
+    url(r'^(?P<path>.*)$', TemplateView.as_view(template_name='index.html')),
     # path('api/upload', views.VideoFile_Upload),
     # path('api/upload', views.VideoFile_Upload),
     path('', include(router.urls)),
     path('', include(router.urls)),
 ]
 ]

@@ -7,13 +7,16 @@ from rest_framework import viewsets
 import os
 import os
 from django.http.request import QueryDict
 from django.http.request import QueryDict
 from django.http import Http404
 from django.http import Http404
-from django.shortcuts import get_object_or_404
+from django.http import JsonResponse
+from django.shortcuts import get_object_or_404, render
 from api.models import Video, VideoFile
 from api.models import Video, VideoFile
 from api.serializers import VideoSerializer, VideoFileSerializer
 from api.serializers import VideoSerializer, VideoFileSerializer
 from api import  file_upload_path
 from api import  file_upload_path
 
 
 # Create your views here.
 # Create your views here.
 
 
+def index(request):
+    return render(request, template_name='index.html')
 
 
 class VideoViewSet(viewsets.ModelViewSet):
 class VideoViewSet(viewsets.ModelViewSet):
     queryset = Video.objects.all()
     queryset = Video.objects.all()
@@ -89,3 +92,49 @@ class VideoFileList(APIView):
         video = self.get_object(pk)
         video = self.get_object(pk)
         video.delete()
         video.delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class FileListView(APIView):
+    def get(self, request):
+        data = {
+            "search": '',
+            "limit": 10,
+            "skip": 0,
+            "order": "time",
+            "fileList": [
+                {
+                    "name": "1.png",
+                    "created": "2020-04-30",
+                    "size": 10234,
+                    "isFolder": False,
+                    "deletedDate": "",
+                },
+                {
+                    "name": "2.png",
+                    "created": "2020-04-30",
+                    "size": 3145,
+                    "isFolder": False,
+                    "deletedDate": "",
+                },
+                {
+                    "name": "3.png",
+                    "created": "2020-05-01",
+                    "size": 5653,
+                    "isFolder": False,
+                    "deletedDate": "",
+                },
+            ]
+        }
+        return Response(data)
+    def post(self, request, format=None):
+        data = {
+            "isSuccess": True,
+            "File": {
+                "name": "test.jpg",
+                "created": "2020-05-02",
+                "deletedDate": "",
+                "size": 2312,
+                "isFolder": False
+            }
+        }
+        return Response(data)
\ No newline at end of file

@@ -27,6 +27,16 @@ DEBUG = True
 
 
 ALLOWED_HOSTS = ['*']
 ALLOWED_HOSTS = ['*']
 
 
+
+# Static File DIR Settings
+STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+
+
+FRONTEND_DIR = os.path.join(os.path.abspath('../'), 'frontend')
+STATICFILES_DIRS = [
+    os.path.join(FRONTEND_DIR, 'dist/'),
+]
 # Application definition
 # Application definition
 
 
 REST_FRAMEWORK = {
 REST_FRAMEWORK = {
@@ -50,7 +60,7 @@ MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.common.CommonMiddleware',
-    'django.middleware.csrf.CsrfViewMiddleware',
+    # 'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
@@ -62,7 +72,9 @@ ROOT_URLCONF = 'backend.urls'
 TEMPLATES = [
 TEMPLATES = [
     {
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
         'APP_DIRS': True,
         'APP_DIRS': True,
         'OPTIONS': {
         'OPTIONS': {
             'context_processors': [
             'context_processors': [
@@ -122,12 +134,8 @@ USE_L10N = True
 USE_TZ = True
 USE_TZ = True
 
 
 
 
-# Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/3.0/howto/static-files/
-
-STATIC_URL = '/static/'
+# CORS settings
 
 
-# CORS
 CORS_ORIGIN_ALLOW_ALL = True
 CORS_ORIGIN_ALLOW_ALL = True
 CORS_ALLOW_CREDENTIALS = True
 CORS_ALLOW_CREDENTIALS = True
 CORS_ORIGIN_WHITELIST = [
 CORS_ORIGIN_WHITELIST = [

 asgiref==3.2.7
 asgiref==3.2.7
+autopep8==1.5.2
 Django==3.0.5
 Django==3.0.5
 django-cors-headers==3.2.1
 django-cors-headers==3.2.1
+django-webpack-loader==0.7.0
 djangorestframework==3.11.0
 djangorestframework==3.11.0
+Pillow==7.1.2
 pkg-resources==0.0.0
 pkg-resources==0.0.0
+pycodestyle==2.5.0
 pytz==2020.1
 pytz==2020.1
 sqlparse==0.3.1
 sqlparse==0.3.1

+a:hover,a:link,a:visited{text-decoration:none}
\ No newline at end of file

+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>Profit-Hunter</title><link href=/css/app.1dc1d4aa.css rel=preload as=style><link href=/css/chunk-vendors.abb36e73.css rel=preload as=style><link href=/js/app.a2bbd68a.js rel=preload as=script><link href=/js/chunk-vendors.c489da91.js rel=preload as=script><link href=/css/chunk-vendors.abb36e73.css rel=stylesheet><link href=/css/app.1dc1d4aa.css rel=stylesheet></head><body><noscript><strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.c489da91.js></script><script src=/js/app.a2bbd68a.js></script></body></html>
\ No newline at end of file

+(function(t){function e(e){for(var o,i,s=e[0],c=e[1],l=e[2],f=0,d=[];f<s.length;f++)i=s[f],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&d.push(n[i][0]),n[i]=0;for(o in c)Object.prototype.hasOwnProperty.call(c,o)&&(t[o]=c[o]);u&&u(e);while(d.length)d.shift()();return r.push.apply(r,l||[]),a()}function a(){for(var t,e=0;e<r.length;e++){for(var a=r[e],o=!0,s=1;s<a.length;s++){var c=a[s];0!==n[c]&&(o=!1)}o&&(r.splice(e--,1),t=i(i.s=a[0]))}return t}var o={},n={app:0},r=[];function i(e){if(o[e])return o[e].exports;var a=o[e]={i:e,l:!1,exports:{}};return t[e].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=t,i.c=o,i.d=function(t,e,a){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(a,o,function(e){return t[e]}.bind(null,o));return a},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/";var s=window["webpackJsonp"]=window["webpackJsonp"]||[],c=s.push.bind(s);s.push=e,s=s.slice();for(var l=0;l<s.length;l++)e(s[l]);var u=c;r.push([0,"chunk-vendors"]),a()})({0:function(t,e,a){t.exports=a("56d7")},"56d7":function(t,e,a){"use strict";a.r(e);a("e260"),a("e6cf"),a("cca6"),a("a79d");var o=a("2b0e"),n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("v-app",[a("v-app-bar",{attrs:{app:"",color:"#ffffff",elevation:"1","hide-on-scroll":""}},[a("v-icon",{staticClass:"mr-1",attrs:{size:"35",color:"grey700"}},[t._v("mdi-youtube")]),a("div",{staticStyle:{color:"#343a40","font-size":"20px","font-weight":"500"}},[t._v("Youtube Auto Tagger")]),a("v-spacer"),a("v-tooltip",{attrs:{bottom:""},scopedSlots:t._u([{key:"activator",fn:function(e){var o=e.on;return[a("v-btn",t._g({attrs:{icon:"",color:"grey700"},on:{click:function(e){t.clickInfo=!0}}},o),[a("v-icon",{attrs:{size:"30"}},[t._v("mdi-information")])],1)]}}])},[a("span",[t._v("Service Info")])])],1),a("v-dialog",{staticClass:"pa-2",attrs:{"max-width":"600"},model:{value:t.clickInfo,callback:function(e){t.clickInfo=e},expression:"clickInfo"}},[a("v-card",{staticClass:"pa-4",attrs:{elevation:"0",outlined:""}},[a("v-row",{staticClass:"mx-0 mb-8 mt-2",attrs:{justify:"center"}},[a("v-icon",{attrs:{color:"lightblue"}},[t._v("mdi-power-on")]),a("div",{staticStyle:{"text-align":"center","font-size":"22px","font-weight":"400",color:"#343a40"}},[t._v("Information of This Service")]),a("v-icon",{attrs:{color:"lightblue"}},[t._v("mdi-power-on")])],1),a("div",[t._v("Used Opensource")])],1)],1),a("v-content",[a("router-view")],1),a("v-footer",[a("v-row",{attrs:{justify:"center"}},[a("v-avatar",{staticStyle:{"border-radius":"4px"},attrs:{size:"25",tile:""}},[a("v-img",{attrs:{src:"http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1/uploads/99f7d5c73e506d2c5c0072a21f362181/logo.69342704.png"}})],1),a("a",{attrs:{href:"http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1"}},[a("div",{staticStyle:{"margin-left":"4px","font-size":"16px",color:"#5a5a5a","font-weight":"400"}},[t._v("Profit-Hunter")])])],1)],1)],1)},r=[],i={name:"App",data:function(){return{clickInfo:!1}}},s=i,c=(a("5c0b"),a("2877")),l=a("6544"),u=a.n(l),f=a("7496"),d=a("40dc"),p=a("8212"),v=a("8336"),g=a("b0af"),h=a("a75b"),y=a("169a"),m=a("553a"),b=a("132d"),x=a("adda"),w=a("0fd9"),_=a("2fa4"),k=a("3a2f"),S=Object(c["a"])(s,n,r,!1,null,null,null),V=S.exports;u()(S,{VApp:f["a"],VAppBar:d["a"],VAvatar:p["a"],VBtn:v["a"],VCard:g["a"],VContent:h["a"],VDialog:y["a"],VFooter:m["a"],VIcon:b["a"],VImg:x["a"],VRow:w["a"],VSpacer:_["a"],VTooltip:k["a"]});var C=a("8c4f"),z=a("bc3a"),j=a.n(z),P=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("v-sheet",[a("v-layout",{attrs:{"justify-center":""}},[a("v-flex",{attrs:{xs12:"",sm8:"",md6:"",lg4:""}},[a("v-row",{staticClass:"mx-0 mt-12",attrs:{justify:"center"}},[a("div",{staticStyle:{"font-size":"34px","font-weight":"500",color:"#343a40"}},[t._v("WELCOME")])]),a("v-card",{attrs:{elevation:"0"}},[t.$vuetify.breakpoint.mdAndUp?a("v-row",{staticClass:"mx-0 mt-12",attrs:{justify:"center"}},[a("v-flex",{staticClass:"mt-1",attrs:{md7:""}},[a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888"}},[t._v("This is Video auto tagging Service")]),a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888"}},[t._v("Designed for Youtube Videos")]),a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888"}},[t._v("It takes few minutes to analyze your Video!")])]),a("v-flex",{attrs:{md5:""}},[a("v-card",{staticClass:"ml-5",attrs:{width:"240",elevation:"0"}},[a("v-img",{attrs:{width:"240",src:"http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1/uploads/b70e4a173c2b7d5fa6ab73d48582dd6e/youtubelogoBlack.326653df.png"}})],1)],1)],1):a("v-card",{staticClass:"mt-8",attrs:{elevation:"0"}},[a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888","text-align":"center"}},[t._v("This is Video auto tagging Service")]),a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888","text-align":"center"}},[t._v("Designed for Youtube Videos")]),a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888","text-align":"center"}},[t._v("It takes few minutes to analyze your Video!")]),a("v-img",{staticStyle:{margin:"auto","margin-top":"20px"},attrs:{width:"180",src:"http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1/uploads/b70e4a173c2b7d5fa6ab73d48582dd6e/youtubelogoBlack.326653df.png"}})],1),a("div",{staticClass:"mt-10",staticStyle:{"font-size":"24px","text-align":"center","font-weight":"400",color:"#5a5a5a"}},[t._v("How To start this service")]),a("div",{staticStyle:{"font-size":"20px","font-weight":"300",color:"#888","text-align":"center"}},[t._v("Just Upload your Video")]),a("v-row",{staticClass:"mx-0 mt-2",attrs:{justify:"center"}},[a("v-card",{staticClass:"pa-9",attrs:{"max-width":"500",outlined:"",height:"120"},on:{dragover:function(t){t.preventDefault()},dragenter:function(t){t.preventDefault()},drop:function(e){return e.preventDefault(),t.onDrop(e)}}},[a("v-btn",{staticStyle:{"text-transform":"none"},attrs:{text:"",large:"",color:"primary"},on:{click:t.clickUploadButton}},[t._v("CLICK or DRAG & DROP")]),a("input",{ref:"fileInput",staticStyle:{display:"none"},attrs:{type:"file"},on:{change:t.onFileChange}})],1)],1),a("div",{staticClass:"mt-10",staticStyle:{"font-size":"24px","text-align":"center","font-weight":"400",color:"#5a5a5a"}},[t._v("The Results of Analyzed Video")]),a("v-card",{staticClass:"pa-2 mx-5 mt-6",attrs:{outlined:"",elevation:"0","min-height":"67"}},[a("div",{staticStyle:{"margin-left":"5px","margin-top":"-18px","background-color":"#fff",width:"110px","text-align":"center","font-size":"14px",color:"#5a5a5a","font-weight":"500"}},[t._v("Generated Tags")]),a("v-chip-group",{attrs:{column:""}},t._l(t.generatedTag,(function(e,o){return a("v-chip",{key:o,attrs:{color:"secondary"}},[t._v(t._s(e))])})),1)],1),a("v-card",{staticClass:"pa-2 mx-5 mt-8",attrs:{outlined:"",elevation:"0","min-height":"67"}},[a("div",{staticStyle:{"margin-left":"5px","margin-top":"-18px","background-color":"#fff",width:"140px","text-align":"center","font-size":"14px",color:"#5a5a5a","font-weight":"500"}},[t._v("Related Youtube Link")]),t._l(t.YoutubeUrl,(function(e){return a("v-flex",{key:e},[a("div",[a("a",{attrs:{href:e}},[t._v(t._s(e))])])])}))],2),a("div",{staticClass:"mt-3",staticStyle:{"font-size":"20px","font-weight":"300",color:"#888","text-align":"center"}},[t._v("If the Video is analyzed successfully,")]),a("div",{staticClass:"mb-5",staticStyle:{"font-size":"20px","font-weight":"300",color:"#888","text-align":"center"}},[t._v("Result Show up in each of Boxes!")])],1)],1)],1)],1)},I=[],O={name:"Home",data:function(){return{videoFile:"",YoutubeUrl:[],generatedTag:[],successDialog:!1,errorDialog:!1,loading:!1}},created:function(){this.YoutubeUrl=[],this.generatedTag=[]},methods:{loadVideoInfo:function(){},uploadVideo:function(t){var e=this;console.log(t[0]);var a=new FormData;a.append("file",t[0]),this.$axios.post("/upload",a,{headers:{"Content-Type":"multipart/form-data"}}).then((function(t){e.loading=!0,console.log(t)})).catch((function(t){console.log(t.message)}))},onDrop:function(t){this.uploadVideo(t.dataTransfer.files)},clickUploadButton:function(){this.$refs.fileInput.click()},onFileChange:function(t){this.uploadVideo(t.target.files)}}},T=O,D=a("cc20"),F=a("ef9a"),B=a("0e8f"),R=a("a722"),U=a("8dd9"),A=Object(c["a"])(T,P,I,!1,null,null,null),H=A.exports;u()(A,{VBtn:v["a"],VCard:g["a"],VChip:D["a"],VChipGroup:F["a"],VFlex:B["a"],VImg:x["a"],VLayout:R["a"],VRow:w["a"],VSheet:U["a"]}),o["a"].prototype.$axios=j.a;var $="/api/";o["a"].prototype.$apiRootPath=$,j.a.defaults.baseURL=$,o["a"].use(C["a"]);var Y=[{path:"/",name:"Home",component:H}],K=new C["a"]({mode:"history",base:"/",routes:Y}),L=K,M=a("2f62");o["a"].use(M["a"]);var E=new M["a"].Store({state:{},mutations:{},actions:{},modules:{}}),G=a("f309");o["a"].use(G["a"]);var J=new G["a"]({theme:{themes:{light:{primary:"#343a40",secondary:"#506980",accent:"#505B80",error:"#FF5252",info:"#2196F3",blue:"#173f5f",lightblue:"#72b1e4",success:"#2779bd",warning:"#12283a",grey300:"#eceeef",grey500:"#aaaaaa",grey700:"#5a5a5a",grey900:"#212529"},dark:{primary:"#343a40",secondary:"#506980",accent:"#505B80",error:"#FF5252",info:"#2196F3",blue:"#173f5f",lightblue:"#72b1e4",success:"#2779bd",warning:"#12283a",grey300:"#eceeef",grey500:"#aaaaaa",grey700:"#5a5a5a",grey900:"#212529"}}}});a("d5e8"),a("5363");o["a"].config.productionTip=!1,new o["a"]({router:L,store:E,vuetify:J,render:function(t){return t(V)}}).$mount("#app")},"5c0b":function(t,e,a){"use strict";var o=a("7694"),n=a.n(o);n.a},7694:function(t,e,a){}});
+//# sourceMappingURL=app.a2bbd68a.js.map
\ No newline at end of file

+{% load static %}
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset=utf-8>
+  <meta http-equiv=X-UA-Compatible content="IE=edge">
+  <meta name=viewport content="width=device-width,initial-scale=1">
+  <link rel=icon href="{% static 'favicon.ico' %}">
+  <title>front</title>
+  <link href="{% static '/css/app.1dc1d4aa.css' %}" rel=preload as=style>
+  <link href="{% static '/css/chunk-vendors.abb36e73.css' %}" rel=preload as=style>
+  <link href="{% static '/js/app.a2bbd68a.js' %}" rel=preload as=script>
+  <link href="{% static '/js/chunk-vendors.c489da91.js' %}" rel=preload as=script>
+  <link href="{% static '/css/chunk-vendors.abb36e73.css' %}" rel=stylesheet>
+  <link href="{% static '/css/app.1dc1d4aa.css' %}" rel=stylesheet>
+</head>
+
+<body>
+  <noscript><strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong></noscript>
+  <div id=app>
+  </div>
+  <script src="{% static '/js/chunk-vendors.c489da91.js' %}"></script>
+  <script src="{% static '/js/app.a2bbd68a.js' %}"></script>
+</body>
+
+</html>
\ No newline at end of file