본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[32일차] 20210427 라우터 middle ware 사용해서 express server 분산시켜 만들기 배움

알로호모라 2021. 4. 27. 15:32
반응형

라우터 없어도 서버를 만들 수 있지만 많은 정보 (?) 가 들어갈 수록 떠 깔끔하게 + 더 관리를 잘 하도록 쓰는거다. 

 

 middle ware 

url 바로 써서 보내기 -> get 

input form -> post 

 

Client가 req 요청 보낼 때 app.get('/', ()) 이 처리되기 전 middle ware 를 거침 (라우터) 

 

사실 * 도 middle ware 이다. (쉽게 설명위해 위와같이 설명) 

/* middle ware */ 
const express = require('express');
const app=express();

app.get('/', (req,res)=>{
    res.send('Good morning');
})

app.listen(3000,()=>{
    console.log('erver start port : 3000');
})

 

사실 우리는 middle ware를 써왔었음. 

아래 1,2,3 

첫번 째 인자 - 함수 (콜백함수) 

/* middle ware */ 
const express = require('express');
const app=express();
const bodyParser = require('body-parser');   // 1 

app.use(bodyParser.urlencoded({extended:false}))  //post 값  2 
// app.use 가 무엇 인가 ?  이것도 middle ware
// 첫 번째 인자값 : function 


app.use(express.static('public'));        //3
// 여기도 함수 들어감. 



app.get('/', (req,res)=>{
    res.send('Good morning');
})

app.listen(3000,()=>{
    console.log('erver start port : 3000');
})

 

 

세 번째 인자값을 만들 수 있다. 

function text (req,res,next) // 콜백함수에 3번째 인자값이 존재 한다. 



app.get('/', (req,res,next)=>{

})

 

/* middle ware */ 
const express = require('express');
const app=express();
const bodyParser = require('body-parser');   // 1 

    // app.use(bodyParser.urlencoded({extended:false}))  //post 값  2 
    // // app.use 가 무엇 인가 ?  이것도 middle ware
    // // 첫 번째 인자값 : function 


    // app.use(express.static('public'));
    // // 여기도 함수 들어감. 


    // 콜백함수에 3번째 인자값이 존재 한다. 
function text (req,res,next) {
    console.log('hello');
    next();
}
app.use(text);
 


app.get('/', (req,res)=>{
    res.send('Good morning');
})

app.listen(3000,()=>{
    console.log('erver start port : 3000');
})

 

 

-----------------------------------------------------정리----------------------------------------------------------

 

 

/* middle ware */ 
const express = require('express');
const app=express();

function text (req,res,next) {
    console.log('Hello');
    next();
}

app.use(text);

app.get('/', (req,res)=>{
    res.send('Good morning');
})

app.listen(3000,()=>{
    console.log('erver start port : 3000');
})

 

화면에 소스가 떠있는건 re.send 부분 

요거는 function test 의 console.log 부분 

 

즉, 두 쪽 모두 한번에 실행됨.

 

app.use / app. get 두개가 함께 실행됨. 

 

/* middle ware */ 
const express = require('express');
const app=express();

function text (req,res,next) {
    console.log('첫번째 실행입니다.');
    // next();
}

app.use(text);

app.get('/', (req,res)=>{
    console.log('두번째 실행입니다. ')
    res.send('Hello world!');
})

app.listen(3000,()=>{
    console.log('erver start port : 3000');
})

요걸로 다시 실행해봐 - > 어떤게 먼저 되는지 (누가 약하고 세고 가 없고 맨 위부터 아래로 실행됨. => 넘 복잡해서 그냥 next라는 것을 만듬. 

 

그리고 next를 지워보고 해보기 

 

/* middle ware */ 
const express = require('express');
const app=express();

function text (req,res,next) {
    console.log('첫번째 실행입니다.');
    // next();
}

app.use(text);

app.get('/', (req,res)=>{
    res.send('두번째 실행입니다. ');
})

app.listen(3000,()=>{
    console.log('erver start port : 3000');
})

next가 있으면 내가 마지막이 아니다. 똑같은게 있으면 그것도 실행해죠! 

 

 

 

 

test가 app.use(test)로인해 먼저 실행 된다. 

test가 나 실행 한다 ~~ 근데 next 가 있으니 - >다음 middle ware도 하러가도 돼~ 

next가 있고 없고에 따라 내가 마지막이다를 구분할 수 있따. 

 

 

 

 

 

app.use(함수) 

 

app.use () 의 첫번째 인자값은 함수다. (함수가 꼬옥 들어간다) 

모든 middle ware 실행되기 전, bodyParser가 실행된거다. 

 

 

원래 app.use는 이런 모양 (app.get과 똑같이 생김 ) 

app.use('', function (req,res){

})  

 

'' 요거 없으면 default 값이 '/' 요거야 

 

app.ues, app.get 의 사용 방법이 같다. 

 

app.use(test);추가 

 

 

 

---------------------------------------------------------실습-------------------------------------------------------

/* middle ware */ 
const express = require('express');
const app=express();

function test (req,res,next) {
    console.log('첫번째 실행입니다1111.');
    next();
}

app.use(test);

app.get('/', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');
})



