프로그래밍/Node.js

Node.js 생활코딩 정리 – CRUD + Auth MYSQL버전을 여러 개의 파일로 나누기3

가카리 2016. 12. 16. 20:27
반응형

CRUD + Auth MYSQL버전을 여러 개의 파일로 나누기3

 

이번에는 app_mysql.js를 최적화 시켜본다.

 

기존의 app_mysql.js를 복사해서 app_mysql2.js를 만든다.

 

그리고 먼저 예전에 views_mysql에 있던 jade 파일들을 복사해서 /views/mysql/topic폴더에 넣는다.

복사 전

복사 후

 

 

그리고 jade 폴더가 바꼈으므로 다음의 소스를 수정해준다.

 

app_mysql2.js

 

var express = require('express');//익스프레스를 가져옴

var bodyParser = require('body-parser')

var fs = require('fs');

var mysql = require('mysql');

var conn = mysql.createConnection({

host : 'localhost',

user : 'root',

password : 'qwer1234',

database : 'o2',

port : 3307

});

 

conn.connect();//database 접속 완료

 

var app = express();

var multer = require('multer');//업로드를 위한 multer 가져옴

var _storage = multer.diskStorage({

destination: function (req, file, cb) {//cb callback함수의 약자

//if(파일의 형식이 이미지면)

//이미지 폴더에 저장

//else

//text 폴더에 저장한다 가능하게됨

cb(null, 'uploads/')//2번째 인자는 파일이 저장될 인자

},

filename: function (req, file, cb) {//cb callback함수의 약자

cb(null, file.originalname)//파일의 이름을 지정함

}

});

 

var upload = multer({ storage: _storage });

 

app.use(bodyParser.urlencoded({ extended: false }));//body parser 사용함

app.locals.pretty = true;//템플릿 줄바꿈

app.set('views', './views/mysql');//템플릿 폴더 위치 표시

app.set('view engine', 'jade');//템플릿 엔진을 jade 명시함

app.use('/user', express.static('uploads'));//여기로 폴더에 있는 그림을 접근할 있음

 

//업로드 폼을 가져옴

app.get('/upload', function(req, res){

res.render('upload');

});

 

//실제 업로드를 시키면 post

//2번째 파라미터는 사용자가 전송한 데이터에서 파일이 포함되면

//req안에 file이라는 프로퍼티를 추가함 미들웨어임

//userfile jade에서 input type='file' name

app.post('/upload', upload.single('userfile'), function(req, res){

res.send('Uploaded : '+req.file.filename);

});

 

//글작성하기

//new에서 add 바꿈

app.get('/topic/add', function(req, res){

var sql = 'SELECT id, title FROM topic';//글목록을 보여주기 위한 쿼리문

conn.query(sql, function(err, topics, fields){

if(err){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}

res.render('topic/add', {topics:topics});

});

});

 

app.get(['/topic/:id/edit'], function(req, res){

var sql = 'SELECT id, title FROM topic';//글목록을 보여주기 위한 쿼리문

conn.query(sql, function(err, topics, fields){

var id = req.params.id;//:id값을 가져옴

if(id){//id 있으면 상세보기

var sql = 'SELECT * FROM topic WHERE id=?';

conn.query(sql, [id], function(err, topic, fields){

if(err){//데이터베이스 에러가 있다면

console.log(err);

res.status(500).send('Internal Server Error');

}else{

res.render('topic/edit', {topics:topics, topic:topic[0]});//topic 쿼리문의 데이터 한개만 넘겨줌

}

});

}else{//id값이 없다면 에러출력

console.log('There is no id.');

res.staus(500).send('Internal server error');

}

});

});

 

app.post(['/topic/:id/edit'], function(req, res){

var title = req.body.title;

var description = req.body.description;

var author = req.body.author;

var id = req.params.id;

var sql = 'UPDATE topic SET title=?, description=?, author=? WHERE id=?';

conn.query(sql, [title, description, author, id], function(err, result, fields){

if(err){

console.log(err);

res.status(500).send('Internal Server Error');

}else{

//res.send(result);//이걸로 먼저 result값을 보고서 해야한다.

res.redirect('/topic/'+id);//변경후 이동 시켜라

}

});

});

 

