2020-1-capstone-design1 / PKH_Project1

Go to a project
Toggle navigation Toggle navigation pinning
Yoonjunhyeon
41e814b1 1 parent fe333de8

vue-django 연결

Expand all
Inline Side-by-side
Showing 41 changed files with 105 additions and 9 deletions
from django.urls import path, include
from django.conf.urls import url
from api.views import VideoFileUploadView, VideoFileList
from api.views import VideoFileUploadView, VideoFileList, FileListView
from . import views
from rest_framework.routers import DefaultRouter
from django.views.generic import TemplateView
router = DefaultRouter()
router.register('db/videofile', views.VideoFileViewSet)
......@@ -12,6 +13,8 @@ urlpatterns = [
# FBV
path('api/upload', VideoFileUploadView.as_view(), name="file-upload"),
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('', include(router.urls)),
]
......
......@@ -7,13 +7,16 @@ from rest_framework import viewsets
import os
from django.http.request import QueryDict
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.serializers import VideoSerializer, VideoFileSerializer
from api import file_upload_path
# Create your views here.
def index(request):
return render(request, template_name='index.html')
class VideoViewSet(viewsets.ModelViewSet):
queryset = Video.objects.all()
......@@ -89,3 +92,49 @@ class VideoFileList(APIView):
video = self.get_object(pk)
video.delete()
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 = ['*']
# 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
REST_FRAMEWORK = {
......@@ -50,7 +60,7 @@ MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
......@@ -62,7 +72,9 @@ ROOT_URLCONF = 'backend.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
......@@ -122,12 +134,8 @@ USE_L10N = 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_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [
......
asgiref==3.2.7
autopep8==1.5.2
Django==3.0.5
django-cors-headers==3.2.1
django-webpack-loader==0.7.0
djangorestframework==3.11.0
Pillow==7.1.2
pkg-resources==0.0.0
pycodestyle==2.5.0
pytz==2020.1
sqlparse==0.3.1
......
a:hover,a:link,a:visited{text-decoration:none}
\ No newline at end of file
This diff could not be displayed because it is too large.
No preview for this file type
<!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
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
{% 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