app.use('/board', (req,res,next)=>{
    console.log('첫번째 실행입니다.');
    next();
})

app.get('/board', (req,res)=>{
    console.log('두번째 실행입니다.');
    res.send('게시판입니다.');
})

app.listen(3000,()=>{
    console.log('server start port : 3000');
})

 

실행하면 

localhost:3000/ 에서는

브라우저 - hello world! 

터미널 콘솔 - 첫번째 실행입니다 1111 / 두번째 실행입니다. 2222  

 

app.use(test) 에 

test라는 function 전 

 

 

/* middle ware */ 
const express = require('express');
const app=express();

function test (req,res,next) {
    console.log('첫번째 실행입니다1111.');
    next();
}

app.use('/', (req,res,next)=>{
    console.log('dd');
    next();
});

app.get('/', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');
})


app.use('/board', (req,res,next)=>{
    console.log('첫번째 실행입니다.');
    next();
})

app.get('/board', (req,res)=>{
    console.log('두번째 실행입니다.');
    res.send('게시판입니다.');
})

app.listen(3000,()=>{
    console.log('server start port : 3000');
})

 

 

 

 

아래가 같은거 같음 

 

function test (req,res,next) {
    console.log('첫번째 실행입니다1111.');
    next();
}

app.use(test);

 

app.use('/', (req,res,next)=>{
    console.log('dd');
    next();
});

 

 

 

-------------------------------------------------------------------2교시--------------------------------------------------------

 

 

/* middle ware */ 
const express = require('express');
const app=express();

function test (req,res,next) {
    console.log('첫번째 실행입니다1111.');
    next();
}

app.use(test);  //uri가 default 일 때 를 의미 

app.use('/',(req,res,next)=>{
    console.log('첫번째 실행이다.');
    next();
})

app.get('/', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');
})


app.use('/board', (req,res,next)=>{
    console.log('첫번째 실행입니다.');
    next();
})

app.get('/board', (req,res)=>{
    console.log('두번째 실행입니다.');
    res.send('게시판입니다.');
})

app.listen(3000,()=>{
    console.log('server start port : 3000');
})

 

App.use vs App.get/post 의 차이 

 

app.use의 경우  - 

app.ues('/') -> 모든 url을 뜻함. 

app.use('/board')-> uri 가 board~ 이후인거 모두 다 실행/  board % 

 

app.get의 경우 는?

 

 

 

현재 url 값을 콘솔로그에 찍고 싶다 (log를 남긴다) 

 

 

/* middle ware */ 
const express = require('express');
const app=express();


app.use('/',function(req,res,next){
    let url = `http://localhost${req.url}`;   
    console.log('클라이언트가 요청한 url : ' +url);
    next();
});
// url을 칠 때마다 내용을 콘솔 로그에 출력하고 싶어서 


app.get('/', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');
})



app.get('/list', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');              // 일로 들어왔으면 app.use 를 통해 url  /list가 찍힘 
})


app.get('/view', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');
})

app.get('/write', (req,res)=>{
    console.log('두번째 실행입니다22222. ')
    res.send('Hello world!');
})

app.listen(3000,()=>{
    console.log('server start port : 3000');
})

 

use의 사용법을 몰랐다면 각각 app.get 뒤에 

 

    let url = `http://localhost${req.url}`;   
    console.log('클라이언트가 요청한 url : ' +url);

을 붙이게 되어 코드가 안좋아짐. 

 

 

middle ware를 사용하는 이유 : 모든 것이 함축된(?) 한 곳에 뭉치고 싶어서 

 

/list 라는 요청을 받으면 

 

1. get('/list') 요청 -> 2. app.use ('/') - >3. app.get('/list') 응답

 

최종 목표 : 파일 쪼개기 

 

server.js로 게시판 만들때..

진짜 사이트를 만들게되면 코드가 엄~~~~~~~~~~~~~~~~~~~~~첨 길어지게 됨.

그래서 코드를 분산시켜서 관리 편하도록. 

 

 

 

/* middle ware */ 
const express = require('express');
const app=express();


app.get('/', (req,res)=>{
    res.send('hello world');
})

app.use((req,res,next)=>{
    res.status(404).send('너 페이지 없음..');
});
// status -> Google http status code! 200, 404 만 알고 있기 
// 200 -> 사이트가 잘 열렸다. 
// 404 -> 사이트가 없다. 


app.listen(3000,()=>{
    console.log('server start port : 3000');
})

