Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-1-CloudComputing
/
D_Team_Khuloud
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
최동원
2020-06-04 20:55:08 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
88e27b277bb4cbf32767b3b448d9c106bc9ea23c
88e27b27
1 parent
cf94c6a3
코드 정리
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
309 additions
and
261 deletions
front-end/.eslintrc.js
front-end/babel.config.js
front-end/package-lock.json
front-end/package.json
front-end/src/api/index.js
front-end/src/components/FileList.vue
front-end/src/components/ToolView.vue
front-end/src/routes/index.js
front-end/.eslintrc.js
0 → 100644
View file @
88e27b2
module
.
exports
=
{
root
:
true
,
env
:
{
node
:
true
,
},
extends
:
[
'eslint:recommended'
,
'plugin:vue/essential'
,
'prettier'
,
'plugin:prettier/recommended'
,
],
parserOptions
:
{
parser
:
'babel-eslint'
,
},
rules
:
{
'no-console'
:
process
.
env
.
NODE_ENV
===
'production'
?
'warn'
:
'off'
,
'no-debugger'
:
process
.
env
.
NODE_ENV
===
'production'
?
'warn'
:
'off'
,
'prettier/prettier'
:
[
'error'
,
{
singleQuote
:
true
,
semi
:
true
,
useTabs
:
true
,
tabWidth
:
2
,
trailingComma
:
'all'
,
printWidth
:
80
,
bracketSpacing
:
true
,
arrowParens
:
'avoid'
,
},
],
},
overrides
:
[
{
files
:
[
'**/__tests__/*.{j,t}s?(x)'
,
'**/tests/unit/**/*.spec.{j,t}s?(x)'
,
],
env
:
{
jest
:
true
,
},
},
],
};
front-end/babel.config.js
View file @
88e27b2
module
.
exports
=
{
presets
:
[
'@vue/cli-plugin-babel/preset'
]
}
presets
:
[
'@vue/cli-plugin-babel/preset'
],
};
...
...
front-end/package-lock.json
View file @
88e27b2
...
...
@@ -2147,6 +2147,20 @@
}
}
},
"babel-eslint"
:
{
"version"
:
"10.1.0"
,
"resolved"
:
"https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz"
,
"integrity"
:
"sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg=="
,
"dev"
:
true
,
"requires"
:
{
"@babel/code-frame"
:
"^7.0.0"
,
"@babel/parser"
:
"^7.7.0"
,
"@babel/traverse"
:
"^7.7.0"
,
"@babel/types"
:
"^7.7.0"
,
"eslint-visitor-keys"
:
"^1.0.0"
,
"resolve"
:
"^1.12.0"
}
},
"babel-loader"
:
{
"version"
:
"8.1.0"
,
"resolved"
:
"https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz"
,
...
...
@@ -4422,9 +4436,9 @@
"dev"
:
true
},
"cross-spawn"
:
{
"version"
:
"7.0.
2
"
,
"resolved"
:
"https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.
2
.tgz"
,
"integrity"
:
"sha512-
PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMx
w=="
,
"version"
:
"7.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.
3
.tgz"
,
"integrity"
:
"sha512-
iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6
w=="
,
"dev"
:
true
,
"requires"
:
{
"path-key"
:
"^3.1.0"
,
...
...
@@ -4596,14 +4610,14 @@
"dev"
:
true
},
"espree"
:
{
"version"
:
"7.
0
.0"
,
"resolved"
:
"https://registry.npmjs.org/espree/-/espree-7.
0
.0.tgz"
,
"integrity"
:
"sha512-
/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOT
w=="
,
"version"
:
"7.
1
.0"
,
"resolved"
:
"https://registry.npmjs.org/espree/-/espree-7.
1
.0.tgz"
,
"integrity"
:
"sha512-
dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Q
w=="
,
"dev"
:
true
,
"requires"
:
{
"acorn"
:
"^7.
1.1
"
,
"acorn"
:
"^7.
2.0
"
,
"acorn-jsx"
:
"^5.2.0"
,
"eslint-visitor-keys"
:
"^1.
1
.0"
"eslint-visitor-keys"
:
"^1.
2
.0"
},
"dependencies"
:
{
"acorn"
:
{
...
...
@@ -4611,6 +4625,12 @@
"resolved"
:
"https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz"
,
"integrity"
:
"sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ=="
,
"dev"
:
true
},
"eslint-visitor-keys"
:
{
"version"
:
"1.2.0"
,
"resolved"
:
"https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz"
,
"integrity"
:
"sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ=="
,
"dev"
:
true
}
}
},
...
...
@@ -10644,9 +10664,9 @@
"dev"
:
true
},
"v8-compile-cache"
:
{
"version"
:
"2.1.
0
"
,
"resolved"
:
"https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.
0
.tgz"
,
"integrity"
:
"sha512-
usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g
=="
,
"version"
:
"2.1.
1
"
,
"resolved"
:
"https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.
1
.tgz"
,
"integrity"
:
"sha512-
8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ
=="
,
"dev"
:
true
},
"validate-npm-package-license"
:
{
...
...
front-end/package.json
View file @
88e27b2
...
...
@@ -4,7 +4,8 @@
"private"
:
true
,
"scripts"
:
{
"serve"
:
"vue-cli-service serve"
,
"build"
:
"vue-cli-service build"
"build"
:
"vue-cli-service build"
,
"lint"
:
"vue-cli-service lint"
},
"dependencies"
:
{
"axios"
:
"^0.19.2"
,
...
...
@@ -19,6 +20,7 @@
"@vue/cli-plugin-router"
:
"~4.3.0"
,
"@vue/cli-plugin-vuex"
:
"~4.3.0"
,
"@vue/cli-service"
:
"~4.3.0"
,
"babel-eslint"
:
"^10.1.0"
,
"eslint"
:
"^7.1.0"
,
"eslint-config-prettier"
:
"^6.11.0"
,
"eslint-plugin-prettier"
:
"^3.1.3"
,
...
...
front-end/src/api/index.js
View file @
88e27b2
import
axios
from
'axios'
import
axios
from
'axios'
;
const
instance
=
axios
.
create
({
baseURL
:
process
.
env
.
VUE_APP_API_URL
,
...
...
@@ -18,8 +18,8 @@ function folder(curData) {
return
axios
.
get
(
'/api/folder/show'
,
{
params
:
{
id
:
curData
.
id
,
cur
:
curData
.
cur
}
cur
:
curData
.
cur
,
},
});
}
...
...
@@ -35,52 +35,60 @@ function moveFolder(folderData) {
return
axios
.
post
(
'/api/folder/move'
,
folderData
);
}
function
file
(
curData
){
function
file
(
curData
)
{
return
axios
.
get
(
'/api/file'
,
{
params
:
{
id
:
curData
.
id
,
cur
:
curData
.
cur
}
cur
:
curData
.
cur
,
},
});
}
function
uploadFile
(
fileData
){
function
uploadFile
(
fileData
)
{
return
axios
.
post
(
'/api/file/upload'
,
fileData
,
{
headers
:
{
'Content-Type'
:
'multipart/form-data'
}
headers
:
{
'Content-Type'
:
'multipart/form-data'
,
},
});
}
function
detailFile
(
fileData
){
function
detailFile
(
fileData
)
{
return
axios
.
get
(
`/api/file/
${
fileData
.
name
}
`
,
{
params
:
{
params
:
{
id
:
fileData
.
id
,
cur
:
fileData
.
cur
}
})
cur
:
fileData
.
cur
,
},
});
}
function
deleteFile
(
fileData
){
function
deleteFile
(
fileData
)
{
return
axios
.
get
(
`/api/file/delete/
${
fileData
.
fileName
}
`
,
{
params
:
{
params
:
{
//현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다.
id
:
fileData
.
user_id
,
cur
:
fileData
.
cur
}
cur
:
fileData
.
cur
,
},
});
}
function
downloadFile
(
fileData
){
function
downloadFile
(
fileData
)
{
return
axios
.
get
(
`api/file/download/
${
fileData
.
fileName
}
`
,
{
params
:
{
params
:
{
//현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다.
id
:
fileData
.
id
,
cur
:
fileData
.
cur
}
cur
:
fileData
.
cur
,
},
});
}
export
{
registerUser
,
loginUser
,
folder
,
makeFolder
,
deleteFolder
,
moveFolder
,
file
,
uploadFile
,
deleteFile
,
downloadFile
};
export
{
registerUser
,
loginUser
,
folder
,
makeFolder
,
deleteFolder
,
moveFolder
,
file
,
uploadFile
,
deleteFile
,
downloadFile
,
};
...
...
front-end/src/components/FileList.vue
View file @
88e27b2
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>파일
</v-toolbar-title>
<v-toolbar-title>파일 </v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
...
...
@@ -19,18 +18,16 @@
v-for="item in this.$store.getters.folderL"
:key="item.title"
:search="search"
@click.right="show(item.folder_name,
$event)"
@click.right="show(item.folder_name,
$event)"
@click.left="moveF(item.folder_name)"
>
<v-list-item-avatar
>
<v-list-item-avatar
>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content
>
<v-list-item-content
>
<v-list-item-title v-text="item.folder_name"></v-list-item-title>
</v-list-item-content>
<v-menu
v-model="showMenu"
:position-x="x"
...
...
@@ -48,26 +45,22 @@
</v-list>
</v-menu>
</v-list-item>
<v-dialog
v-model="dialog2"
width="500px"
>
<v-dialog v-model="dialog2" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Move Folder
</v-card-title>
<v-container>
<v-list-item-group
v-for="item2 in folders"
:key="item2.folder_id"
>
<v-list-item-group v-for="item2 in folders" :key="item2.folder_id">
<template v-if="!(item2.folder_name === curfName)">
<v-hover @click.left="transferF(item2.folder_name)">
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item2.folder_name"></v-list-item-title>
<v-list-item-title
v-text="item2.folder_name"
></v-list-item-title>
</v-list-item-content>
</v-hover>
</template>
...
...
@@ -76,20 +69,13 @@
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="cancelMove"
>Cancel</v-btn>
<v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider inset></v-divider>
<v-subheader inset>Files</v-subheader>
<v-list-item
v-for="item in this.$store.getters.fileL"
:key="item.title"
>
<v-list-item v-for="item in this.$store.getters.fileL" :key="item.title">
<v-list-item-avatar>
<v-icon> mdi-file</v-icon>
</v-list-item-avatar>
...
...
@@ -106,9 +92,13 @@
</v-list-item-action>
</v-list-item>
</v-list>
<input id = "file-selector" ref='uploadedfile' type="file"
v-on:change="handleFileUpload()">
<br>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
<br />
<!--
<v-file-input
v-model="files"
...
...
@@ -141,22 +131,11 @@
</v-file-input>
-->
<v-btn color="blue" @click = "upload_file">upload</v-btn>
<v-btn
bottom
color="blue"
dark
fab
fixed
right
@click="dialog = !dialog"
>
<v-btn color="blue" @click="upload_file">upload</v-btn>
<v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-dialog
v-model="dialog"
width="500px"
>
<v-dialog v-model="dialog" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Create Folder
...
...
@@ -164,59 +143,67 @@
<v-container>
<div>
<v-icon>mdi-folder</v-icon>
<v-text-field placeholder="name" id="foldername" type="text" v-model="foldername" ></v-text-field>
<v-text-field
placeholder="name"
id="foldername"
type="text"
v-model="foldername"
></v-text-field>
</div>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="dialog = false"
>Cancel</v-btn>
<v-btn
text
@click="makeF"
>Create</v-btn>
<v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
<v-btn text @click="makeF">Create</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { folder, makeFolder, deleteFolder, moveFolder, file, uploadFile, deleteFile, downloadFile } from '../api/index';
import {
folder,
makeFolder,
deleteFolder,
moveFolder,
file,
uploadFile,
deleteFile,
downloadFile,
} from '../api/index';
import Axios from 'axios';
export default {
export default {
data() {
return {
uploadedfile:
null,
foldername:
'',
curfName:
'',
uploadedfile:
null,
foldername:
'',
curfName:
'',
folders: [],
files: [],
search:
'',
search:
'',
id: '',
dialog:
false,
dialog:
false,
howMenu: false,
showMenu: false,
x: 0,
y: 0,
dialog2:
false,
detail
: {
dialog2:
false,
detail
: {
dataname: null,
date: null,
owner_id:
null,
datasize:
null,
datatype:null
}
}
owner_id:
null,
datasize:
null,
datatype: null,
},
};
},
async created()
{
async created()
{
try {
const curData = {
id
: this.$store.state.id,
cur: '/'
}
id
: this.$store.state.id,
cur: '/',
};
console.log(curData);
const response = await folder(curData);
const file_response = await file(curData);
...
...
@@ -228,50 +215,49 @@ import Axios from 'axios';
this.folders = this.$store.getters.folderL;
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log("에러"
);
console.log('에러'
);
console.log(error);
}
},
methods: {
handleFileUpload()
{
this.uploadedfile= this.$refs.uploadedfile.files[0]
console.log(this.uploadedfile)
handleFileUpload()
{
this.uploadedfile = this.$refs.uploadedfile.files[0];
console.log(this.uploadedfile);
},
initFolderName()
{
initFolderName()
{
this.foldername = '';
},
cancelMove()
{
cancelMove()
{
this.curfName = '';
this.dialog2 = false;
},
async makeF()
{
async makeF()
{
try {
const folderData = {
user_id
: this.$store.state.id,
cur
: this.$store.state.cur,
folder_name : this.foldername
user_id
: this.$store.state.id,
cur
: this.$store.state.cur,
folder_name: this.foldername,
};
const response = await makeFolder(folderData);
console.log(response.data)
console.log("폴더 생성 완료"
);
console.log(response.data);
console.log('폴더 생성 완료'
);
this.$store.commit('setFolder', response.data.folders);
this.folders = respons
.data.folders;
this.folders = response
.data.folders;
} catch (error) {
console.log("에러"
);
console.log('에러'
);
console.log(error.response.data);
} finally
{
} finally
{
this.initFolderName();
this.dialog = false;
}
},
async moveF(move_folder_name)
{
async moveF(move_folder_name)
{
try {
const curData = {
id
: this.$store.state.id,
cur: this.$store.state.cur + move_folder_name + '/'
}
id
: this.$store.state.id,
cur: this.$store.state.cur + move_folder_name + '/',
};
const response = await folder(curData);
console.log(response.data);
this.$store.commit('setFolder', response.data.folders);
...
...
@@ -279,151 +265,148 @@ import Axios from 'axios';
this.$store.commit('setParent', response.data.parentPath);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log("에러"
);
console.log('에러'
);
console.log(error.response.data);
}
},
async moveParent()
{
async moveParent()
{
try {
const cData = {
id
: this.$store.state.id,
cur : this.$store.state.parent
id
: this.$store.state.id,
cur: this.$store.state.parent,
};
const response
= await folder(cData);
const response
= await folder(cData);
console.log(response.data);
this.$store.commit('setFolder', response.data.folders);
this.$store.commit('setCur', response.data.cur);
this.$store.commit('setParent', response.data.parentPath);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log("에러"
);
console.log('에러'
);
console.log(error.response.data);
}
},
async deleteF()
{
async deleteF()
{
try {
const cData = {
id: this.$store.state.id,
cur
: this.$store.state.cur,
folder_name: this.curfName
}
cur
: this.$store.state.cur,
folder_name: this.curfName,
};
const response = await deleteFolder(cData);
console.log(response);
this.$store.commit('setFolder', response.data.folders);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log("에러"
);
console.log('에러'
);
console.log(error.response.data);
} finally
{
} finally
{
this.curfName = '';
}
},
async transferF(folderName)
{
async transferF(folderName)
{
try {
const cData = {
id: this.$store.state.id,
cur
: this.$store.state.cur,
cur
: this.$store.state.cur,
folder_name: this.curfName,
isfolder: true,
newPath: this.$store.state.cur + folderName + '/'
}
newPath: this.$store.state.cur + folderName + '/',
};
const response = await moveFolder(cData);
console.log(response);
this.$store.commit('setFolder', response.data.folders);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log("에러"
);
console.log('에러'
);
console.log(error.response.data);
} finally
{
} finally
{
this.initFolderName();
this.curfName = '';
this.dialog2 = false;
}
},
async upload_file()
{
try
{
async upload_file()
{
try
{
const formData = new FormData();
formData.append('file', this.uploadedfile);
formData.append('user_id', this.$store.state.id);
formData.append('cur', this.$store.state.cur);
const currentData=
{
const currentData =
{
id: this.$store.state.id,
cur: this.$store.state.cur
}
console.log(currentData)
cur: this.$store.state.cur,
};
console.log(currentData);
const response = await uploadFile(formData);
const filelist = await file(currentData);
console.log(filelist.data.files);
this.$store.commit('setFile', filelist.data.files);
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;;
}catch(error){
console.log("에러");
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error);
}
},
async delete_file(itemName)
{
try
{
async delete_file(itemName)
{
try
{
var itemlist = this.$store.getters.fileL;
console.log(itemlist)
console.log(itemName)
const currentData=
{
fileName
: null,
console.log(itemlist);
console.log(itemName);
const currentData =
{
fileName
: null,
user_id: null,
cur: this.$store.state.cur
}
cur: this.$store.state.cur,
};
for(var i=0; i<itemlist.length; i++)
{
console.log(itemlist[i].file_name)
if(itemlist[i].file_name == itemName)
{
for (var i = 0; i < itemlist.length; i++)
{
console.log(itemlist[i].file_name);
if (itemlist[i].file_name == itemName)
{
currentData.fileName = itemlist[i].file_name;
currentData.user_id = itemlist[i].user_id;
}
}
const filelistData=
{
const filelistData =
{
id: currentData.user_id,
cur: currentData.cur
}
console.log(currentData)
cur: currentData.cur,
};
console.log(currentData);
const response = await deleteFile(currentData);
setTimeout(function()
{}, 500);
setTimeout(function()
{}, 500);
const filelist = await file(filelistData);
console.log(filelist.data.files);
this.$store.commit('setFile', filelist.data.files);
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;
;
}catch(error)
{
console.log("에러"
);
this.files = this.$store.getters.fileL
;
} catch (error)
{
console.log('에러'
);
console.log(error);
}
},
async download_file(namedata)
{
try
{
const currentData=
{
fileName
: namedata,
async download_file(namedata)
{
try
{
const currentData =
{
fileName
: namedata,
id: this.$store.state.id,
cur: this.$store.state.cur
}
cur: this.$store.state.cur,
};
const result = await downloadFile(currentData);
console.log(result)
}catch(error){
console.log("에러");
console.log(result);
} catch (error) {
console.log('에러');
console.log(error);
}
}
},
show (folderN, e) {
e.preventDefault()
},
show(folderN, e) {
e.preventDefault();
this.curfName = folderN;
this.showMenu = false
this.x = e.clientX
this.y = e.clientY
this.showMenu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showMenu = true
})
}
}
this.showMenu = true;
});
},
};
</script>
...
...
front-end/src/components/ToolView.vue
View file @
88e27b2
...
...
@@ -7,7 +7,7 @@
v-if="isUserLogin"
>
<v-list dense>
<v-list-item router :to="{name: 'Main'
}" exact>
<v-list-item router :to="{ name: 'Main'
}" exact>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
...
...
@@ -15,7 +15,7 @@
<v-list-item-title>홈</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'File'
}" exact>
<v-list-item router :to="{ name: 'File'
}" exact>
<v-list-item-action>
<v-icon>mdi-file</v-icon>
</v-list-item-action>
...
...
@@ -23,7 +23,7 @@
<v-list-item-title>파일</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Fav'
}" exact>
<v-list-item router :to="{ name: 'Fav'
}" exact>
<v-list-item-action>
<v-icon>mdi-heart</v-icon>
</v-list-item-action>
...
...
@@ -31,7 +31,7 @@
<v-list-item-title>즐겨찾기</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Quick'
}" exact>
<v-list-item router :to="{ name: 'Quick'
}" exact>
<v-list-item-action>
<v-icon>mdi-history</v-icon>
</v-list-item-action>
...
...
@@ -39,7 +39,7 @@
<v-list-item-title>빠른 액세스</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Contact'
}" exact>
<v-list-item router :to="{ name: 'Contact'
}" exact>
<v-list-item-action>
<v-icon>mdi-contacts</v-icon>
</v-list-item-action>
...
...
@@ -47,7 +47,7 @@
<v-list-item-title>연락처</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Main'
}" exact>
<v-list-item router :to="{ name: 'Main'
}" exact>
<v-list-item-action>
<v-icon>mdi-settings</v-icon>
</v-list-item-action>
...
...
@@ -63,7 +63,7 @@
<v-list-item-title>휴지통</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Feedback'
}" exact>
<v-list-item router :to="{ name: 'Feedback'
}" exact>
<v-list-item-action>
<v-icon>mdi-message</v-icon>
</v-list-item-action>
...
...
@@ -71,7 +71,7 @@
<v-list-item-title>피드백</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Main'
}" exact>
<v-list-item router :to="{ name: 'Main'
}" exact>
<v-list-item-action>
<v-icon>mdi-help-circle</v-icon>
</v-list-item-action>
...
...
@@ -82,19 +82,17 @@
</v-list>
</v-navigation-drawer>
<v-app-bar
:clipped-left="$vuetify.breakpoint.lgAndUp"
app
color="blue darken-3"
dark
>
<v-app-bar-nav-icon @click.stop="drawer = !drawer" v-if="isUserLogin"></v-app-bar-nav-icon>
<v-toolbar-title
style="width: 300px"
class="ml-0 pl-4"
>
<v-app-bar-nav-icon
@click.stop="drawer = !drawer"
v-if="isUserLogin"
></v-app-bar-nav-icon>
<v-toolbar-title style="width: 300px" class="ml-0 pl-4">
<span class="hidden-sm-and-down">KhuLoud</span>
</v-toolbar-title>
<template v-if="isUserLogin">
...
...
@@ -112,23 +110,21 @@
</template>
<v-spacer></v-spacer>
<template v-if="isUserLogin">
<v-btn icon @click =
"logoutUser">
<v-btn icon @click=
"logoutUser">
<v-icon>mdi-login</v-icon>
</v-btn>
</template>
<template v-else>
<v-btn icon @click = "$router.push({name: 'Login'
})">
<v-btn icon @click="$router.push({ name: 'Login'
})">
<v-icon>mdi-login</v-icon>
</v-btn>
<v-btn icon @click = "$router.push({name: 'RegistUser'
})">
<v-btn icon @click="$router.push({ name: 'RegistUser'
})">
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
</v-app-bar>
<v-content>
<v-container
>
<v-container>
<router-view></router-view>
</v-container>
</v-content>
...
...
@@ -144,7 +140,7 @@ export default {
{ icon: 'mdi-home', text: '홈' },
{ icon: 'mdi-file', text: '파일' },
{ icon: 'mdi-heart', text: '즐겨찾기' },
{ icon: 'mdi-history', text: '빠른 액세스'
},
{ icon: 'mdi-history', text: '빠른 액세스'
},
{ icon: 'mdi-contacts', text: '연락처' },
{ icon: 'mdi-settings', text: '설정' },
{ icon: 'mdi-message', text: '피드백' },
...
...
@@ -152,19 +148,17 @@ export default {
],
}),
computed: {
isUserLogin()
{
isUserLogin()
{
return this.$store.getters.isLogin;
},
},
methods: {
logoutUser()
{
logoutUser()
{
this.$store.commit('clearid');
this.$router.push('/');
}
}
}
},
},
}
;
</script>
<style>
</style>
\ No newline at end of file
<style></style>
...
...
front-end/src/routes/index.js
View file @
88e27b2
import
Vue
from
'vue'
import
VueRouter
from
'vue-router'
import
Vue
from
'vue'
;
import
VueRouter
from
'vue-router'
;
// import Home from '../views/Home.vue'
// import Login from '../views/Login.vue'
// import Main from '../views/Main.vue'
...
...
@@ -12,65 +12,64 @@ import VueRouter from 'vue-router'
// import RegistUser from '../views/RegistUser'
Vue
.
use
(
VueRouter
);
export
default
new
VueRouter
({
export
default
new
VueRouter
({
mode
:
'history'
,
base
:
process
.
env
.
BASE_URL
,
routes
:
[
routes
:
[
{
path
:
'/'
,
redirect
:
'/Login'
redirect
:
'/Login'
,
},
{
path
:
'/home'
,
name
:
'Home'
,
component
:
()
=>
import
(
'../views/Home.vue'
)
component
:
()
=>
import
(
'../views/Home.vue'
),
},
{
path
:
'/main'
,
name
:
'Main'
,
component
:
()
=>
import
(
'../views/Main.vue'
)
name
:
'Main'
,
component
:
()
=>
import
(
'../views/Main.vue'
),
},
{
path
:
'/contact'
,
name
:
'Contact'
,
component
:
()
=>
import
(
'../views/Contact.vue'
)
name
:
'Contact'
,
component
:
()
=>
import
(
'../views/Contact.vue'
),
},
{
path
:
'/registuser'
,
name
:
'RegistUser'
,
component
:
()
=>
import
(
'../views/SignupPage.vue'
)
component
:
()
=>
import
(
'../views/SignupPage.vue'
),
},
{
path
:
'/login'
,
name
:
'Login'
,
component
:
()
=>
import
(
'../views/LoginPage.vue'
)
component
:
()
=>
import
(
'../views/LoginPage.vue'
),
},
{
path
:
'/file'
,
name
:
'File'
,
component
:
()
=>
import
(
'../views/File.vue'
)
path
:
'/file'
,
name
:
'File'
,
component
:
()
=>
import
(
'../views/File.vue'
),
},
{
path
:
'/fav'
,
name
:
'Fav'
,
component
:
()
=>
import
(
'../views/FavList.vue'
)
path
:
'/fav'
,
name
:
'Fav'
,
component
:
()
=>
import
(
'../views/FavList.vue'
),
},
{
path
:
'/quick'
,
name
:
'Quick'
,
component
:
()
=>
import
(
'../views/QuickList.vue'
)
path
:
'/quick'
,
name
:
'Quick'
,
component
:
()
=>
import
(
'../views/QuickList.vue'
),
},
{
path
:
'/feedback'
,
name
:
'Feedback'
,
component
:
()
=>
import
(
'../views/Feedback.vue'
)
path
:
'/feedback'
,
name
:
'Feedback'
,
component
:
()
=>
import
(
'../views/Feedback.vue'
),
},
{
path
:
'/folder'
,
name
:
'Folder'
,
component
:
()
=>
import
(
'../views/FolderPage.vue'
)
component
:
()
=>
import
(
'../views/FolderPage.vue'
),
},
]
})
],
})
;
...
...
Please
register
or
login
to post a comment