본문 읽기 - 전체 코드 포함

아래 포스팅 '글 목록 만들기' 글과 이어지는 포스팅 입니다. 

 

---

1. GET 방식에 따라 URL 이 변경되는데 파일명을 받아옵니다. 

 

2. 글 목록을 보여줍니다. 

fs.readdir() 함수로 files 목록을 받아오고, 

jade 템플릿 view.jade 로 topics 이름의 files 목록을 주입합니다. 

 

3. http://127.0.0.1:3000/topic 로 접속하면 파일명 링크만 나옵니다.

 

파일명 링크를 누르면, URL이 http://127.0.0.1:3000/topic/javascript 로 변경되고, 파일 내용도 출력됩니다. 

 

파일명과 내용을 보여주는 view.jade 템플릿을 만듭니다.  

( article 부분만 추가했습니다) 

title, description 이름으로 넘어오는 변수값을 출력합니다. 

 

 

4.

 

2개의 기능이 동시에 필요합니다. 

파일명을 가져오고 파일 이름을 가져오는 함수 

render() 함수의 파라미터로 넘길 객체의 이름과 값을 {} 로 감싸고 콤마로 구분합니다. 

 

 

---

전체코드 

 

app_file.js

// 파일로 만든 웹앱 (03-15)

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var fs = require('fs')

// POST 방식 처리할 때, body 속성을 가공해준다 
app.use(bodyParser.urlencoded({extended: false}))

//템플릿 엔진 (views 들을 위치할 디렉토리 적어준다)
app.set('views', './views_file');
//템플릿 엔진 종류 명시 
app.set('view engine', 'jade');

app.locals.pretty = true;

app.get('/topic/new', function(req, res){
    res.render('new');
})

// 본문 읽기 
app.get('/topic/:id', function(req, res){
    var id = req.params.id

    fs.readdir('data', function(err,files){
        // 파일명을 가져옵니다.
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error')
        }

        fs.readFile('data/'+id, 'utf8', function(err, data){
            // 파일 내용을 가져옵니다. 
            if(err){
                console.log(err);
                res.status(500).send('Internal Server Error')
            }
            // render 인자 : 템플릿파일명, 주입하려는 객체 
            // 파일목록, 제목, 내용
            res.render('view', {topics:files, title: id, description:data});
        })
    })
    
})


// 글 목록 보이기 
app.get('/topic', function(req,res){
    fs.readdir('data', function(err,files){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error')
        }
        // render 인자 : 템플릿파일명, 주입하려는 객체 
        res.render('view', {topics:files})
    })
})

// POST 처리
app.post('/topic',function(req, res){
    var title = req.body.title
    var description = req.body.description
    fs.writeFile('data/'+title, description, function(err){
        if(err){
            console.log(err)
            res.status(500).send('Internal Server Error')
        }// 콜백함수 실행완료 후에 응답 가능하므로, res.send 가 여기에 위치.
        res.send('Success!')
    });
})

// 애플리케이션이 특정 포트를 listen() 하도록.
app.listen(3000, function(){
    console.log('Connected 3000 port ! ');
}) 

 

템플릿 코드  view.jade

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1 Server Side JavaScript
        ul  
            each topic in topics
                li
                    a(href='/topic/'+topic)=topic
        article
            h2=title
            =description

            

 

새 파일 만드는 new.jade 

doctype html
html
    head
        meta(charset='utf-8')
    body
        form(action='/topic', method='post')
            p
                input(type='text' name='title' placeholder='title')
            p
                textarea(name='description')
            p
                input(type='submit')