// status -> Google http status code! 200, 404 만 알고 있기 

// 200 -> 사이트가 잘 열렸다. 

// 404 -> 사이트가 없다. 

app.use((req,res,next)=>{
    res.status(404).send('너 페이지 없음..');
    res.render('file')
});

요렇게 render로 html 파일가져와서 이쁘게 '요청하신 사이트가없습ㄴ디ㅏ' 나오게 가능

 

 

 

 

파일 만들기 

router.js 의 파일에 index.js 내용가져와보기 

 

 

router.js 

/* middle ware */ 
const express = require('express');
const app=express();
const main = require('./routes/index') //npm package(folder)를 가져온다 라는 의미로 만들어 왔음. 
//경로 써주기 / routes 라는 폴더에 index 라는 파일을 main에 담음 
// 객체 형태로 담겨있음. 

app.use('/',main); // /어느url일 때 내가 main이라는 파일을 가져다 작업하겠다. 
//요청 받으면 main이라는 것을 쓰도록 


app.get('/', (req,res)=>{
    res.send('hello world');
})




app.listen(3000,()=>{
    console.log('server start port : 3000');
})

index.js 에도 

express = require('express') 를 쓴다. 

그런데 

const app = express() 는 안써 -> 이걸쓰면 과부화

 

그래서 index.js 에

const express = require('express');
const router = express.Router();

요렇게 써줌. 

이것도 따지고 보면 middle ware ( and why )

 

처음 쓰는건 (최초 실행된 파일은) 

const express = require('express');
const app=express();

그 후 불러오는 파일들은

 

const express = require('express');
const router = express.Router();  // === APP 이다. 라고 생각하기

router를 사용해서 가져온다. 

 

const express = require('express');
const router = express.Router(); // == APP

router.get('/',(req,res)=>{
    res.send('Hello world');
})

//app을 쓴 경우 app.listen(3000,()=>{}) 이걸 씀

//module을 export 보낸다. router를 -> 최초 파일에서 이 파일을 불러올 수 있또록 
module.exports = router;

 

 

 

 정리 

 

router.js (최초 실행하는)

/* router.js */
const express = require('express');
const app=express();
const main = require('./routes/index') 

app.use('/',main); 


app.listen(3000,()=>{
    console.log('server start port : 3000');
})

index.js (불러오는)

const express = require('express');
const router = express.Router(); // == APP

router.get('/',(req,res)=>{
    res.send('Hello world');
})

module.exports = router;

 

 

 이해가 될듯 안된다.

그냥 외워야겟다~~~~~~~~~~~~~~~~~~~~~~~~~~~악

 

 

 

const main = require('./routes/index')

요기에 ./routes만 써도 되고 ./routes/index.js로 써도 됨 

 

index 라는 것만.. 

파일 명이 index 라는 것만 !!! ㅇㅣ유는 뭘까 

 

 

 

패턴이라는 것을 배워야하는데 ... 

게시판부터 제대로 만들기.. 

 

1. 쌩으로 게시판 만들어보기 

2. 파일 분산해서 조금 만들어보기 

3. 공통적인 부분을 묶어서 하는게 디자인 패턴

 

 

 

 

---------------------------------------------------------3 교 시 -----------------------------------------------------------

 

 

router.js에 추가 

const board = require('./routes/board');

 

board.js (routes 폴더에 넣기) 

const express = require('express');
const router = express.Router();





module.exports = router;

항상 module.exports 를 세트로 쓰기 

 

 

router.js

/* router.js */
const express = require('express');
const app=express();
const main = require('./routes/index') 
const board = require('./routes/board');

app.use('/',main); 
app.use('/board', board);


app.listen(3000,()=>{
    console.log('server start port : 3000');
})

 

board.js

const express = require('express');
const router = express.Router();


//router.get('/')
router.get('/',(req,res)=>{
    res.send('게시판이다');
})


module.exports = router;

 

 

저 부분이 뽀인뜨

 

boad.js 에

/list 추가하면 멋져보인대 

const express = require('express');
const router = express.Router();


//router.get('/')
router.get('/list',(req,res)=>{
    res.send('게시판이다');
})


module.exports = router;

 

boardjs에 

const express = require('express');
const router = express.Router();


//router.get('/')
router.get('/list',(req,res)=>{
    res.send('리스트이다.');
})

router.get('/write',(req,res)=>{
    res.send('쓰는 곳이다.');
})

router.get('/view',(req,res)=>{
    res.send('보는 곳이다.');
})

router.get('/modify',(req,res)=>{
    res.send('수정하는 곳이다.');
})


module.exports = router;

http://localhost:3000/

http://localhost:3000/board/

http://localhost:3000/board/list

http://localhost:3000/board/write

http://localhost:3000/board/view

http://localhost:3000/board/modity

