2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
88e27b27 1 parent cf94c6a3

코드 정리

Inline Side-by-side
Showing 8 changed files with 735 additions and 687 deletions
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,
},
},
],
};
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
presets: ['@vue/cli-plugin-babel/preset'],
};
......
......@@ -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/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
"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+kdslhJtVlEZeAqH5qOTw==",
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/espree/-/espree-7.1.0.tgz",
"integrity": "sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==",
"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": {
......
......@@ -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",
......
import axios from 'axios'
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL,
baseURL: process.env.VUE_APP_API_URL,
});
function registerUser(userData) {
// const url = 'http://localhost:3000/api/signup'
return axios.post('/api/RegistUser', userData);
// const url = 'http://localhost:3000/api/signup'
return axios.post('/api/RegistUser', userData);
}
function loginUser(userData) {
// const url = 'http://localhost:3000/api/login'
return axios.post('/api/login', userData);
// const url = 'http://localhost:3000/api/login'
return axios.post('/api/login', userData);
}
function folder(curData) {
return axios.get('/api/folder/show', {
params: {
id: curData.id,
cur: curData.cur
}
});
return axios.get('/api/folder/show', {
params: {
id: curData.id,
cur: curData.cur,
},
});
}
function makeFolder(folderData) {
return axios.post('/api/folder/makefolder', folderData);
return axios.post('/api/folder/makefolder', folderData);
}
function deleteFolder(folderData) {
return axios.post('/api/folder/delfolder', folderData);
return axios.post('/api/folder/delfolder', folderData);
}
function moveFolder(folderData) {
return axios.post('/api/folder/move', folderData);
return axios.post('/api/folder/move', folderData);
}
function file(curData){
return axios.get('/api/file', {
params: {
id: curData.id,
cur: curData.cur
}
});
function file(curData) {
return axios.get('/api/file', {
params: {
id: curData.id,
cur: curData.cur,
},
});
}
function uploadFile(fileData){
return axios.post('/api/file/upload', fileData, {
headers :{
'Content-Type' : 'multipart/form-data'
}
});
function uploadFile(fileData) {
return axios.post('/api/file/upload', fileData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
}
function detailFile(fileData){
return axios.get(`/api/file/${fileData.name}`, {
params:{
id: fileData.id,
cur: fileData.cur
}
})
function detailFile(fileData) {
return axios.get(`/api/file/${fileData.name}`, {
params: {
id: fileData.id,
cur: fileData.cur,
},
});
}
function deleteFile(fileData){
return axios.get(`/api/file/delete/${fileData.fileName}`, {
params:{
//현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다.
id: fileData.user_id,
cur: fileData.cur
}
});
function deleteFile(fileData) {
return axios.get(`/api/file/delete/${fileData.fileName}`, {
params: {
//현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다.
id: fileData.user_id,
cur: fileData.cur,
},
});
}
function downloadFile(fileData){
return axios.get(`api/file/download/${fileData.fileName}`, {
params:{
//현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다.
id: fileData.id,
cur: fileData.cur
}
});
function downloadFile(fileData) {
return axios.get(`api/file/download/${fileData.fileName}`, {
params: {
//현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다.
id: fileData.id,
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,
};
......
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>파일
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="파일 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-subheader inset>Folders</v-subheader>
<v-btn @click="moveParent">...</v-btn>
<v-list-item
v-for="item in this.$store.getters.folderL"
:key="item.title"
:search="search"
@click.right="show(item.folder_name,$event)"
@click.left="moveF(item.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="item.folder_name"></v-list-item-title>
</v-list-item-content>
<div>
<v-toolbar flat>
<v-toolbar-title>파일 </v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="파일 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-subheader inset>Folders</v-subheader>
<v-btn @click="moveParent">...</v-btn>
<v-list-item
v-for="item in this.$store.getters.folderL"
:key="item.title"
:search="search"
@click.right="show(item.folder_name, $event)"
@click.left="moveF(item.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="item.folder_name"></v-list-item-title>
</v-list-item-content>
<v-menu
v-model="showMenu"
:position-x="x"
:position-y="y"
absolute
offset-y
>
<v-list dense>
<v-list-item @click.prevent="dialog2 = !dialog2">
<v-list-item-title>이동</v-list-item-title>
</v-list-item>
<v-list-item @click.prevent="deleteF">
<v-list-item-title>삭제</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-list-item>
<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"
>
<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-content>
</v-hover>
</template>
<!-- <template v-else></template> -->
</v-list-item-group>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<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-avatar>
<v-icon> mdi-file</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.file_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="download_file(item.file_name)">
<v-icon color="grey lighten-1">mdi-download</v-icon>
</v-btn>
<v-btn icon @click="delete_file(item.file_name)">
<v-icon color="grey lighten-1">mdi-delete</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<input id = "file-selector" ref='uploadedfile' type="file"
v-on:change="handleFileUpload()">
<br>
<!--
<v-menu
v-model="showMenu"
:position-x="x"
:position-y="y"
absolute
offset-y
>
<v-list dense>
<v-list-item @click.prevent="dialog2 = !dialog2">
<v-list-item-title>이동</v-list-item-title>
</v-list-item>
<v-list-item @click.prevent="deleteF">
<v-list-item-title>삭제</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-list-item>
<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">
<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-content>
</v-hover>
</template>
<!-- <template v-else></template> -->
</v-list-item-group>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<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-avatar>
<v-icon> mdi-file</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.file_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="download_file(item.file_name)">
<v-icon color="grey lighten-1">mdi-download</v-icon>
</v-btn>
<v-btn icon @click="delete_file(item.file_name)">
<v-icon color="grey lighten-1">mdi-delete</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
<br />
<!--
<v-file-input
v-model="files"
color="deep-purple accent-4"
......@@ -141,289 +131,282 @@
</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-icon>mdi-plus</v-icon>
</v-btn>
<v-dialog
v-model="dialog"
width="500px"
>
<v-card>
<v-card-title class="grey darken-2">
Create Folder
</v-card-title>
<v-container>
<div>
<v-icon>mdi-folder</v-icon>
<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-card-actions>
</v-card>
</v-dialog>
</div>
<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-card>
<v-card-title class="grey darken-2">
Create Folder
</v-card-title>
<v-container>
<div>
<v-icon>mdi-folder</v-icon>
<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-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 {
data() {
return {
uploadedfile:null,
foldername:'',
curfName:'',
folders: [],
files: [],
search:'',
id: '',
dialog:false,
howMenu: false,
showMenu: false,
x: 0,
y: 0,
dialog2:false,
detail : {
dataname: null,
date: null,
owner_id:null,
datasize:null,
datatype:null
}
}
},
async created(){
try {
const curData = {
id : this.$store.state.id,
cur: '/'
}
console.log(curData);
const response = await folder(curData);
const file_response = await file(curData);
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;
this.$store.commit('setFile', file_response.data.files);
this.folders = this.$store.getters.folderL;
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log("에러");
console.log(error);
}
},
methods: {
handleFileUpload(){
this.uploadedfile= this.$refs.uploadedfile.files[0]
console.log(this.uploadedfile)
},
initFolderName(){
this.foldername = '';
},
cancelMove(){
this.curfName = '';
this.dialog2 = false;
},
async makeF(){
try {
const folderData = {
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("폴더 생성 완료");
this.$store.commit('setFolder', response.data.folders);
this.folders = respons.data.folders;
} catch (error) {
console.log("에러");
console.log(error.response.data);
} finally{
this.initFolderName();
this.dialog = false;
}
},
async moveF(move_folder_name){
try {
const curData = {
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);
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(error.response.data);
}
},
async moveParent(){
try {
const cData = {
id : this.$store.state.id,
cur : this.$store.state.parent
};
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(error.response.data);
}
},
async deleteF(){
try {
const cData = {
id: this.$store.state.id,
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(error.response.data);
} finally{
this.curfName = '';
}
},
async transferF(folderName){
try {
const cData = {
id: this.$store.state.id,
cur : this.$store.state.cur,
folder_name: this.curfName,
isfolder: true,
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(error.response.data);
} finally{
this.initFolderName();
this.curfName = '';
this.dialog2 = false;
}
},
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={
id: this.$store.state.id,
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("에러");
console.log(error);
}
},
async delete_file(itemName){
try{
var itemlist = this.$store.getters.fileL;
console.log(itemlist)
console.log(itemName)
const currentData={
fileName : null,
user_id: null,
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){
currentData.fileName = itemlist[i].file_name;
currentData.user_id = itemlist[i].user_id;
}
}
const filelistData={
id: currentData.user_id,
cur: currentData.cur
}
console.log(currentData)
const response = await deleteFile(currentData);
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("에러");
console.log(error);
}
},
async download_file(namedata){
try{
const currentData={
fileName : namedata,
id: this.$store.state.id,
cur: this.$store.state.cur
}
const result = await downloadFile(currentData);
console.log(result)
}catch(error){
console.log("에러");
console.log(error);
}
}
},
show (folderN, e) {
e.preventDefault()
this.curfName = folderN;
this.showMenu = false
this.x = e.clientX
this.y = e.clientY
this.$nextTick(() => {
this.showMenu = true
})
}
export default {
data() {
return {
uploadedfile: null,
foldername: '',
curfName: '',
folders: [],
files: [],
search: '',
id: '',
dialog: false,
howMenu: false,
showMenu: false,
x: 0,
y: 0,
dialog2: false,
detail: {
dataname: null,
date: null,
owner_id: null,
datasize: null,
datatype: null,
},
};
},
async created() {
try {
const curData = {
id: this.$store.state.id,
cur: '/',
};
console.log(curData);
const response = await folder(curData);
const file_response = await file(curData);
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;
this.$store.commit('setFile', file_response.data.files);
this.folders = this.$store.getters.folderL;
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error);
}
},
methods: {
handleFileUpload() {
this.uploadedfile = this.$refs.uploadedfile.files[0];
console.log(this.uploadedfile);
},
initFolderName() {
this.foldername = '';
},
cancelMove() {
this.curfName = '';
this.dialog2 = false;
},
async makeF() {
try {
const folderData = {
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('폴더 생성 완료');
this.$store.commit('setFolder', response.data.folders);
this.folders = response.data.folders;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.initFolderName();
this.dialog = false;
}
},
async moveF(move_folder_name) {
try {
const curData = {
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);
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(error.response.data);
}
},
async moveParent() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.parent,
};
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(error.response.data);
}
},
async deleteF() {
try {
const cData = {
id: this.$store.state.id,
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(error.response.data);
} finally {
this.curfName = '';
}
},
async transferF(folderName) {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
folder_name: this.curfName,
isfolder: true,
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(error.response.data);
} finally {
this.initFolderName();
this.curfName = '';
this.dialog2 = false;
}
},
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 = {
id: this.$store.state.id,
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('에러');
console.log(error);
}
},
async delete_file(itemName) {
try {
var itemlist = this.$store.getters.fileL;
console.log(itemlist);
console.log(itemName);
const currentData = {
fileName: null,
user_id: null,
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) {
currentData.fileName = itemlist[i].file_name;
currentData.user_id = itemlist[i].user_id;
}
}
const filelistData = {
id: currentData.user_id,
cur: currentData.cur,
};
console.log(currentData);
const response = await deleteFile(currentData);
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('에러');
console.log(error);
}
},
async download_file(namedata) {
try {
const currentData = {
fileName: namedata,
id: this.$store.state.id,
cur: this.$store.state.cur,
};
const result = await downloadFile(currentData);
console.log(result);
} catch (error) {
console.log('에러');
console.log(error);
}
},
},
show(folderN, e) {
e.preventDefault();
this.curfName = folderN;
this.showMenu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showMenu = true;
});
},
};
</script>
......
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
app
v-if="isUserLogin"
>
<v-list dense>
<v-list-item router :to="{name: 'Main'}" exact>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-file</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-heart</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-history</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-contacts</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-settings</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>설정</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-icon>mdi-delete</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-message</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-help-circle</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>도움말</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
app
v-if="isUserLogin"
>
<v-list dense>
<v-list-item router :to="{ name: 'Main' }" exact>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-file</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-heart</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-history</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-contacts</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-settings</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>설정</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-icon>mdi-delete</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-message</v-icon>
</v-list-item-action>
<v-list-item-content>
<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-action>
<v-icon>mdi-help-circle</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>도움말</v-list-item-title>
</v-list-item-content>
</v-list-item>
</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"
>
<span class="hidden-sm-and-down">KhuLoud</span>
</v-toolbar-title>
<template v-if="isUserLogin">
<v-text-field
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="전체 검색"
class="hidden-sm-and-down"
></v-text-field>
</template>
<template v-else>
<div></div>
</template>
<v-spacer></v-spacer>
<template v-if="isUserLogin">
<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-icon>mdi-login</v-icon>
</v-btn>
<v-btn icon @click = "$router.push({name: 'RegistUser'})">
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
</v-app-bar>
<v-content>
<v-container
>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
<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">
<span class="hidden-sm-and-down">KhuLoud</span>
</v-toolbar-title>
<template v-if="isUserLogin">
<v-text-field
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="전체 검색"
class="hidden-sm-and-down"
></v-text-field>
</template>
<template v-else>
<div></div>
</template>
<v-spacer></v-spacer>
<template v-if="isUserLogin">
<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-icon>mdi-login</v-icon>
</v-btn>
<v-btn icon @click="$router.push({ name: 'RegistUser' })">
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
</v-app-bar>
<v-content>
<v-container>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
dialog: false,
drawer: null,
items: [
{ icon: 'mdi-home', text: '홈' },
{ icon: 'mdi-file', text: '파일' },
{ icon: 'mdi-heart', text: '즐겨찾기' },
{ icon: 'mdi-history', text: '빠른 액세스'},
{ icon: 'mdi-contacts', text: '연락처' },
{ icon: 'mdi-settings', text: '설정' },
{ icon: 'mdi-message', text: '피드백' },
{ icon: 'mdi-help-circle', text: '도움말' },
],
}),
computed: {
isUserLogin(){
return this.$store.getters.isLogin;
},
},
methods: {
logoutUser(){
this.$store.commit('clearid');
this.$router.push('/');
}
}
}
data: () => ({
dialog: false,
drawer: null,
items: [
{ icon: 'mdi-home', text: '홈' },
{ icon: 'mdi-file', text: '파일' },
{ icon: 'mdi-heart', text: '즐겨찾기' },
{ icon: 'mdi-history', text: '빠른 액세스' },
{ icon: 'mdi-contacts', text: '연락처' },
{ icon: 'mdi-settings', text: '설정' },
{ icon: 'mdi-message', text: '피드백' },
{ icon: 'mdi-help-circle', text: '도움말' },
],
}),
computed: {
isUserLogin() {
return this.$store.getters.isLogin;
},
},
methods: {
logoutUser() {
this.$store.commit('clearid');
this.$router.push('/');
},
},
};
</script>
<style>
</style>
\ No newline at end of file
<style></style>
......
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({
mode: 'history',
export default new VueRouter ({
mode: 'history',
base: process.env.BASE_URL,
routes : [
{
path: '/',
redirect: '/Login'
},
{
path: '/home',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/main',
name:'Main',
component: () => import('../views/Main.vue')
},
{
path: '/contact',
name:'Contact',
component: () => import('../views/Contact.vue')
},
{
path: '/registuser',
name: 'RegistUser',
component: () => import('../views/SignupPage.vue')
},
{
path: '/login',
name: 'Login',
component: () => import('../views/LoginPage.vue')
},
{
path:'/file',
name:'File',
component: () => import('../views/File.vue')
},
{
path:'/fav',
name:'Fav',
component: () => import('../views/FavList.vue')
},
{
path:'/quick',
name:'Quick',
component : () => import('../views/QuickList.vue')
},
{
path:'/feedback',
name:'Feedback',
component: () => import('../views/Feedback.vue')
},
{
path: '/folder',
name: 'Folder',
component: () => import('../views/FolderPage.vue')
},
]
})
base: process.env.BASE_URL,
routes: [
{
path: '/',
redirect: '/Login',
},
{
path: '/home',
name: 'Home',
component: () => import('../views/Home.vue'),
},
{
path: '/main',
name: 'Main',
component: () => import('../views/Main.vue'),
},
{
path: '/contact',
name: 'Contact',
component: () => import('../views/Contact.vue'),
},
{
path: '/registuser',
name: 'RegistUser',
component: () => import('../views/SignupPage.vue'),
},
{
path: '/login',
name: 'Login',
component: () => import('../views/LoginPage.vue'),
},
{
path: '/file',
name: 'File',
component: () => import('../views/File.vue'),
},
{
path: '/fav',
name: 'Fav',
component: () => import('../views/FavList.vue'),
},
{
path: '/quick',
name: 'Quick',
component: () => import('../views/QuickList.vue'),
},
{
path: '/feedback',
name: 'Feedback',
component: () => import('../views/Feedback.vue'),
},
{
path: '/folder',
name: 'Folder',
component: () => import('../views/FolderPage.vue'),
},
],
});
......