본문으로 바로가기

자바스크립트 기반 간단한 웹(nodejs)

category 웹/Nodejs 2019. 7. 17. 15:26

app_file.js
//app_file.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var fs = require('fs');
app.locals.pretty=true;
app.set('views','./views_file');
app.set('view engine','jade');
app.use(bodyParser.urlencoded({extended:false}));

//글 작성 form
app.get('/topic/new',function(req,res){
    fs.readdir('data',function(err,files){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('new',{topics:files});

    });
});
// 글 목록 보여주기(view.jade 랜더링) => 파일 명을 보내서 for문을 돌림 + 상세조회 (중복성 제거)
app.get(['/topic','/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');
        }

        if(id){
            //id값이 있을 때 글 상세조회
            fs.readFile('data/'+id,'utf-8',function(err,data){
                if(err){
                    console.log(err);
                    res.status(500).send('Internal Server Error');
                }
                //view.jade에 파일명 보내기
                res.render('view',{topics:files,title:id,description:data});
            });
        }else{
            //id 값 없을 때 view에 파일들을 보내주자. li로 만들어질 동적 생성
            //description 과 title은 view.jade에서 아무것도 없이 전송되기때문에 그냥 deafult값으로 전달
            res.render('view',{topics:files,title:'Welcome',description:'Hello Javascript for server'});         
        }
    });
});
//글 작성 하고 저장
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.redirect('/topic/'+title);
    });
});
app.listen(3000,function(){
    console.log("Connected, 3000 port!");
});
view.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)=topic

        article
            h2= title
            = description
        div
            a(href='/topic/new') new
new.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)=topic

        article
            form(action='/topic' method='post')
                p
                    input(type='text' name='title' placeholder='title')
                p
                    textarea(name='description')
                p  
                    input(type='submit')
data 디렉토리(입력한 글을 파일로 저장함)

결과

localhost:3000/topic(메인페이지 글 목록)

localhost:3000/topic/new(새로운 글 작성페이지)

localhost:3000/topic/Spring(글 상세 조회)