입력해봐

 

router.get('/list',(req,res)=>{
    res.send('리스트이다.');
})

요 의미는 /board/list 

/board 가 생략되어있음 

 

 

 

 

 

 

 

 

nunjucks 잘 되는지

db연결 잘 되는지

bodyParser 잘 작동하는지 확인해야함 

 

 

router.js (최초 js) 에서만 연결하면 됨

 

nunjucks  

 

router.js

/* router.js */
const express = require('express');
const app=express();
const main = require('./routes/index') 
const board = require('./routes/board');
const nunjucks = require('nunjucks');

nunjucks.configure('views2',{
    express:app,
})

app.set('view engine', 'html');
app.use('/',main); 
app.use('/board', board);


app.listen(3000,()=>{
    console.log('server start port : 3000');
})

index.js

const express = require('express');
const router = express.Router(); // == APP

router.get('/',(req,res)=>{
    res.render('index.html',{
        title:'homepage'
    });
});


module.exports = router;

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    안녕 <br/>
    {{title}}
</body>
</html>

 

파일 

 

 

 

 

 

body Parser

 

 

먼저 HTML 을 나누기 (css , js 등을 공유하기 위함) 

 

include? 란 뭐지 

 

 

css, js 할 ㄸㅐ마다 html에 넣으면 힘드니까 이렇게 나눔. 

 

 

 

{} -> nunjucks 사용할꺼야. 라는 의미 

%% -> nunjucks 기능을 활용할꺼야 라는 의미

 

{% %} 안에 내용 채우기 

include 라는 함수 사용 

 

{% include "../layout/top.html" %}

                      경로 (흔히 생각하는 html 의 경로) 

 

 

- > 브라우저 elemnts (f12) 를 보면 css 가 모두 달려있음. 

 

list, update, view, wirte.html

{% include "../layout/top.html" %}
    <!--start-->

    list입니다.


    <!--end-->
{% include "../layout/bottom.html" %}

 

 

 

------------------------------------------------------4교시 전까지 한거 정리 ------------------------------------------------

 

 

 

 

 

router.js

/* router.js */
const express = require('express');
const app=express();
const main = require('./routes/index') 
const board = require('./routes/board');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');//post 쓰기 위함 

app.use(bodyParser.urlencoded({extended:false})); //post로 값을 넘길 때 

nunjucks.configure('views2',{
    express:app,
})

app.set('view engine', 'html');
app.use('/',main); 
app.use('/board', board);


app.listen(3000,()=>{
    console.log('server start port : 3000');
})

 

routes폴더 -> 2개 js 

 

index.js

const express = require('express');
const router = express.Router(); // == APP

router.get('/',(req,res)=>{
    res.render('index.html',{
        title:'homepage'
    });
});


module.exports = router;

 

 

board.js

const express = require('express');
const router = express.Router();


//router.get('/')
router.get('/list',(req,res)=>{
    res.render('./board/list.html');
})

router.get('/write',(req,res)=>{
    res.render('./board/write.html');
})

router.post('/write',(req,res)=>{
    console.log(req.body);
    res.redirect('/board/list');
})

router.get('/view',(req,res)=>{
    res.render('./board/view.html');
})

router.get('/modify',(req,res)=>{
    res.render('./board/modify.html');
})

router.get('/update',(req,res)=>{
    res.render('./board/update.html');
})


module.exports = router;

view2 폴더 안 index.html 1개 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    안녕 <br/>
    {{title}}
</body>
</html>

 

views2 폴더 -> layout 폴더 -> 2개 htmls 

 

top.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/main.css">
</head>
<body>

bottom.html

    <script type="text/javascript">
    
    </script>
</body>
</html>

 

views2 폴더 -> board 폴더 -> 4개 htmls 

 

write.html

{% include "../layout/top.html" %}
    <!--start-->


    write입니다.

    <form action="/board/write" method ="post">
    
        <input type="text" name = "subject">
        <input type="submit" value="확인">
    
    </form>

    <!--end-->
{% include "../layout/bottom.html" %}

list.html

{% include "../layout/top.html" %}
    <!--start-->

    list입니다.


    <!--end-->
{% include "../layout/bottom.html" %}

update.html

{% include "../layout/top.html" %}
    <!--start-->


    update입니다.

    <!--end-->
{% include "../layout/bottom.html" %}

view.html

{% include "../layout/top.html" %}
    <!--start-->


    view입니다.

    <!--end-->

{% include "../layout/bottom.html" %}

 

view, update, list 는 모두

이렇게 나옴 

 

write 은 버튼 (form method=post)로 보내기 위해 만들어 놓음 

 

 

localhost:3000

 

복습할 때 새 파일 만들어서 연습하기 다 외우기 

 

 

 

