2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
2f7e0b6f 1 parent b32ea4a4

add folders

Inline Side-by-side
Showing 7 changed files with 112 additions and 22 deletions
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 <title><%= htmlWebpackPlugin.options.title %></title> 8 <title><%= htmlWebpackPlugin.options.title %></title>
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 </head> 12 </head>
12 <body> 13 <body>
13 <noscript> 14 <noscript>
......
...@@ -14,4 +14,8 @@ function registerUser(userData) { ...@@ -14,4 +14,8 @@ function registerUser(userData) {
14 return axios.post('/api/login', userData); 14 return axios.post('/api/login', userData);
15 } 15 }
16 16
17 - export { registerUser, loginUser };
...\ No newline at end of file ...\ No newline at end of file
17 +function dropbox(userData){
18 + return axios.get('/api/dropbox', userData);
19 +}
20 +
21 + export { registerUser, loginUser, dropbox };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -17,19 +17,16 @@ ...@@ -17,19 +17,16 @@
17 <v-subheader inset>Folders</v-subheader> 17 <v-subheader inset>Folders</v-subheader>
18 18
19 <v-list-item 19 <v-list-item
20 - v-for="item in items" 20 + v-for="item in this.$store.getters.folderL"
21 :key="item.title" 21 :key="item.title"
22 - @click="" 22 + @click="$router.push({name: 'Folder'})"
23 > 23 >
24 <v-list-item-avatar> 24 <v-list-item-avatar>
25 - <v-icon 25 + <v-icon>mdi-folder</v-icon>
26 -
27 - >{{item.iconClass}}</v-icon>
28 </v-list-item-avatar> 26 </v-list-item-avatar>
29 27
30 <v-list-item-content> 28 <v-list-item-content>
31 - <v-list-item-title v-text="item.title"></v-list-item-title> 29 + <v-list-item-title v-text="item"></v-list-item-title>
32 - <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
33 </v-list-item-content> 30 </v-list-item-content>
34 31
35 <v-list-item-action> 32 <v-list-item-action>
...@@ -49,12 +46,11 @@ ...@@ -49,12 +46,11 @@
49 @click="" 46 @click=""
50 > 47 >
51 <v-list-item-avatar> 48 <v-list-item-avatar>
52 - <v-icon> {{item.iconClass}}</v-icon> 49 + <v-icon> mdi-file</v-icon>
53 </v-list-item-avatar> 50 </v-list-item-avatar>
54 51
55 <v-list-item-content> 52 <v-list-item-content>
56 - <v-list-item-title v-text="item.title"></v-list-item-title> 53 + <v-list-item-title v-text="item"></v-list-item-title>
57 - <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
58 </v-list-item-content> 54 </v-list-item-content>
59 55
60 <v-list-item-action> 56 <v-list-item-action>
...@@ -98,17 +94,40 @@ ...@@ -98,17 +94,40 @@
98 </template> 94 </template>
99 95
100 <script> 96 <script>
97 +import { dropbox } from '../api/index';
101 export default { 98 export default {
102 - data: () => ({ 99 + data() {
103 - items: [ 100 + return {
104 - { icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' }, 101 + folders: [],
105 - { icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' }, 102 + files: [],
106 - { icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' }, 103 + search:'',
107 - ], 104 + }
108 - items2: [ 105 + },
109 - { icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' }, 106 + async created(){
110 - { icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' }, 107 + try {
111 - ], 108 + const userData = {
112 - }), 109 + user_id: this.$store.getters.userId,
110 + cur: '/',
111 + };
112 + const { data } = await dropbox(userData);
113 + console.log(data);
114 + this.$store.commit('setFolder', data.folders);
115 + this.$store.commit('setFile', data.files);
116 + } catch (error) {
117 + console.log("에러");
118 + console.log(error.response.data);
119 + }
120 + }
121 + // data: () => ({
122 + // items: [
123 + // { icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
124 + // { icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
125 + // { icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
126 + // ],
127 + // items2: [
128 + // { icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
129 + // { icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
130 + // ],
131 + // }),
113 } 132 }
114 </script> 133 </script>
......
1 +<template>
2 + <div>
3 + <v-list>
4 + <v-icon>mdi-folder</v-icon>
5 + <v-header>Folders</v-header>
6 + <v-list-item
7 + v-for="item in items"
8 + :key="item.files">
9 +
10 + </v-list-item>
11 + </v-list>
12 + </div>
13 +</template>
14 +
15 +<script>
16 +export default {
17 + props:{
18 +
19 + }
20 +}
21 +</script>
22 +
23 +<style>
24 +
25 +</style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -66,6 +66,11 @@ export default new VueRouter ({ ...@@ -66,6 +66,11 @@ export default new VueRouter ({
66 path:'/feedback', 66 path:'/feedback',
67 name:'Feedback', 67 name:'Feedback',
68 component: () => import('../views/Feedback.vue') 68 component: () => import('../views/Feedback.vue')
69 + },
70 + {
71 + path: '/folder',
72 + name: 'Folder',
73 + component: () => import('../views/FolderPage.vue')
69 } 74 }
70 75
71 ] 76 ]
......
...@@ -6,6 +6,8 @@ Vue.use(Vuex) ...@@ -6,6 +6,8 @@ Vue.use(Vuex)
6 export default new Vuex.Store({ 6 export default new Vuex.Store({
7 state: { 7 state: {
8 id: '', 8 id: '',
9 + folders: [],
10 + files: [],
9 }, 11 },
10 mutations: { 12 mutations: {
11 setId(state, userid){ 13 setId(state, userid){
...@@ -13,11 +15,26 @@ export default new Vuex.Store({ ...@@ -13,11 +15,26 @@ export default new Vuex.Store({
13 }, 15 },
14 clearid(state){ 16 clearid(state){
15 state.id= ''; 17 state.id= '';
18 + },
19 + setFolder(state, folderlist){
20 + state.folders = folderlist;
21 + },
22 + setFile(state, filelist){
23 + state.files = fileList;
16 } 24 }
17 }, 25 },
18 getters: { 26 getters: {
19 isLogin(state){ 27 isLogin(state){
20 return state.id !== ''; 28 return state.id !== '';
29 + },
30 + userID(state){
31 + return state.id;
32 + },
33 + folderL(state){
34 + return state.folders;
35 + },
36 + fileL(state){
37 + return state.files;
21 } 38 }
22 } 39 }
23 }) 40 })
......
1 +<template>
2 + <div>
3 + <FolderList></FolderList>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import FolderList from '../components/FolderList'
9 +
10 +export default {
11 + components: {
12 + FolderList,
13 + }
14 +}
15 +</script>
16 +
17 +<style>
18 +
19 +</style>
...\ No newline at end of file ...\ No newline at end of file