2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
d4983bd1 1 parent a178308d

코드 정리

Inline Side-by-side
Showing 7 changed files with 232 additions and 127 deletions
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> 9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 11 <meta name="viewport" content="width=device-width,initial-scale=1.0">
12 + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="본인 api키" crossorigin="anonymous">
12 </head> 13 </head>
13 <body> 14 <body>
14 <noscript> 15 <noscript>
......
1 import axios from 'axios'; 1 import axios from 'axios';
2 2
3 const instance = axios.create({ 3 const instance = axios.create({
4 - baseURL: process.env.VUE_APP_API_URL, 4 + baseURL: process.env.VUE_APP_API_URL,
5 }); 5 });
6 6
7 function registerUser(userData) { 7 function registerUser(userData) {
8 - // const url = 'http://localhost:3000/api/signup' 8 + // const url = 'http://localhost:3000/api/signup'
9 - return axios.post('/api/RegistUser', userData); 9 + return axios.post('/api/RegistUser', userData);
10 } 10 }
11 11
12 function loginUser(userData) { 12 function loginUser(userData) {
13 - // const url = 'http://localhost:3000/api/login' 13 + // const url = 'http://localhost:3000/api/login'
14 - return axios.post('/api/login', userData); 14 + return axios.post('/api/login', userData);
15 } 15 }
16 16
17 function folder(curData) { 17 function folder(curData) {
18 - return axios.get('/api/folder/show', { 18 + return axios.get('/api/folder/show', {
19 - params: { 19 + params: {
20 - id: curData.id, 20 + id: curData.id,
21 - folder_id: curData.folder_id, 21 + folder_id: curData.folder_id,
22 - }, 22 + },
23 - }); 23 + });
24 } 24 }
25 25
26 function makeFolder(folderData) { 26 function makeFolder(folderData) {
27 - return axios.post('/api/folder/makefolder', folderData); 27 + return axios.post('/api/folder/makefolder', folderData);
28 } 28 }
29 29
30 function deleteFolder(folderData) { 30 function deleteFolder(folderData) {
31 - return axios.post('/api/folder/delfolder', folderData); 31 + return axios.post('/api/folder/delfolder', folderData);
32 } 32 }
33 33
34 function moveFolder(folderData) { 34 function moveFolder(folderData) {
35 - return axios.post('/api/folder/move', folderData); 35 + return axios.post('/api/folder/move', folderData);
36 } 36 }
37 37
38 function file(curData) { 38 function file(curData) {
39 - return axios.get('/api/file', { 39 + return axios.get('/api/file', {
40 - params: { 40 + params: {
41 - id: curData.id, 41 + id: curData.id,
42 - folder_id: curData.cur, 42 + folder_id: curData.cur,
43 - }, 43 + },
44 - }); 44 + });
45 } 45 }
46 46
47 function uploadFile(fileData) { 47 function uploadFile(fileData) {
48 - return axios.post('/api/file/upload', fileData, { 48 + return axios.post('/api/file/upload', fileData, {
49 - headers: { 49 + headers: {
50 - 'Content-Type': 'multipart/form-data', 50 + 'Content-Type': 'multipart/form-data',
51 - }, 51 + },
52 - }); 52 + });
53 } 53 }
54 54
55 function detailFile(fileData) { 55 function detailFile(fileData) {
56 - return axios.get(`/api/file/${fileData.fileName}`, { 56 + return axios.get(`/api/file/${fileData.fileName}`, {
57 - params: { 57 + params: {
58 - id: fileData.id, 58 + id: fileData.id,
59 - cur: fileData.cur, 59 + cur: fileData.cur,
60 - }, 60 + },
61 - }); 61 + });
62 } 62 }
63 63
64 function deleteFile(fileData) { 64 function deleteFile(fileData) {
65 - return axios.get(`/api/file/delete/${fileData.fileName}`, { 65 + return axios.get(`/api/file/delete/${fileData.fileName}`, {
66 - params: { 66 + params: {
67 - //현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다. 67 + //현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다.
68 - id: fileData.user_id, 68 + id: fileData.user_id,
69 - cur: fileData.cur, 69 + cur: fileData.cur,
70 - }, 70 + },
71 - }); 71 + });
72 } 72 }
73 73
74 function downloadFile(fileData) { 74 function downloadFile(fileData) {
75 - return axios.get(`/api/file/download/${fileData.fileName}`, { 75 + return axios.get(`/api/file/download/${fileData.fileName}`, {
76 - params: { 76 + params: {
77 - //현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다. 77 + //현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다.
78 - id: fileData.id, 78 + id: fileData.id,
79 - cur: fileData.cur, 79 + cur: fileData.cur,
80 - }, 80 + },
81 - }); 81 + });
82 } 82 }
83 83
84 function accessedList(curData) { 84 function accessedList(curData) {
85 - return axios.get('/api/quick', { 85 + return axios.get('/api/quick', {
86 - params: { 86 + params: {
87 - id: curData.id, 87 + id: curData.id,
88 - }, 88 + },
89 - }); 89 + });
90 } 90 }
91 91
92 function modifyFile(fileData) { 92 function modifyFile(fileData) {
93 - return axios.post(`/api/file/modify/${fileData.name}`, fileData); 93 + return axios.post(`/api/file/modify/${fileData.name}`, fileData);
94 } 94 }
95 95
96 function delFavorite(folderData) { 96 function delFavorite(folderData) {
97 - return axios.post('/api/favorites/delfolder', folderData); 97 + return axios.post('/api/favorites/delfolder', folderData);
98 } 98 }
99 99
100 function addFavorite(folderData) { 100 function addFavorite(folderData) {
101 - return axios.post('/api/favorites/addfolder', folderData); 101 + return axios.post('/api/favorites/addfolder', folderData);
102 } 102 }
103 103
104 function moveFile(fileData) { 104 function moveFile(fileData) {
105 - return axios.post('/api/folder/move', fileData); 105 + return axios.post('/api/folder/move', fileData);
106 } 106 }
107 107
108 function delFavoriteFile(fileData) { 108 function delFavoriteFile(fileData) {
109 - return axios.post('/api/favorites/delfile', fileData); 109 + return axios.post('/api/favorites/delfile', fileData);
110 } 110 }
111 111
112 function addFavoriteFile(fileData) { 112 function addFavoriteFile(fileData) {
113 - return axios.post('/api/favorites/addfile', fileData); 113 + return axios.post('/api/favorites/addfile', fileData);
114 } 114 }
115 115
116 function getFavoriteList(userId) { 116 function getFavoriteList(userId) {
117 - return axios.get('/api/favorites/show', { 117 + return axios.get('/api/favorites/show', {
118 - params: { 118 + params: {
119 - id: userId, 119 + id: userId,
120 - }, 120 + },
121 - }); 121 + });
122 } 122 }
123 123
124 export { 124 export {
125 - registerUser,
126 - loginUser,
127 - folder,
128 - makeFolder,
129 - deleteFolder,
130 - moveFolder,
131 - file,
132 - uploadFile,
133 - deleteFile,
134 - downloadFile,
135 - delFavorite,
136 - addFavorite,
137 - moveFile,
138 - delFavoriteFile,
139 - addFavoriteFile,
140 - accessedList,
141 - detailFile,
142 - modifyFile,
143 - getFavoriteList,
144 -};
...\ No newline at end of file ...\ No newline at end of file
125 + registerUser,
126 + loginUser,
127 + folder,
128 + makeFolder,
129 + deleteFolder,
130 + moveFolder,
131 + file,
132 + uploadFile,
133 + deleteFile,
134 + downloadFile,
135 + delFavorite,
136 + addFavorite,
137 + moveFile,
138 + delFavoriteFile,
139 + addFavoriteFile,
140 + accessedList,
141 + detailFile,
142 + modifyFile,
143 + getFavoriteList,
144 +};
......
...@@ -3,19 +3,35 @@ ...@@ -3,19 +3,35 @@
3 <v-toolbar flat> 3 <v-toolbar flat>
4 <v-toolbar-title>내 드라이브</v-toolbar-title> 4 <v-toolbar-title>내 드라이브</v-toolbar-title>
5 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
6 + <v-text-field
7 + v-model="search"
8 + append-icon="mdi-magnify"
9 + label="검색"
10 + single-line
11 + hide-details
12 + ></v-text-field>
6 </v-toolbar> 13 </v-toolbar>
7 <v-list two-line subheader> 14 <v-list two-line subheader>
8 <!-- <v-subheader inset>Folders</v-subheader> --> 15 <!-- <v-subheader inset>Folders</v-subheader> -->
9 <!-- Folder view --> 16 <!-- Folder view -->
10 - <v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent" 17 + <v-list-item
18 + v-if="this.$route.path !== '/fav'"
19 + @click=""
20 + @dblclick="$router.go(-1)"
11 >...</v-list-item 21 >...</v-list-item
12 > 22 >
13 <v-list-item 23 <v-list-item
14 v-for="item in this.$store.getters.favFolderL" 24 v-for="item in this.$store.getters.favFolderL"
15 - :key="item.title" 25 + :key="item.folder_id"
26 + :search="search"
16 @click.right="show(item, $event)" 27 @click.right="show(item, $event)"
17 @click="" 28 @click=""
18 - @dblclick="$router.push(`/file/${item.folder_id}`)" 29 + @dblclick="
30 + $router.push({
31 + name: 'Folder',
32 + params: { id: item.folder_id },
33 + })
34 + "
19 > 35 >
20 <v-list-item-avatar> 36 <v-list-item-avatar>
21 <v-icon>mdi-folder</v-icon> 37 <v-icon>mdi-folder</v-icon>
...@@ -34,7 +50,7 @@ ...@@ -34,7 +50,7 @@
34 </v-list-item> 50 </v-list-item>
35 <!-- File view --> 51 <!-- File view -->
36 <v-list-item 52 <v-list-item
37 - v-for="item in this.$store.getters.favFileL" 53 + v-for="item in this.$store.getters.faveFileL"
38 :key="item.title" 54 :key="item.title"
39 @click.right="showF(item, $event)" 55 @click.right="showF(item, $event)"
40 @dblclick=" 56 @dblclick="
...@@ -264,18 +280,21 @@ import { ...@@ -264,18 +280,21 @@ import {
264 getFavoriteList, 280 getFavoriteList,
265 } from '../api/index'; 281 } from '../api/index';
266 import Axios from 'axios'; 282 import Axios from 'axios';
283 +
267 export default { 284 export default {
268 props: { 285 props: {
269 - folderId: Object, 286 + folderId: Number,
270 }, 287 },
271 data() { 288 data() {
272 return { 289 return {
290 + folder_id: this.$route.params.id,
273 uploadedfile: null, 291 uploadedfile: null,
274 foldername: '', 292 foldername: '',
275 curfName: {}, 293 curfName: {},
276 cfilename: {}, 294 cfilename: {},
277 folders: [], 295 folders: [],
278 files: [], 296 files: [],
297 + search: '',
279 id: '', 298 id: '',
280 current_filename: null, //파일 상세정보 (이름) 299 current_filename: null, //파일 상세정보 (이름)
281 current_filedata: null, //파일 상세정보 (내용) 300 current_filedata: null, //파일 상세정보 (내용)
...@@ -297,18 +316,24 @@ export default { ...@@ -297,18 +316,24 @@ export default {
297 }, 316 },
298 }; 317 };
299 }, 318 },
300 - async created() { 319 + created() {
301 - try { 320 + this.fetchData();
302 - const response = await getFavoriteList(this.$store.state.id); 321 + },
303 - console.log(response.data); 322 + watch: {
304 - this.$store.commit('setfavFolderList', response.data.folders); 323 + $route: 'fetchData',
305 - this.$store.commit('setfavFileList', response.data.files);
306 - } catch (error) {
307 - console.log('에러');
308 - console.log(error);
309 - }
310 }, 324 },
311 methods: { 325 methods: {
326 + async fetchData() {
327 + try {
328 + const response = await getFavoriteList(this.$store.state.id);
329 + console.log(response.data);
330 + this.$store.commit('setfavFolderList', response.data.folders);
331 + this.$store.commit('setfavFileList', response.data.files);
332 + } catch (error) {
333 + console.log('에러');
334 + console.log(error);
335 + }
336 + },
312 handleFileUpload() { 337 handleFileUpload() {
313 this.uploadedfile = this.$refs.uploadedfile.files[0]; 338 this.uploadedfile = this.$refs.uploadedfile.files[0];
314 console.log(this.uploadedfile); 339 console.log(this.uploadedfile);
...@@ -322,18 +347,38 @@ export default { ...@@ -322,18 +347,38 @@ export default {
322 this.dialog2 = false; 347 this.dialog2 = false;
323 this.dialog3 = false; 348 this.dialog3 = false;
324 }, 349 },
325 - async moveF(folder_name, location) { 350 + async makeF() {
351 + try {
352 + const folderData = {
353 + user_id: this.$store.state.id,
354 + cur: this.$store.state.cur,
355 + folder_name: this.foldername,
356 + };
357 + const response = await makeFolder(folderData);
358 + console.log(response.data);
359 + console.log('폴더 생성 완료');
360 + this.$store.commit('setFolder', response.data.folders);
361 + this.folders = response.data.folders;
362 + } catch (error) {
363 + console.log('에러');
364 + console.log(error.response.data);
365 + } finally {
366 + this.initFolderName();
367 + this.dialog = false;
368 + }
369 + },
370 + async moveF(move_folder_name) {
326 try { 371 try {
327 const curData = { 372 const curData = {
328 id: this.$store.state.id, 373 id: this.$store.state.id,
329 - cur: location, 374 + cur: this.$store.state.cur + move_folder_name + '/',
330 }; 375 };
331 const response = await folder(curData); 376 const response = await folder(curData);
332 const file_response = await file(curData); 377 const file_response = await file(curData);
333 console.log(response.data); 378 console.log(response.data);
334 - this.$store.commit('setfavFolderList', response.data.folders); 379 + this.$store.commit('setFolder', response.data.folders);
335 - this.$store.commit('setfavFileList', file_response.data.files); 380 + this.$store.commit('setFile', file_response.data.files);
336 - this.$store.commit('setCur', location); 381 + this.$store.commit('setCur', response.data.cur);
337 this.$store.commit('setParent', response.data.parentPath); 382 this.$store.commit('setParent', response.data.parentPath);
338 this.folders = this.$store.getters.folderL; 383 this.folders = this.$store.getters.folderL;
339 this.files = this.$store.getters.fileL; 384 this.files = this.$store.getters.fileL;
...@@ -380,6 +425,77 @@ export default { ...@@ -380,6 +425,77 @@ export default {
380 this.curfName = ''; 425 this.curfName = '';
381 } 426 }
382 }, 427 },
428 + async transferF(folderName) {
429 + try {
430 + const cData = {
431 + id: this.$store.state.id,
432 + cur: this.$store.state.cur,
433 + name: this.curfName.folder_name,
434 + isfolder: true,
435 + newPath: this.$store.state.cur + folderName + '/',
436 + };
437 + const response = await moveFolder(cData);
438 + console.log(response);
439 + this.$store.commit('setFolder', response.data.folders);
440 + this.folders = this.$store.getters.folderL;
441 + } catch (error) {
442 + console.log('에러');
443 + console.log(error.response.data);
444 + } finally {
445 + this.curfName = {};
446 + this.dialog2 = false;
447 + }
448 + },
449 + async upload_file() {
450 + try {
451 + const formData = new FormData();
452 + formData.append('file', this.uploadedfile);
453 + formData.append('user_id', this.$store.state.id);
454 + formData.append('cur', this.$store.state.cur);
455 + const currentData = {
456 + id: this.$store.state.id,
457 + cur: this.$store.state.cur,
458 + };
459 + console.log(currentData);
460 + const response = await uploadFile(formData);
461 + const filelist = await file(currentData);
462 + console.log(filelist.data.files);
463 + this.$store.commit('setFile', filelist.data.files);
464 + console.log(this.$store.getters.fileL);
465 + this.files = this.$store.getters.fileL;
466 + } catch (error) {
467 + console.log('에러');
468 + console.log(error);
469 + }
470 + },
471 + async delete_file() {
472 + try {
473 + var itemlist = this.$store.getters.fileL;
474 + const currentData = {
475 + fileName: null,
476 + user_id: null,
477 + cur: this.$store.state.cur,
478 + };
479 + for (var i = 0; i < itemlist.length; i++) {
480 + if (itemlist[i].file_name == this.cfilename.file_name) {
481 + currentData.fileName = itemlist[i].file_name;
482 + currentData.user_id = itemlist[i].user_id;
483 + }
484 + }
485 + const filelistData = {
486 + id: currentData.user_id,
487 + cur: currentData.cur,
488 + };
489 + const response = await deleteFile(currentData);
490 + setTimeout(function() {}, 500);
491 + const filelist = await file(filelistData);
492 + this.$store.commit('setFile', filelist.data.files);
493 + this.files = this.$store.getters.fileL;
494 + } catch (error) {
495 + console.log('에러');
496 + console.log(error);
497 + }
498 + },
383 async download_file() { 499 async download_file() {
384 try { 500 try {
385 const currentData = { 501 const currentData = {
......
...@@ -259,7 +259,7 @@ ...@@ -259,7 +259,7 @@
259 v-on:change="handleFileUpload()" 259 v-on:change="handleFileUpload()"
260 /> 260 />
261 <br /> 261 <br />
262 - <v-btn color="blue" @click="upload_file">upload</v-btn> 262 + <v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn>
263 <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> 263 <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
264 <v-icon>mdi-plus</v-icon> 264 <v-icon>mdi-plus</v-icon>
265 </v-btn> 265 </v-btn>
......
...@@ -31,6 +31,14 @@ ...@@ -31,6 +31,14 @@
31 <v-list-item-title>즐겨찾기</v-list-item-title> 31 <v-list-item-title>즐겨찾기</v-list-item-title>
32 </v-list-item-content> 32 </v-list-item-content>
33 </v-list-item> 33 </v-list-item>
34 + <v-list-item router :to="{ name: 'Fav' }" exact>
35 + <v-list-item-action>
36 + <v-icon>fas fa-share-alt</v-icon>
37 + </v-list-item-action>
38 + <v-list-item-content>
39 + <v-list-item-title>공유</v-list-item-title>
40 + </v-list-item-content>
41 + </v-list-item>
34 <v-list-item router :to="{ name: 'Quick' }" exact> 42 <v-list-item router :to="{ name: 'Quick' }" exact>
35 <v-list-item-action> 43 <v-list-item-action>
36 <v-icon>mdi-history</v-icon> 44 <v-icon>mdi-history</v-icon>
...@@ -47,14 +55,6 @@ ...@@ -47,14 +55,6 @@
47 <v-list-item-title>연락처</v-list-item-title> 55 <v-list-item-title>연락처</v-list-item-title>
48 </v-list-item-content> 56 </v-list-item-content>
49 </v-list-item> 57 </v-list-item>
50 - <v-list-item router :to="{ name: 'Main' }" exact>
51 - <v-list-item-action>
52 - <v-icon>mdi-settings</v-icon>
53 - </v-list-item-action>
54 - <v-list-item-content>
55 - <v-list-item-title>설정</v-list-item-title>
56 - </v-list-item-content>
57 - </v-list-item>
58 <v-list-item> 58 <v-list-item>
59 <v-list-item-action> 59 <v-list-item-action>
60 <v-icon>mdi-delete</v-icon> 60 <v-icon>mdi-delete</v-icon>
......
...@@ -14,10 +14,7 @@ ...@@ -14,10 +14,7 @@
14 <v-list two-line subheader> 14 <v-list two-line subheader>
15 <!-- <v-subheader inset>Folders</v-subheader> --> 15 <!-- <v-subheader inset>Folders</v-subheader> -->
16 <!-- Folder view --> 16 <!-- Folder view -->
17 - <v-list-item 17 + <v-list-item @click="" @dblclick="$router.go(-1)">...</v-list-item>
18 - @click=""
19 - @dblclick="$router.go(-1)"
20 - >...</v-list-item>
21 <v-list-item 18 <v-list-item
22 v-for="item in this.$store.getters.folderL" 19 v-for="item in this.$store.getters.folderL"
23 :key="item.folder_id" 20 :key="item.folder_id"
......
1 <template lang="html"> 1 <template lang="html">
2 <v-container> 2 <v-container>
3 - <div>
4 - <h2>안녕하세요!</h2>
5 - <br /><br />
6 - </div>
7 <v-layout column> 3 <v-layout column>
8 <v-flex> 4 <v-flex>
9 - <v-layout row wrap> 5 + <v-layout column>
10 - <v-flex lg6>
11 - <v-flex>
12 - <Filecard></Filecard>
13 - </v-flex>
14 - <v-flex><br /><br /></v-flex>
15 - </v-flex>
16 <v-flex><br /><br /></v-flex> 6 <v-flex><br /><br /></v-flex>
17 - <v-flex lg6> 7 + <v-flex>
18 - <Favlist></Favlist> 8 + <FileList></FileList>
19 </v-flex> 9 </v-flex>
20 </v-layout> 10 </v-layout>
21 </v-flex> 11 </v-flex>
22 </v-layout> 12 </v-layout>
13 + <v-flex><br /><br /></v-flex>
23 <v-divider></v-divider> 14 <v-divider></v-divider>
24 <v-layout column> 15 <v-layout column>
25 <v-flex> 16 <v-flex>
......