app.use(bodyParser.urlencoded({extended:false})); //post로 값을 넘길 때 
//암묵적으로 '/', next() 가 안에 있는거야 
// 최상단에 있어야 post에 있는 body 값을 읽어올 수 있음. 
// 아래에 있으면 작동이 안될 수도.

 

 

 

--------------------------------------------------------------------------------------------------------------------------------

 

 

 

Router.js Index.js Index.html
1. router.js (최초js) 에 main(index.js) board(board.js) 심어주기  2. main (index.js) 작성
(render to index.html) 		 3. index. html 에 client UI에 보여줄 내용 작성 

 

Router.js Board.js List, Write, View, Modify, Upadte.html
1. router.js (최초) 에 board (board.js) 심기  2. board (board.js) 작성 
(/list, write ... ) 에 따라 render 하는 htmlㄴ 작성		 render 당하는 htmls 작성
* 아래의 경우 write 에서 확인 submit 버튼 클릭 -> post method 로 list로 redirect 됨 

 

 

 

 

 

------------------------------------------------------------D B-------------------------------------------------------------

mysql 다운 받아져있어야함 

위에도 bodyparser도 미리 되어 있었어야함

 

mysql 작성 in router.js

const mysql = require('mysql');

let connection = mysql.createConnection({
    host:localhost,
    user:root,
    password:5353,
    database:homepage1
    //port:'3306' default 값은 3306인데 바꾼 사람만 넣기 
})

connection.connect();

 

 

board.js

router.get('/list',(req,res)=>{    // uri = /board/list 
    connection.query('select * from board', (error, results)=>{
        if(error){
            console.log(error);
        }else{
            console.log(results);
        }
    })
    res.render('./board/list.html');
})

 

안되는 이유 : 연결이 안되어 있으니까 (변수) -> connection pool 이라는 걸 사용할 거야 

 

 

-> 그래서 그냥 위의 내용을 board.js에 넣어주면 됨 

 

 

 

const express = require('express');
const router = express.Router();


const mysql = require('mysql');

let connection = mysql.createConnection({   //변수에 함수 return 값을 넣어 
    host:localhost,
    user:root,
    password:5353,
    database:homepage1
    //port:'3306' default 값은 3306인데 바꾼 사람만 넣기 
})

connection.connect(); 
 //connection이라는 변수가 -> board.js 에서 당옇니 사용이 안됨 

//router.get('/')
router.get('/list',(req,res)=>{    // uri = /board/list 
    connection.query('select * from board', (error, results)=>{
        if(error){
            console.log(error);
        }else{
            console.log(results);
        }
    })
    res.render('./board/list.html');
})

router.get('/write',(req,res)=>{
    res.render('./board/write.html');
})

router.post('/write',(req,res)=>{
    console.log(req.body);
    res.redirect('/board/list');
})

router.get('/view',(req,res)=>{
    res.render('./board/view.html');
})

router.get('/modify',(req,res)=>{
    res.render('./board/modify.html');
})

router.get('/update',(req,res)=>{
    res.render('./board/update.html');
})

module.exports = router;

이렇게 

그리고 이걸 공유해서 하는 건 내일 배울 것 

 

 

 

 

 

* include는 오직 nunjucks 만 생각 

<a href="/board/list"> 이건 server 기준

 

 

 

---------------------------------------------실습---------이전꺼를 옮겨보기 --------------------------------------------------

 

server.js

require('dotenv').config();
const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const port = process.env.SERVER_PORT || 3000;
//// 오늘 한 내용 /// 
const main = require('./routes/index')    // MAIN
const board = require('./routes/board');  //BOARD
// const mysql = require('mysql');

// let connection = mysql.createConnection({   //변수에 함수 return 값을 넣어 
//     host:'localhost',
//     user:'root',
//     password:'0000',
//     database:'homepage1'
//     //port:'3306' default 값은 3306인데 바꾼 사람만 넣기 
// })

// connection.connect(); 


nunjucks.configure('views2',{
    express:app,
})

app.use(bodyParser.urlencoded({extended:false}));  
app.set('view engine', 'html');
app.use(express.static('public')); 


//오늘 추가한 내용 ///
app.use('/', main);
app.use('/board', board);  


// 삭제한 내용 

// let connection = mysql.createConnection({
//     host:process.env.DB_HOST,
//     user:process.env.DB_USER,
//     password:process.env.DB_PASSWORD,
//     database:process.env.DB_DATABASE,
// })

// connection.connect();  

// app.get('/',(req,res)=>{
//     res.render('index.html');
// })

// app.get('/list',(req,res)=>{  
//     connection.query("select *, date_format(today, '%H:%i %d.%m.%Y') as today, date_format(motoday, '%H:%i %d.%m.%Y') as motoday from board order by idx desc", (error,results)=>{
//         if(error){ 
//             console.log(error);
//         }else{
//             console.log(results);
//             let total_count = results.length;
//             results.forEach(ele=>{
//                 ele.number=total_count;
//                 total_count--;
//             })
//             console.log(results);

