dukDukz

21.04.27 Router로 파일 쪼개기 2 본문

웹 개발/Node JS

21.04.27 Router로 파일 쪼개기 2

헤일리_HJ 2021. 4. 27. 12:19

전체 파일 구조

server3.js

const express = require('express');
const app = express();
const main = require('./route/index');  //route폴더에 있는 index파일을 가져오자
const board = require('./route/board');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');


app.set('view engine','html');
nunjucks.configure('views',{
    express:app,
})

//이 구문의 위치가 항상 중요함 app.use - 이 부분이 제일 위에 올라와있어야함
//얘가 최상단에 있어야 post에 있는 body값을 읽어올 수 있게된다.
app.use(bodyParser.urlencoded({extended:false}));

app.use('/',main);      // 모든 url일때 main의 안에 있는게(index.js) 실행 되도록 한다.
app.use('/board',board);

app.listen(4000,()=>{
    console.log('open server 4000');
});

index.js

const express = require('express');
const router = express.Router();    
// 파일로 불러올때는 app 이 아니라 router로 쓰겠다. => app이라고 생각하고 작업하면 된다.

router.get('/',(req,res)=>{
    res.render('index.html',{
        title: '타이틀이에요',
    })
});

module.exports = router;

 

board.js

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

router.get('/list',(req,res)=>{
    // server3.js에서 view 까지는 이미 접근이 되어있음
    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/update.html');
});

module.exports = router;

views/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>
    helloworld <br>
    {{title}}
</body>
</html>

 

 

views/board/@.html

더보기

1. list.html

{% include "../layout/top.html" %}
    <!-- start -->
    list 입니다.
    <!-- end -->
{% include "../layout/bottom.html" %}

 

2. update.html

{% include "../layout/top.html" %}
    <!-- start -->
    update 입니다.
    <!-- end -->
{% include "../layout/bottom.html" %}

 

3. view.html

{% include "../layout/top.html" %}
    <!-- start -->
    view 입니다.
    <!-- end -->
{% include "../layout/bottom.html" %}

 

4. 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" %}

 

views/layout/ top.html & bottom.html

더보기

1. top

<!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>

 

2. bottom

</body>
</html>

 

결과 값

write.html 에서 post로 값을 받고 나면 list.html로 render해줌

 

render됨
값이 옴

 

'웹 개발 > Node JS' 카테고리의 다른 글

210511 app.get() 에서 여러 개의 미들웨어 (콜백함수) 사용 - next 활용  (2) 2021.05.11
21.05.10 API 사용하는 법  (0) 2021.05.10
21.04.27 Router 로 파일 쪼개기  (0) 2021.04.27
21.04.26 게시판 번호 처리  (0) 2021.04.27
21.04.20 login - Add user 페이지  (0) 2021.04.20
'웹 개발/Node JS' Related Articles more