app.get('/topic/:id/delete', function(req, res){

var sql = 'SELECT id, title FROM topic';//글목록을 보여주기 위한 쿼리문

var id = req.params.id;

conn.query(sql, function(err, topics, fields){

var sql = 'SELECT * FROM topic WHERE id=?';

conn.query(sql, [id], function(err, topic){

if(err){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}else{

if(topic.length === 0){

console.log('There is no record.');

res.status(500).send('Internal Server Error');

}

// res.send(topic);//먼저 값을 보자

res.render('topic/delete', {topics:topics, topic:topic[0]});

}

});

});

});

 

app.post('/topic/:id/delete', function(req, res){

var id = req.params.id;

var sql = 'DELETE FROM topic WHERE id=?';

conn.query(sql, [id], function(err, result){

res.redirect('/topic/');//삭제되면 초기화면으로감

});

});

 

 

//폼에서 작성한 것을 여기서 받음

app.post('/topic/add', function(req, res){

var title = req.body.title;//제목과 본문의 내용을 가져옴

var description = req.body.description;

var author = req.body.author;

var sql = 'INSERT INTO topic(title, description, author) VALUES(?, ?, ?)';

 

//쿼리문을 실행한다.

conn.query(sql, [title, description, author], function(err, result, fields){

if(err){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}

res.redirect('/topic/'+result.insertId);//insertId 입력한 행의 id값을 의미함

});

 

});

 

//글목록을 표시 mysql 버전

//[] 배열을 의미 둘다 여기로 접근 가능하다는

app.get(['/topic', '/topic/:id'], function(req, res){

var sql = 'SELECT id, title FROM topic';//글목록을 보여주기 위한 쿼리문

conn.query(sql, function(err, topics, fields){

var id = req.params.id;//:id값을 가져옴

if(id){//id 있으면 상세보기

var sql = 'SELECT * FROM topic WHERE id=?';

conn.query(sql, [id], function(err, topic, fields){

if(err){//데이터베이스 에러가 있다면

console.log(err);

res.status(500).send('Internal Server Error');

}else{

res.render('topic/view', {topics:topics, topic:topic[0]});//topic 쿼리문의 데이터 한개만 넘겨줌

}

});

}else{//첫화면을 보여줌

res.render('topic/view', {topics:topics});//view.jade파일을 출력함 쿼리문에서 가져온 값을 넘겨줌

}

});

});

 

 

app.listen(3003, function(){

console.log('Connected, 3003 port!');

})

 

 

 

 

 

그다음 jade 파일에서 중복된 파일을 없애보자

 

 

윗부분을 하나의 layout.jade라는 파일에 복사 붙여넣기를 하고 jade extends기능을 이용해서 중복을 없애자

 

/views/mysql/layout.jade

 

doctype html

html

head

meta(charset='utf-8')

body

h1

a(href='/topic') Server Side Javascript

ul

each topic in topics

li

a(href='/topic/'+topic.id)= topic.title

block content

 

 

/views/mysql/topic/add.jade

 

extends ../layout

block content

article

form(action='/topic/add' method='post')

p

input(type='text' name='title' placeholder='title')

p

textarea(name='description' placeholder='description')

p

input(type='text' name='author' placeholder='author')

p

input(type='submit')

 

 

/views/mysql/topic/delete.jade

 

extends ../layout

block content

article

h1= 'Delete? ' + topic.title

form(action='/topic/'+topic.id+'/delete' method='post')

p

input(type='submit' value='YES')

a(href='/topic/'+topic.id) no

 

/views/mysql/topic/edit.jade

 

extends ../layout

block content

article

form(action='/topic/'+topic.id+'/edit' method='post')

p

input(type='text' name='title' value=topic.title placeholder='title')

p

textarea(name='description' placeholder='description')

=topic.description

p

input(type='text' name='author' value=topic.author placeholder='author')

p

input(type='submit')

ul

li

a(href='/topic/add') add

 

 

/views/mysql/topic/upload.jade

 

doctype html

html

head

meta(charset='utf-8')

body

form(action='upload' method='post' enctype='multipart/form-data')

input(type='file' name='userfile')

input(type='submit')

 

 

/views/mysql/topic/view.jade

 

extends ../layout

block content

article

if topic

h2= topic.title

= topic.description

div= 'by'+topic.author

else

h2 Welcome

| This is server side js.

ul

li

a(href='/topic/add') add

if topic

li

a(href='/topic/'+topic.id+'/edit') edit

li

a(href='/topic/'+topic.id+'/delete') delete

 

 

실행 화면

첫화면

 

 

클릭하면 잘된다

 

add를 눌렀을 때

edit를 눌렀을 때

 

delete를 눌렀을 때

 

 

반응형