//             res.render('list.html',{  
//                 board_db:results, 
//             })
//         }
//     })
// })

// app.get('/write',(req,res)=>{
//     res.render('write.html');
// })

// app.post('/writedone',(req,res)=>{
//     let subject = req.body.subject;
//     let writer=req.body.writer;
//     let content=req.body.content;
//     let sql=`insert into board (subject,writer,content, today, hit) values ('${subject}','${writer}','${content}', now(),0)`

//     connection.query(sql,(error,results)=>{
//         if(error){
//             console.log(error);
//         }else {
//             res.redirect('/list');  
//         }
//     })
    
// })


//------------------ V I E W -------------------//

// app.get('/view',(req,res)=>{
//     let idx = req.query.idx;
//     console.log(idx);
    
//     connection.query(`select * from board where idx='${idx}'`,(error,results)=>{
//         if(error){
//             console.log(error)
//         }else{
//             console.log(results)
//             res.render('view.html',{
//                 view_db:results[0],
                
//             });
//         }
//     })

//     connection.query(`update board set hit=hit+1 where idx='${idx}'`);
    
// })

// app.get('/modify',(req,res)=>{

//     let idx=req.query.idx;

//     connection.query(`select * from board where idx=${idx}`,(error,results)=>{
//         if(error){
//             console.log(error)
//         }else{
//             console.log(results);
//             res.render('modify.html',{
//                 modify_db:results[0],
//             });
//         }
//     })
// })

// app.post('/modifydone',(req,res)=>{
//     let idx = req.body.idx;
//     console.log(req.body);
//     let subject = req.body.subject;
//     let writer = req.body.writer;
//     let content = req.body.content;

//     let sql = `update board set subject='${subject}', writer='${writer}', content='${content}', motoday=now() where idx='${idx}'`;

//     connection.query(sql,(error,results)=> {
//         if(error){
//             console.log(error);
//         }else{
//             console.log(results);
//             res.redirect('/list');
//         }
//     })
// // })

// app.get('/delete',(req,res)=>{
    
//     let idx=req.query.idx;
//     let sql=`delete from board where idx='${idx}'`;
//     connection.query(sql,(error,results)=>{
//         if(error){
//             console.log(error);
//         }else{
//             res.redirect('/list');
//         }
//     })
// })



app.listen(3000,()=>{
    console.log('server start port : 3000')
})

 

index.js

const express = require('express');
const router = express.Router(); // == APP

router.get('/',(req,res)=>{
    res.render('index.html',{
        title:'homepage'
    });
});


module.exports = router;

board.js

const express = require('express');
const router = express.Router();
const mysql = require('mysql');


let connection = mysql.createConnection({   //변수에 함수 return 값을 넣어 
    host:'localhost',
    user:'root',
    password:'5311',
    database:'homepage1'
    //port:'3306' default 값은 3306인데 바꾼 사람만 넣기 
})

connection.connect(); 

 //connection이라는 변수가 -> board.js 에서 당옇니 사용이 안됨 

//router.get('/')
router.get('/list',(req,res)=>{    // uri = /board/list 
    connection.query("select *, date_format(today, '%H:%i %d.%m.%Y') as today, date_format(motoday, '%H:%i %d.%m.%Y') as motoday from board order by idx desc", (error,results)=>{
        if(error){ 
            console.log(error);
        }else{
            console.log(results);
            let total_count = results.length;
            results.forEach(ele=>{
                ele.number=total_count;
                total_count--;
            })
            console.log(results);

            res.render('board/list.html',{  
                board_db:results, 
            })
        }
    })
})


router.get('/write',(req,res)=>{
    res.render('board/write.html');
})

router.post('/writedone',(req,res)=>{
    let subject = req.body.subject;
    let writer=req.body.writer;
    let content=req.body.content;
    let sql=`insert into board (subject,writer,content, today, hit) values ('${subject}','${writer}','${content}', now(),0)`

    connection.query(sql,(error,results)=>{
        if(error){
            console.log(error);
        }else {
            res.redirect('/board/list');  
        }
    })
    
})

router.get('/view',(req,res)=>{
    let idx = req.query.idx;
    console.log(idx);
    
    connection.query(`select * from board where idx='${idx}'`,(error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results)
            res.render('board/view.html',{
                view_db:results[0],
            });
        }
    })
    connection.query(`update board set hit=hit+1 where idx='${idx}'`);
})



router.get('/modify',(req,res)=>{

    let idx=req.query.idx;

    connection.query(`select * from board where idx=${idx}`,(error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results);
            res.render('board/modify.html',{
                modify_db:results[0],
            });
        }
    })
})


