조인천 / Youtube_MPL

Go to a project
Toggle navigation Toggle navigation pinning
조인천
d98526ea 1 parent 50c377ec

api하이퍼링크

Inline Side-by-side
Showing 12 changed files with 329 additions and 35 deletions
......@@ -7,8 +7,10 @@
var express = require('express')
, routes = require('./routes')
, todo = require('./routes/todo')
, login =require('./routes/login')
, http = require('http')
, path = require('path');
, path = require('path')
, fs = require('fs');
var app = express(); // 어플리케이션 생성
var port = 3000; // 어플리케이션 포트
......@@ -35,7 +37,21 @@ app.configure('development', function(){ // 개발 버전
});
// 라우팅
app.get('/', routes.index);
app.get('/Vlist', routes.index);
app.get('/',function(req,res){
fs.readFile('./views/login.html',function(error,data){
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(data);
})
});
app.get('/signup',function(req,res){
fs.readFile('./views/signup.html',function(error,data){
res.writeHead(200,{'Content-Type':'text/html'});
res.end(data);
})
})
app.get('/LogInForm',login.LogInForm);
app.post('/SignUpForm',login.SignUpForm);
app.get('/list', todo.list);
app.post('/add', todo.add);
app.post('/complete', todo.complete);
......
$(document).ready(function(){
// 로그인 처리
$('#login-submit').click(function(e) {
if ($("#userid").val() == '') {
alert('아이디를 입력하세요');
$("#userid").focus();
return false;
}
if ($("#password").val() == '') {
alert('비밀번호를 입력하세요');
$("#password").focus();
return false;
}
var Info={
'userId': $('#userid').val(),
'password' : $('#password').val()
}
$.ajax('/LogInForm',{
'method': 'GET',
'data': {
'Info' : Info
},
'success': function(list){
list=JSON.parse(list).list;
for (var i=0, len=list.length; i < len; i++){
if (list[i].userId==Info['userId']){
if (list[i].password==Info['password']){
location.href='/Vlist';
}
}
}
}
})
})
$('#makeInfo').click(function(e){
location.href='/signup';
})
});
$(function() {
// 로그인 처리
$('#submit').click(function(e) {
if ($("#fname").val() == '') {
alert('이름을 입력하세요');
$("#fname").focus();
return false;
}
if ($("#email").val()== ''){
alert('아이디를 입력하세요.')
$('#email').focus();
return false;
}
if ($("#ssnein").val()==''){
alert("API키를 입력하세요");
$("#ssnein").focus();
return false;
}
if ($("#passwd").val() == '') {
alert('비밀번호를 입력하세요');
$("#passwd").focus();
return false;
}
if ($("#passwdcheck").val() != $("#passwd").val()){
alert("비밀번호 불일치");
$("#passwdcheck").focus();
return false;
}
$.ajax('/SignUpForm',{
'method': 'Post',
'data': {
'fname': $('#fname').val(),
'userId': $('#email').val(),
'API':$('#ssnein').val(),
'password' : $('#passwd').val(),
},
'success': function(e){
location.href='/login';
}
})
})
});
\ No newline at end of file
......@@ -3,7 +3,6 @@ $(document).ready(function () {
$.ajax('/list', {
'success': function (list) {
var trs = '';
list = JSON.parse(list).list;
for(var i = 0, len = list.length; i < len; i++) { // 테이블 내용 만들기
......@@ -21,12 +20,25 @@ $(document).ready(function () {
};
get_list();
$('.form-inline button').click(function () { // 새로운 할 일 추가하기
var $getVal = $('#new_todo').val();
var $getVal2 = $('#count').val();
if ($getVal==""){
alert("검색어를 입력하세요");
$("#new_todo").focus();
return;
}
if ($getVal2==""){
alert("갯수를 입력하세요");
$("#count").focus();
return;
}
$.ajax('/add', {
'method': 'POST',
'data': {
'contents': $('#new_todo').val()
'contents': $('#new_todo').val(),
'counts' : $('#count').val()
},
'success': get_list
});
......@@ -40,6 +52,7 @@ $(document).ready(function () {
},
'success': get_list
});
alert("다운로드가 완료되었습니다.");
});
$('tbody').on('click', '.btn-danger', function () { // 선택한 할 일 삭제하기
......
......@@ -5,4 +5,4 @@
exports.index = function(req, res){
res.render('index', { title: '나만의 YOUTUBE 리스트' });
};
\ No newline at end of file
};
......
var fs = require('fs');
var request = require('request');
exports.LogInForm=function(req,res){
fs.exists('./user_list.json', function (exists) { // ToDo 목록 존재 확인
if(exists) {
fs.readFile('./user_list.json', {
'encoding': 'utf8'
}, function (err, list) {
console.log(list);
res.json(list);
});
} else {
var list = { // 기본 ToDo 목록 형식
'list': []
};
fs.writeFile('./user_list.json', JSON.stringify(list), function (err) { // todo_list.json 파일 쓰기
res.json(list);
});
}
});
};
exports.SignUpForm=function(req,res){
fs.readFile('./user_list.json',{
'encoding':'utf-8'
},function(err,data){
data=JSON.parse(data);
var Info={
'fname': req.body.fname,
'userId': req.body.userId,
'API':req.body.API,
'password' : req.body.password,
}
data.list.push(Info);
fs.writeFile('./user_list.json',JSON.stringify(data),function(err){
res.json(true);
});
}
)
}
\ No newline at end of file
......@@ -28,20 +28,21 @@ exports.list = function(req, res){ // ToDo 목록 가져오기
exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기
//유튜브 api 이용 검색부분
//유튜브 api 이용 검색부분
console.log(req.body);
var optionParams = {
q:req.body.contents,
part:"snippet",
key:"AIzaSyCgGa6aM7taXs4bajtYukbc_EQAKTLVTNc",
key:"AIzaSyCTR9nHa9PheDMJO9O91Oj8HRJcu81bP_M",
type:"video",
maxResults:5,
maxResults: Number(req.body.counts),
regionCode:"KR",
order:"viewCount"
};
optionParams.q = encodeURI(optionParams.q);
var url="https://www.googleapis.com/youtube/v3/search?";
......@@ -51,38 +52,36 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기
//url의마지막에 붙어있는 & 정리
url=url.substr(0, url.length-1);
var data;
request(url, function(err, res, body){
// console.log(body)
fs.readFile('./todo_list.json', {
'encoding': 'utf8'
}, function (err, data1) {
data1 = JSON.parse(data1);
data1.list=[];
var data=JSON.parse(body).items;
for(var content in data){
//youtube downloader에 videoId 넘기면 됨.
//json형식을 서버로 부터 받음
data2=JSON.parse(body).items;
fs.readFile('./todo_list.json',{
'encoding':'utf8'
},function(err,data){
data= JSON.parse(data);
for (var content in data2){
var todo = { // 기본 ToDo 항목 형식
'contents': '',
'videoId':'',
'complete': false
};
console.log(data[content].snippet.title+" : "+data[content].id.videoId);
todo.contents = data[content].snippet.title;
todo.videoId = data[content].id.videoId;
data1.list.push(todo);
} // 새로운 ToDo 항목 추가
fs.writeFile('./todo_list.json', JSON.stringify(data1), function (err) {
res1.json(true);
});
var a=data2[content].snippet.title;
console.log(a+" : "+data2[content].id.videoId);
todo.contents = a;
todo.videoId = data2[content].id.videoId;
data.list.push(todo);
fs.writeFile('./todo_list.json',JSON.stringify(data),function(err){
res1.json(true);
});
}
});
//json형식을 서버로 부터 받음
});
};
exports.complete = function(req, res){ // 선택한 ToDo 항목 다운로드 하기
exports.complete = function(req, res){ // 선택한 ToDo 항목 완료하기
fs.readFile('./todo_list.json', {
'encoding': 'utf8'
}, function (err, data) {
......@@ -98,11 +97,15 @@ exports.complete = function(req, res){ // 선택한 ToDo 항목 다운로드 하
console.log('filename : '+ info.filename);
console.log('size : '+info.size);
});
video.pipe(fs.createWriteStream(data.list[req.body.index].contents+'.mp4'));
var a= data.list[req.body.index].contents
var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
a=a.replace(regExp,"");
video.pipe(fs.createWriteStream(a+'.mp4'));
console.log(data.list[req.body.index].contents);
fs.writeFile('./todo_list.json', JSON.stringify(data), function (err) {
res.json(true);
});
return;
});
};
......
{"list":[{"contents":"손흥민 잉글랜드무대 첫 해트트릭,,,!!! 평점 10점받은 경기 ● 토트넘 vs 밀월 ● 하이라이트","videoId":"wbv5bUErdX0","complete":false},{"contents":"손흥민에게 해축갤 손흥민 드립 모음을 보여주었닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ l 슛포러브 Shoot for Love","videoId":"UFhdG30qVQc","complete":false},{"contents":"월클 손흥민의 런던 일상 최초 공개합니다!!! 역시 이러니 월클일수밖에... l 슛포러브 Shoot for Love","videoId":"9aSKkd2PAfw","complete":false},{"contents":"KNUCKLEBALL CHALLENGE WITH SON HEUNG-MIN (손흥민) ⚽☄","videoId":"m1te3mCVGBQ","complete":false},{"contents":"우리가 원했던 경기력 !!! 손흥민 멀티골, 기성용 탈압박 ● 대한민국 vs 콜롬비아 ● 하이라이트","videoId":"9dQ02l7YlQI","complete":false}]}
\ No newline at end of file
{"list":[{"contents":"[MV] Samuel(사무엘) _ Sixteen (Feat. Changmo)(식스틴 (Feat. 창모))","videoId":"NMPg8xVcjVs","complete":false},{"contents":"창모 (CHANGMO) - 아름다워 (Beautiful) (OFFICIAL AUDIO)","videoId":"ywwU5ka1fBs","complete":false},{"contents":"[MV] HYOLYN, CHANGMO(효린, 창모) _ BLUE MOON (Prod. GroovyRoom)","videoId":"GeJAee3m3Ik","complete":false}]}
\ No newline at end of file
......
{"list":[{"fname":"김경훈","userId":"kkh115505@naver.com","API":"abcdefg","password":"1234"},{"fname":"조인천","userId":"dlscjs5362@naver.com","API":"AIzaSyCTR9nHa9PheDMJO9O91Oj8HRJcu81bP_M","password":"asd"}]}
\ No newline at end of file
......@@ -12,7 +12,10 @@
<div class="form-group">
<input type="text" class="form-control" id="new_todo" placeholder="유튜브명">
</div>
<button type="button" class="btn btn-primary">추가</button>
<div class ="form-group">
<input type="number"class="form-control" id="count" placeholder ="갯수">
</div>
<button type="button" class="btn btn-primary">검색</button>
</form>
<table class="table"> <!-- ToDo 목록 -->
<thead>
......
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/stylesheets/style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>로그인</title>
</head>
<body>
<main class="login-form">
<div class="cotainer">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<form action="" method="">
<div class="form-group row">
<label for="userid" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
<div class="col-md-6">
<input type="text" id="userid" class="form-control" name="userid" required autofocus>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input type="password" id="password" class="form-control" name="password" required>
</div>
</div>
<div class="col-md-6 offset-md-4">
<button type="submit" id="login-submit" class="btn btn-primary">
로그인
</button>
<button type="button" id="makeInfo" class="btn btn-primary">
회원가입하기
</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<script src="/javascripts/login.js"></script>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<title>회원가입 페이지</title>
</head>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>새로운 사용자 등록</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">이름</label>
<div class="col-md-5">
<input id="fname" name="fname" type="text" placeholder="이름을 입력하세요." class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">아이디</label>
<div class="col-md-5">
<input id="email" name="email" type="eamil" placeholder="이메일을 입력하세요." class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ssnein">YouTube Api Key</label>
<div class="col-md-5">
<input id="ssnein" name="ssnein" type="text" placeholder="YouTube Api Key" class="form-control input-md" required="">
<a href="https://developers.google.com/youtube/v3/getting-started?hl=ko">Youtube API 키 받으러 가기</a>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="passwd">비밀번호</label>
<div class="col-md-5">
<input id="passwd" name="passwd" type="password" placeholder="비밀번호를 입력하세요." class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="passwdcheck">비밀번호확인</label>
<div class="col-md-5">
<input id="passwdcheck" name="passwdcheck" type="password" placeholder="비밀번호를 입력하세요." class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<label class="checkbox-inline" for="submit">
<input class="btn btn-success" type="submit" name="submit" id="submit" value="새로운 계정 생성하기">
</label>
</div>
</div>
</fieldset>
</form>
<script src="/javascripts/signup.js"></script>
</html>
\ No newline at end of file