2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
leeseohyeon
e717faad 2 parents 2389274d 5c34dcad

db에 파일 위치 분리

Inline Side-by-side
Showing 21 changed files with 613 additions and 304 deletions
......@@ -11,6 +11,7 @@ var loginRouter = require('./routes/userlogin/login');
var registerRouter = require('./routes/userlogin/register');
var fileRouter = require('./routes/file/router');
//var trashcanRouter = require('./routes/trashcan/router');
var folderRouter = require('./routes/folders');
var passport = require('passport');
......@@ -19,19 +20,19 @@ var config = require('./routes/modules/config');
//port
passport.serializeUser(function(user, done) {
console.log('serialized');
done(null, user);
console.log('serialized');
done(null, user);
});
passport.deserializeUser(function(user, done) {
console.log('deserialized');
done(null, user);
console.log('deserialized');
done(null, user);
});
var app = express();
// view engine setup
app.set('views', [path.join(__dirname, 'views'),path.join(__dirname ,'dist')]);
app.set('views', [path.join(__dirname, 'views'), path.join(__dirname, 'dist')]);
// app.set('view engine', 'ejs');
app.set('view engine', 'pug');
......@@ -42,9 +43,9 @@ app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
secret: 'mykey',
saveUninitialized: true,
resave: true
secret: 'mykey',
saveUninitialized: true,
resave: true
}));
app.use(express.static('public'));
......@@ -53,28 +54,29 @@ app.use(express.static('views'));
app.use(passport.initialize());
app.use(passport.session());
app.use('/', indexRouter);
app.use('/user', userRouter);
app.use('/login', loginRouter);
app.use('/RegistUser', registerRouter);
app.use('/api/', indexRouter);
app.use('/api/user', userRouter);
app.use('/api/login', loginRouter);
app.use('/api/RegistUser', registerRouter);
app.use('/api/folder', folderRouter);
//app.use('/users', usersRouter);
app.use('/file', fileRouter);
//app.use('/trashcan', trashcanRouter);
app.use('/api/file', fileRouter);
//app.use('/api/trashcan', trashcanRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
module.exports = app;
\ No newline at end of file
......
......@@ -127,13 +127,6 @@
"url": "0.10.3",
"uuid": "3.3.2",
"xml2js": "0.4.19"
},
"dependencies": {
"uuid": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
}
}
},
"aws-sign2": {
......@@ -887,6 +880,11 @@
"brace-expansion": "^1.1.7"
}
},
"moment": {
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
},
"morgan": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
......@@ -1124,9 +1122,9 @@
"integrity": "sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA=="
},
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
"integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
},
"qs": {
"version": "6.5.2",
......@@ -1344,6 +1342,13 @@
"requires": {
"psl": "^1.1.28",
"punycode": "^2.1.1"
},
"dependencies": {
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
}
}
},
"tunnel-agent": {
......@@ -1410,6 +1415,13 @@
"integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
"requires": {
"punycode": "^2.1.0"
},
"dependencies": {
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
}
}
},
"url": {
......@@ -1419,13 +1431,6 @@
"requires": {
"punycode": "1.3.2",
"querystring": "0.2.0"
},
"dependencies": {
"punycode": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
"integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
}
}
},
"util-deprecate": {
......@@ -1439,9 +1444,9 @@
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
},
"vary": {
"version": "1.1.2",
......
......@@ -15,6 +15,7 @@
"express-session": "^1.17.1",
"formidable": "^1.2.2",
"http-errors": "~1.6.3",
"moment": "^2.26.0",
"morgan": "~1.9.1",
"mysql": "^2.18.1",
"passport": "^0.4.1",
......
......@@ -8,24 +8,28 @@ var S3 = require('../modules/s3/s3');
// /file/delete/:name
router.get('/:name', function (req, res) {
var file_name = req.params.name;
//var user_id = req.session.user_id;
var user_id = 'shlee';
var sourceFile = file_name;
var sourceFile = req.params.name;
var targetPath = 'trashcan';
var sql1 = 'DELETE FROM files WHERE file_name = (?) AND user_Id = (?)';
var sql2 = 'INSERT INTO trashcan (trash_name, user_Id) VALUES (?, ?)';
var paths = sourceFile.split('/');
var index = sourceFile.length - (paths[paths.length - 1].length + 1);
var file_name = paths[paths.length - 1];
var location = sourceFile.substring(6 + user_id.length, index);
var sql1 = 'DELETE FROM files WHERE file_name = (?) AND location=(?) AND user_Id = (?)';
var sql2 = 'INSERT INTO trashcan (trash_name, location, user_Id) VALUES (?, ?, ?)';
connection.query(sql1, [file_name, user_id], function (err) {
connection.query(sql1, [file_name, location, user_id], function (err) {
if (err) {
console.log('delete db error');
throw err;
}
else {
connection.query(sql2, [file_name, user_id], function (err) {
connection.query(sql2, [file_name, location, user_id], function (err) {
if (err) {
console.log('insert in trashcan db error');
throw err;
......@@ -35,7 +39,7 @@ router.get('/:name', function (req, res) {
S3.moveFile(S3.BUCKET_NAME, user_id, sourceFile, targetPath, function (result) {
if (result) {
console.log("file move to trashcan success");
res.send(result);
res.send("Upload Success");
}
})
}
......
......@@ -7,18 +7,14 @@ var S3 = require('../modules/s3/s3');
router.get('/', function (req, res) {
//var userId = req.session.user_id;
var userId = 'shlee';
var user_id = req.query.user_id;
var sql = 'SELECT * FROM files WHERE user_id = (?) ORDER BY date DESC';
connection.query(sql, [userId], function (err, result) {
if (err){
console.log('bringing fileList failed');
}
else {
console.log('bringing fileList success');
res.send(result);
//res.render('file/files');
connection.query(sql, user_id, function (err, result) {
if (result.length == 0){
res.send({error: 'Exist Nothing'});
}else{
res.status(200).send({files: result});
}
})
});
......@@ -26,8 +22,7 @@ router.get('/', function (req, res) {
// /file/:name
router.get('/:name', function (req, res) {
var file_name = req.params.name;
//var user_id = req.session.user_id;
var user_id = 'shlee';
var user_id = req.query.user_id;
var s3 = new AWS.S3();
......
......@@ -11,8 +11,8 @@ var S3 = require('../modules/s3/s3');
// /file/upload
router.post('/', function (req, res) {
//var userId = req.user.userId;
var userId = 'shlee';
//var user_id = req.body.user_id;
var user_id = 'shlee';
var sourceFiles = [];
var errFiles = [];
......@@ -33,7 +33,7 @@ router.post('/', function (req, res) {
}
}
S3.uploadFiles(0, errFiles, S3.BUCKET_NAME, userId, sourceFiles, targetPath, bodies, function (result, errFiles) {
S3.uploadFiles(0, errFiles, S3.BUCKET_NAME, user_id, sourceFiles, targetPath, bodies, function (result, errFiles) {
var newSourceFiles = [];
if (!result) { // 에러 파일이 있는 경우
for (var sourceFile of sourceFiles) {
......@@ -43,14 +43,14 @@ router.post('/', function (req, res) {
}
}
for (var sourceFile of sourceFiles) {
var sql = 'INSERT INTO files (file_name, user_id) VALUES (?, ?)';
connection.query(sql, [sourceFile, userId], function (err, result) {
var sql = 'INSERT INTO files (file_name, user_id, location) VALUES (?, ?, ?)';
connection.query(sql, [file_name, user_id, targetPath], function (err, result) {
if (err) {
console.log('insert file {', sourceFile, '} in db failed');
}
})
}
res.end("Errfiles: ", errFiles);
res.send({Errfiles: errFiles});
})
})
})
......
const express = require('express');
const router = express.Router();
const AWS = require("aws-sdk");
const moment = require("moment");
const BUCKET_NAME = "hong-s3-cloud";
let curPath = "";
let user_id = "";
const s3 = new AWS.S3({
accessKeyId: process.env.AWS_ACCESS_KEY_ID,
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
region: "ap-northeast-2"
});
router.get('/show', function(req, res, next) {
console.log(req.query);
user_id = req.query.id;
curPath = req.query.cur;
folders = {}
let checkfolder = 'SELECT * FROM folders WHERE location = ? AND user_id = ?;';
connection.query(checkfolder, [curPath, user_id], function(err, rows, fields) {
if (rows.length != 0) {
res.status(200).send({
folders: rows,
cur: curPath
})
} else {
res.send({ error: "Does not exist" });
}
});
});
router.post('/makefolder', function(req, res, next) {
user_id = req.body.user_id;
let cur = req.body.cur;
curPath = user_id + cur;
let folder_name = req.body.folder_name;
let date = moment().format();
let params = {
Bucket: BUCKET_NAME,
Key: curPath + folder_name + '/',
Body: "",
ACL: "public-read-write"
};
let checksql = 'SELECT * FROM folders WHERE location = ? AND folder_name = ?;';
console.log(req.body)
connection.query(checksql, [cur, folder_name], function(err, rows, fields) {
if (rows.length == 0) {
s3.putObject(params, function(err, data) {
if (err) {
console.log('s3 error');
throw err;
} else {
console.log(data);
}
});
let sql = 'INSERT INTO folders (folder_name,location,user_id,created) values (?,?,?,?);';
let values = [folder_name, cur, user_id, date];
connection.query(sql, values, function(err, result, field) {
if (err) {
console.log('insert error');
throw err;
} else {
folders = {}
let checkfolder = 'SELECT * FROM folders WHERE location = ? AND user_id = ?;';
connection.query(checkfolder, [cur, user_id], function(err, rows, fields) {
if (rows.length != 0) {
res.status(200).send({
folders: rows,
cur: curPath
})
} else {
res.send({ error: "Does not exist" });
}
});
}
});
} else {
res.status(404).send({ error: "same name error" });
}
});
});
router.post('/delfolder', function(req, res, next) {
user_id = req.body.user_id;
curPath = user_id + req.body.cur;
let folder_name = req.body.folder_name;
let params = {
Bucket: BUCKET_NAME + curPath,
Key: folder_name + '/'
};
let checksql = 'SELECT * FROM folders WHERE location = ? AND folder_name = ?;';
let values = [curPath, folder_name];
connection.query(checksql, values, function(err, rows, fields) {
if (rows.length != 0) {
s3.deleteObject(params, function(err, data) {
if (err) {
//throw err;
} else {
let sql = 'DELETE FROM folders WHERE location = ? AND folder_name = ?;';
connection.query(sql, values, function(err, result, field) {
if (err) {
//throw err;
} else {
folders = {}
let checkfolder = 'SELECT * FROM folders WHERE location = ? AND user_id = ?;';
connection.query(checkfolder, [cur, user_id], function(err, rows, fields) {
if (rows.length != 0) {
res.status(200).send({
folders: rows,
cur: curPath
})
} else {
res.send({ error: "Does not exist" });
}
});
}
});
}
});
} else {
res.send({ error: "Does not exist" });
}
});
});
router.post('/move', function(req, res, next) {
user_id = req.body.user_id;
curPath = user_id + req.body.cur;
let name = req.body.mfile;
let newPath = req.body.newPath;
let checkfolder = 'SELECT * FROM folders WHERE location = ? AND folder_name = ?;';
if (req.body.isfolder) {
connection.query(checkfolder, [curPath, name], function(err1, rows, fields) {
if (rows.length != 0) {
let copy_params = {
Bucket: BUCKET_NAME + curPath,
CopySource: BUCKET_NAME + curPath + file + '/',
Key: newPath + file + '/'
};
let del_params = {
Bucket: BUCKET_NAME + curPath,
Key: file + '/'
};
s3.copyObject(copy_params, function(err, data) {
console.log(err, data);
});
s3.deleteObject(del_params, function(err, data) {
console.log(err, data);
});
let values = [newPath, curPath, name];
let updatesql = 'UPDATE folders SET location = ? WHERE location = ? AND folder_name = ?;';
connection.query(updatesql, values, function(err3, result, field) {
if (err3) {
throw err;
} else {
folders = {}
connection.query(checkfolder, [cur, user_id], function(err, rows, fields) {
if (rows.length != 0) {
res.status(200).send({
folders: rows,
cur: curPath
})
} else {
res.send({ error: "Does not exist" });
}
});
}
});
} else {
res.send({ error: "Does not exist" });
}
});
} else {
let checkfile = 'SELECT * FROM files WHERE location = ? AND file_name = ?';
connection.query(checkfile, [curPath, name], function(err1, rows, fields) {
if (rows.length != 0) {
let copy_params = {
Bucket: BUCKET_NAME + curPath,
CopySource: BUCKET_NAME + curPath + file,
Key: newPath + file
};
let del_params = {
Bucket: BUCKET_NAME + curPath,
Key: file
};
s3.copyObject(copy_params, function(err, data) {
console.log(err, data);
});
s3.deleteObject(del_params, function(err, data) {
console.log(err, data);
});
let values = [newPath, curPath, name];
let updatesql = 'UPDATE files SET location = ? WHERE location = ? AND file_name = ?;';
connection.query(updatesql, values, function(err3, result, field) {
if (err3) {
throw err;
} else {
folders = {}
connection.query(checkfolder, [cur, user_id], function(err, rows, fields) {
if (rows.length != 0) {
res.status(200).send({
folders: rows,
cur: curPath
})
} else {
res.send({ error: "Does not exist" });
}
});
}
});
} else {
res.send({ error: "Does not exist" });
}
});
}
});
router.post('/search/:target', function(req, res, next) {
user_id = req.params.id;
let cur = req.params.cur;
folders = {}
let checkfolder = 'SELECT * FROM folders WHERE location = ? AND user_id = ?;';
connection.query(checkfolder, [cur, user_id], function(err, rows, fields) {
if (rows.length != 0) {
res.status(200).send({
folders: folders
})
} else {
res.send({ error: "Does not exist" });
}
});
});
module.exports = router;
\ No newline at end of file
{
"accessKeyId": "ASIAZQ5XTMMF7TDZAE65",
"secretAccessKey": "6S8IoEaPLaml9KHDb1UrS6mewFm7xEizdUMJZWBe",
"sessionToken": "FwoGZXIvYXdzEHgaDCqtdh2Y9+DetJSd6SLDAbpPE85YYhubMVWMpX8h4BvyzZZxZOaEHjlk4ix1KeVihUFvxgr7QHOWBEDIXeQBxlq7s/1pP/BzWU/rGZ6ykWPl/SEHXw9myP3KjeBiGLauHnF28CSZScLDHyTZPmIEa7e7xt1LQD3FKeifiH5fn2qEGqe+j0fG09SM8LfUz2NSxtEVhaDZGblK0hp3/lB7bPm25qz30FcxGmdKj1k7dKKvvRCvKTyi78eyz+8Y1rYbCzlSEgJcJHaZwWoGVpK7TFYxmCi48Ln2BTIt8hCtBEpDDbGf/9Y+ixIraevKKLXHM4JuJsL52URse2hMcTdnBRdyTVIDAyyK",
"accessKeyId": "ASIAZQ5XTMMFRBJO2LG5",
"secretAccessKey": "ltsYvzKAoQ5UnNWEk13Zf8n4wJdkQkemsJ7GdsbS",
"sessionToken": "FwoGZXIvYXdzEI///////////wEaDLleFCvWDhdhFpXCvCLDAX/Hka6vXTZKxdyEBUh7ZSxPYLH184u1Tpo2qWHYFziUVKWJSCm5wqPNv0QWoAp8sL5NB0W5kty8hoeKv16SYB9Z+yzT1qtfuKTmrro2jGSo7AnxDSBla6UQHAv82yVetiGwu+IKhm6tHUvdNSlkIV0Qi9rNrDc9eynhFN/emFI/6NsocbQ47mmW6BZx0Z4/hHKW9TL6Uec/E87Z+oxVRFsVOGyNtow980bQgZFYJMbh3AN6poTlofP1q/qn2nUWwAdsDCjfhr/2BTItlcDfO5PEH5Gwffzv69JMTVBIemfIpS/Ybx6F6i7GbI2fZKGtGfRSecobbj4m",
"region": "us-east-1"
}
\ No newline at end of file
......
......@@ -20,7 +20,7 @@ router.post('/', function(req, res, next) {
if(bytes===user_pw) {
console.log("user login successfully");
req.session.user_id=result[0].user_id;
res.redirect('/main');
res.status(200).send({ user_id: result[0].user_id });
}else{
console.log("wrong password!");
}
......
......@@ -21,7 +21,7 @@ router.post('/', function(req, res, next) {
var user_phone=req.body.user_phone;
var sqlquery = "SELECT * FROM users WHERE user_id = ?";
connection.query(sqlquery, [user_id], function (err, result) {
connection.query(sqlquery, [user_id], function (err, rows) {
if (rows.length == 0) {
user_pw=cryptoM.encrypt(user_pw);
console.log(user_pw);
......@@ -32,13 +32,12 @@ router.post('/', function(req, res, next) {
console.log("inserting user failed");
throw err;
} else {
res.redirect('/login');
res.status(200).send('saved');
}
});
} else {
res.redirect("/login");
throw err;
res.status(404).send(err);
}
});
});
......
......@@ -8,6 +8,7 @@
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<noscript>
......
......@@ -5,11 +5,42 @@ const instance = axios.create({
});
function registerUser(userData) {
return instance.post('RegistUser', userData);
}
function loginUser(userData) {
return instance.post('login', 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);
}
function folder(curData) {
return axios.get('/api/folder/show', {
params: {
id: curData.id,
cur: curData.cur
}
});
}
function makeFolder(folderData) {
return axios.post('/api/folder/makefolder', folderData);
}
function file(userData){
return axios.get('/api/file', userData, {
params: {
user_id: userData.user_id
}
})
}
export { registerUser, loginUser, folder, makeFolder, file};
export { registerUser, loginUser };
\ No newline at end of file
function dropbox(userData){
return axios.get(`/api/folder/show/${userData}`);
}
// export { registerUser, loginUser, dropbox, makeFolder };
......
......@@ -12,51 +12,37 @@
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-subheader inset>Folders</v-subheader>
<v-list-item
v-for="item in items"
v-for="item in this.$store.getters.folderL"
:key="item.title"
@click=""
@click="$router.push({name: 'Folder'})"
>
<v-list-item-avatar>
<v-icon
>{{item.iconClass}}</v-icon>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
<v-list-item-title v-text="item.folder_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-divider inset></v-divider>
<v-subheader inset>Files</v-subheader>
<v-list-item
v-for="item in items2"
v-for="item in this.$store.getters.fileL"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
<v-icon> mdi-file</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
<v-list-item-title v-text="item"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
......@@ -85,7 +71,6 @@
>
{{ text }}
</v-chip>
<span
v-else-if="index === 2"
class="overline grey--text text--darken-3 mx-2"
......@@ -94,21 +79,99 @@
</span>
</template>
</v-file-input>
<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="800px"
>
<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 } from '../api/index';
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
data() {
return {
foldername:'',
folders: [],
files: [],
search:'',
id: '',
dialog:false
}
},
async created(){
try {
const curData = {
id : this.$store.state.id,
cur: this.$store.state.cur
}
const response = await dropbox(userData);
this.$store.commit('setFolder', response.data.folders);
this.$store.commit('setFile', response.data.files);
} catch (error) {
console.log("에러");
console.log(error.response.data);
}
},
methods: {
initFolderName(){
this.foldername = '';
},
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);
} catch (error) {
console.log("에러");
console.log(error.response.data);
} finally{
this.initFolderName();
this.dialog = false;
}
}
}
}
</script>
......
<template>
<div>
<v-list>
<v-icon>mdi-folder</v-icon>
<v-header>Folders</v-header>
<v-list-item
v-for="item in items"
:key="item.files">
</v-list-item>
</v-list>
</div>
</template>
<script>
export default {
props:{
}
}
</script>
<style>
</style>
\ No newline at end of file
......@@ -22,23 +22,10 @@
>
<v-toolbar-title>KhuLoud</v-toolbar-title>
<v-spacer></v-spacer>
<!-- <v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip> -->
</v-toolbar>
<v-card-text>
<v-form @submit.prevent="submitForm">
<v-form >
<v-text-field
label="ID"
name="ID"
......@@ -57,8 +44,7 @@
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-btn color="primary" @click = "$router.push({name: 'RegistUser'})">Regist</v-btn> -->
<v-btn color="primary" :disabled="!id || !password" router :to="{name: 'Main'}" exact>Login</v-btn>
<v-btn color="primary" :disabled="!id || !password" @click="submitForm">Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
......@@ -69,7 +55,7 @@
</template>
<script>
import { loginUser } from '../api/index'
export default {
data() {
......@@ -81,24 +67,27 @@
methods: {
async submitForm(){
try {
const usderData = {
id: this.id,
password: this.password
const userData = {
user_id: this.id,
user_pw: this.password
};
const { data } = await loginUser(userData);
this.$store.commit('setid', data.user.userid);
console.log(data);
this.$store.commit('setId', data.user_id);
this.$router.push('/main');
} catch (error) {
console.log("에러");
console.log(error.response.data);
} finally {
this.initForm();
}
}
},
initForm(){
},
initForm(){
this.id ='';
this.password='';
}
}
},
}
</script>
......
......@@ -24,7 +24,7 @@
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form @submit.prevent="submitForm">
<v-form>
<v-text-field
label="ID"
v-model="id"
......@@ -49,7 +49,6 @@
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
name="Email"
></v-text-field>
......@@ -62,7 +61,7 @@
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" :disabled="!id || !password || !name || !email || !contact" @click = "$router.push({name: 'Login'})">Regist</v-btn>
<v-btn color="primary" :disabled="!id || !password || !name || !email || !contact" @click="submitForm">Regist</v-btn>
</v-card-actions>
</v-card>
</v-col>
......@@ -73,6 +72,8 @@
</template>
<script>
import { registerUser } from '../api/index'
export default {
data() {
return {
......@@ -86,17 +87,19 @@
methods: {
async submitForm() {
try {
const usderData = {
id: this.id,
password: this.password,
name: this.name,
email: this.email,
contact: this.contact
const userData = {
user_id: this.id,
user_pw: this.password,
user_name: this.name,
user_email: this.email,
user_phone: this.contact
};
const { data } = await registerUser(userData);
console.log("회원가입 완료");
this.$router.push('/');
} catch (error) {
console.log("에러");
console.log(error.response.data);
} finally{
this.initForm();
......
......@@ -4,6 +4,7 @@
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
app
v-if="isUserLogin"
>
<v-list dense>
<v-list-item router :to="{name: 'Main'}" exact>
......@@ -88,10 +89,8 @@
color="blue darken-3"
dark
>
<!-- <template v-if="isUserLogin">
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</template> -->
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<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"
......@@ -111,32 +110,20 @@
<template v-else>
<div></div>
</template>
<!-- <v-text-field
v-if="isUserLogin"
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="전체 검색"
class="hidden-sm-and-down"
></v-text-field> -->
<v-spacer></v-spacer>
<template v-if="isUserLogin">
<v-btn icon @click = "logoutUser">
<v-icon>mid-login</v-icon>
<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-btn icon @click = "$router.push({name: 'RegistUser'})">
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
<!-- <v-btn icon @click = "$router.push({name: 'Login'})">
<v-icon>mdi-login</v-icon>
</v-btn> -->
</v-app-bar>
<v-content>
<v-container
......@@ -145,112 +132,6 @@
<router-view></router-view>
</v-container>
</v-content>
<template v-if="isUserLogin">
<v-btn
bottom
color="pink"
dark
fab
fixed
right
@click="dialog = !dialog"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</template>
<!-- <v-btn
bottom
color="pink"
dark
fab
fixed
right
@click="dialog = !dialog"
>
<v-icon>mdi-plus</v-icon>
</v-btn> -->
<v-dialog
v-model="dialog"
width="800px"
>
<v-card>
<v-card-title class="grey darken-2">
Create contact
</v-card-title>
<v-container>
<v-row class="mx-2">
<v-col
class="align-center justify-space-between"
cols="12"
>
<v-row
align="center"
class="mr-0"
>
<v-avatar
size="40px"
class="mx-3"
>
<img
src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
alt=""
>
</v-avatar>
<v-text-field
placeholder="Name"
></v-text-field>
</v-row>
</v-col>
<v-col cols="6">
<v-text-field
prepend-icon="mdi-account-card-details-outline"
placeholder="Company"
></v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
placeholder="Job title"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
prepend-icon="mdi-mail"
placeholder="Email"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
type="tel"
prepend-icon="mdi-phone"
placeholder="(000) 000 - 0000"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
prepend-icon="mdi-text"
placeholder="Notes"
></v-text-field>
</v-col>
</v-row>
</v-container>
<v-card-actions>
<v-btn
text
color="primary"
>More</v-btn>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="dialog = false"
>Cancel</v-btn>
<v-btn
text
@click="dialog = false"
>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</template>
......@@ -272,7 +153,7 @@ export default {
}),
computed: {
isUserLogin(){
return this.$store.getters.isUserLogin;
return this.$store.getters.isLogin;
},
},
methods: {
......
......@@ -66,7 +66,11 @@ export default new VueRouter ({
path:'/feedback',
name:'Feedback',
component: () => import('../views/Feedback.vue')
}
},
{
path: '/folder',
name: 'Folder',
component: () => import('../views/FolderPage.vue')
},
]
})
......
......@@ -4,20 +4,50 @@ import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
id: '',
},
mutations: {
setId(state, userid){
state.id = id;
state: {
id: '',
folders: {},
files: {},
cur: '/',
},
mutations: {
setId(state, userid) {
state.id = userid;
},
clearid(state) {
state.id = '';
},
setFolder(state, folderlist) {
state.folders = folderlist;
},
setFile(state, filelist) {
state.files = filelist;
},
setCur(state, cur) {
state.cur = cur;
}
},
clearid(state){
state.id= '';
}
getters: {
isLogin(state) {
return state.id !== '';
},
userID(state) {
return state.id;
},
folderL(state) {
return state.folders;
},
fileL(state) {
return state.files;
},
cur(state) {
return state.cur;
},
setFolder(state, folderlist){
state.folders = folderlist;
},
setFile(state, filelist){
state.files = filelist;
},
},
getters: {
isLogin(state){
return state.id !== '';
}
}
})
})
\ No newline at end of file
......
<template>
<div>
<FolderList></FolderList>
</div>
</template>
<script>
import FolderList from '../components/FolderList'
export default {
components: {
FolderList,
}
}
</script>
<style>
</style>
\ No newline at end of file
......@@ -2,16 +2,16 @@ module.exports = {
"transpileDependencies": [
"vuetify"
],
// devServer: {
// proxy: {
// '/api': {
// target: 'http://localhost:3000/api',
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
// }
// }
// },
// outputDir: '../backend/public',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
outputDir: '../backend/public',
}
......