router.post('/modifydone',(req,res)=>{
    let idx = req.body.idx;
    console.log(req.body);
    let subject = req.body.subject;
    let writer = req.body.writer;
    let content = req.body.content;

    let sql = `update board set subject='${subject}', writer='${writer}', content='${content}', motoday=now() where idx='${idx}'`;

    connection.query(sql,(error,results)=> {
        if(error){
            console.log(error);
        }else{
            console.log(results);
            res.redirect('/board/list');
        }
    })
})

router.get('/delete',(req,res)=>{
    
    let idx=req.query.idx;
    let sql=`delete from board where idx='${idx}'`;
    connection.query(sql,(error,results)=>{
        if(error){
            console.log(error);
        }else{
            res.redirect('/board/list');
        }
    })
})


router.get('/update',(req,res)=>{
    res.render('./board/update.html');
})

module.exports = router;

 

index.html

{% include "./layout/top.html" %}
    <div class="wrap">
        <div class="outerbox" >
            <div class="innerbox">
                <h2 class="welcome">WELCOME!dddd</h2> 
                <div id = "gogobox">
                    <a  id="gogo" href="/board/list" >게시판 구경하기</a>
                </div>
            </div>
        </div>
    </div>

{% include "./layout/bottom.html" %}

list.html

{% include "../layout/top.html" %}
    <!--start-->

    <div class="wrap">
        <div class="outerbox" >
            <div class="innerbox">
                <h2 class="main">게시판</h2>
                <div class="mainbox">
                    <table id="table1">
                        <tr id ="fields" class="tb">
                            <td class="td0">
                                <span>All</span>
                                <span><input name="chk" type="checkbox" onclick="checkAll(this)"></span>
                                
                            </td>
                            <td class="td1">번호</td>
                            <td class="td2">제목</td>
                            <td class="td3">작성자</td>
                            <td class="td4">수정 날짜</td>
                            <td class="td4">작성 날짜</td>
                            <td class="td5">조회수</td>
                        </tr>
                        <tr class="tb">{% for item in board_db %}
                            <td class="td0"><input  name="chk" type="checkbox" ></td>
                            <td class="td1">{{item.number}}</td>
                            <td class="td2" id="aa"><a href="/board/view?idx={{item.idx}}">{{item.subject}}</a></td>
                            <td class="td3">{{item.writer}}</td>
                            <td class="td4">{{item.motoday}}</td>
                            <td class="td4">{{item.today}}</td>
                            <td class="td5">{{item.hit}}</td>
                        </tr>{% endfor %}
                    </table>
                    <div class="btnbox">
                        <button class="btn"><a href="/">돌아가기</a></button>
                        <button class="btn"><a href="/board/write">글쓰기</a></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // let check = false;
        // function checkAll(){
        //     let chk = document.getElementsByName("chk[]");
        //     console.log(chk);
        //     if(check==false){
        //         check=true;
        //         for(let i=0; i<chk.length; i++){
        //             chk[i].checked=true;
        //         }
        //     }else{
        //         check=false;
        //         for(let i=0; i<chk.length; i++){
        //             chi[i].checked=false;
        //         }
        //     }
        // }

        function checkAll(checkAll){
            let checkboxes=document.getElementsByName("chk");
            console.log(checkboxes);
            checkboxes.forEach((checkbox)=>{
                checkbox.checked=checkAll.checked;
            })
        }
    
    </script>


    <!--end-->
{% include "../layout/bottom.html" %}

modify.html

{% include "../layout/top.html" %}
    <!--start-->


    <div class="wrap">
        <div class="outerbox" >
            <div class="innerbox">
                <h2 class="main"> 글 수정하기 </h2>
                <form method="post" action="/board/modifydone">
                    <button disabled type=submit onclick="return flase;" style="display:none;"></button> <!--enter하면 입력되지 않도록 방지-->
                    <div class="mainbox">
                        <div class="subbox">
                            <div class="subsubbox">
                                <span class="sub">글 번호 :</span>
                            </div>
                            <input class="txbox" type="text" name="idx" value="{{modify_db.idx}}" readonly >
                        </div>
                        <div class="subbox">
                            <div class="subsubbox">
                                <span class="sub">제목 :</span>
                            </div>
                            <input id ="subject_tx" class="txbox" type="text" name="subject" value="{{modify_db.subject}}"> 
                        </div>
                        <div class="wribox">
                            <div class="subsubbox">
                                <span class="wri">작성자 :</span>
                            </div>
                            <input id="writer_tx" class="txbox" type="text" name="writer" value="{{modify_db.writer}}"> 
                        </div>
                        <div class="d">
                            <div class="subsubbox">
                                <span class="con">내용 :</span>
                            </div>
                            <input id="content_tx" class="conbox" type="text" name="content" value="{{modify_db.content}}"> 
                        </div>
                    </div>


                    <div class ="btnbox">
                        <button class ="btn"><a href="/board/list">돌아가기</a></button>
                        <input class ="btn" type="submit" value="글 수정 완료" onclick="val()">
                    </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <!--end-->

{% include "../layout/bottom.html" %}

view.html

{% include "../layout/top.html" %}
    <!--start-->


    <div class="wrap">
        <div class="outerbox" >
            <div class="innerbox">

                    <h2 class="main">VIEW PAGE </h2>
                    <div class="mainbox1">
                            <div class="subbox">
                                <div class="subsubbox">
                                    <span class="sub">글 번호 :</span>
                                </div>
                                <input class ="txbox" type="text" name="subject" disabled value="{{view_db.idx}}"> 
    
                            </div>
                            <div class="subbox">
                                <div class="subsubbox">
                                    <span class="sub">제목 :</span>
                                </div>
                                <input class ="txbox" type="text" name="subject"  disabled  value="{{view_db.subject}}"> 
    
                            </div>
                            <div class="wribox">
                                    <div class="subsubbox">
                                <span class="wri">작성자 :</span>
                                    </div>
                                <input class = "txbox" type="text" name="writer"  disabled  value="{{view_db.writer}}">
                                <br/>
                            </div>
                            <div class="d">
                                <div class="subsubbox">
                                    <span class="con">내용 :</span>
                                </div>
                                <input class = "conbox" type="text"   disabled  name="content" value="{{view_db.content}} ">
                                   
                            </div>
                    </div>

                <div class="btnbox" class="btnbox3">   
                    <button class="btn"><a href="/board/list">뒤로가기</a></button>
                    <button class="btn"><a href="/board/modify?idx={{view_db.idx}}">글 수정하기</a></button>
                    <button class="btn"><a href="/board/delete?idx={{view_db.idx}}">글 삭제하기</a></button>
                </div>
            </div>
        </div>
    </div>

    <!--end-->

{% include "../layout/bottom.html" %}

 

write.html

{% include "../layout/top.html" %}
    <!--start-->

    <div class="wrap">
        <div class="outerbox" >
            <div class="innerbox">
                <h2 class="main"> 글 작성하기</h2>
                <form method="post"  action="/board/writedone">
                    <button type=submit name = "name" disabled onclick="enter()"; style="display:none;"></button> <!-- enter하면 입력되지 않도록 방지-->
                    <div class="mainbox">
                        <div class="subbox">
                            <div class="subsubbox">
                                <span class="sub">제목 :</span>
                            </div>
                            <input id="subject_tx" class ="txbox" type="text" name="subject"> 

                        </div>
                        <div class="wribox">
                                <div class="subsubbox">
                            <span class="wri">작성자 :</span>
                                </div>
                            <input id="writer_tx" class = "txbox" type="text" name="writer">
                            <br/>
                        </div>
                        <div class="d">
                            <div class="subsubbox">
                                <span class="con">내용 :</span>
                            </div>
                            <textarea id="content_tx" onckeyup="enter()" class = "conbox" type="textbox" name="content"> </textarea>
                            <!--textarea name="content"></textarea-->
                                    
                        </div>
                    </div>

                    <div class="btnbox">       
                        <button class="btn"><a href="/board/list">돌아가기</a></button>
                        <input class ="btn" type="submit" value="글작성" onclick="val()">
                    </div> 
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function val (){
            let subject_tx = document.getElementById("subject_tx");
            let writer_tx = document.getElementById("writer_tx");
            let content_tx = document.getElementById("content_tx");

            if(subject_tx.value==""){
                alert("제목을 입력해주세요르레히호");
                event.preventDefault();
            } else if(writer_tx.value==""){
                alert("작성자를 입력해주세요");
                event.preventDefault();
            } else if(content_tx.value==""){
                alert("내용을 입력해주세요");
                event.preventDefault();
            }
        }
        function enter(){
            if(window.event.keyCode ==13){
                alert("d");
            document.getElementsByName("content").innerHTML+="<br/>";
        }
    }
    </script>

    <!--end-->
{% include "../layout/bottom.html" %}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[33일차] 20210428 node.js connection pool 이론 / 코드  (0) 2021.04.28
[32일차 복습 및 정리] 라우터 / middle-ware 사용해서 node.js express 서버 분산 관리 middle-ware, 미들웨어란? / next() 사용법  (0) 2021.04.28
[31일차 복습] req, res 배열, 객체 연습  (0) 2021.04.27
[31일차] 20210426 게시판 만들기 점검 , order by idx  (0) 2021.04.26
[30일차 복습2 / 숙제 ] node.js express서버 구축, 게시판 만들기 수정, 삭제, 조회수 올리기 - mysql DB연결  (0) 2021.04.25

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바