[express] 간단한 웹앱 제작

생활코딩님 강의와 함께 간단한 웹 앱을 제작해 보았다. 

 

<설계서>

/topic 이 메인페이지

 

 

1. 기본 세팅 

먼저 app_files.js 파일에 express와 post방식을 쓰기 위한 body-parser를 설치해주었다. 

포트 번호 지정도 해주었고 listen 메소드 이용하여 연결을 해주었다. 

db대신 fs(파일) 기능을 쓸 것이기 때문에 fs 모듈도 가져왔다. 

//간단한 웹앱 제작기 230427, 생활코딩 app_files.js
const port = 3000;
var express = require('express'); //express 모듈 가져옴.
var app = express();

//post 사용하기 위한, body-parser 설치.
var body_parser = require('body-parser'); 
app.use(body_parser.urlencoded({ extended: false }));

//파일 시스템 다운
var fs = require('fs');

app.locals.pretty = true; //jade 코드 예쁘게 줄 바꿈 해주는 코드
app.use(express.static('public_files')); //정적 페이지. 
app.set('view engine', 'jade'); //jade, express 템플릿 연결 코드
app.set('views', './views_files'); //jade 파일을 넣어야됨. views가 기본값이라 생략이 가능하긴함.

//app.listen(port); //포트번호 지정. 
app.listen(port, function() {
    console.log('Connected ' + port + ' port!');
});

 

 

2. ' supervisor app_files.js ' 로 실행시, 변경사항이 있어도 재 실행시켜줄 필요가 없다.

설치 (windows) -> npm install supervisor -g

 

 

3. 메인 페이지를 보여주는 메소드 . 파일들의 읽어 화면에 보여주는 view.jade를 보여줌. 

1) ['/topic', 'topic/:id'] -> 둘 중 하나만 들어와도 이 메소드로 들어옴. 

2) fs.readdir -> 폴더 읽기 기능 

3) fs.readFile() -> 파일 읽기 기능 

4) id값이 있을 때와 없을 때를 구별하여 작성해야한다. 

app.get(['/topic', '/topic/:id'], function(req, res) {
    fs.readdir('data', function(err, files){ //폴더 읽기 . 
        if (err) {
            console.log('error 발생!!\n' + err);
            res.status(500).send('Internal Server Error!');
        }
        //topic/:id로 접근했을 때. id값이 있을 때.
        var id = req.params.id;
        if (id) {      
            fs.readFile('data/'+id, 'utf8', function(err, data) {
                if (err) {
                    console.log('error 발생!!\n' + err);
                    res.status(500).send('Internal Server Error!'); //에러 났으면 보여주는 코드 
                }
                res.render('view', {topics:files, title:id, data:data}); // 파일의 내용들까지 전달. 
            });
        } else { //id값이 없을 때. 
            res.render('view', {topics:files, title:'Welcome', data: 'Nodejs Express!'}); 
        }
    });
});

 

4. 파일 쓰기 기능 추가 (post로 받아올 시)

new.jade에서 작성한 form을 파일로 작성해주는 fs.writeFile 기능을 작성해주고 view.jade로 redirect 해주었다. 

app.post('/topic', function(req, res) {
    fs.writeFile('data/'+req.body.title, req.body.des, function(err){
        if (err) {
            console.log('error 발생!!\n' + err);
            res.status(500).send('Internal Server Error!'); //에러 났으면 보여주는 코드 
        }
        res.redirect('/topic/'+req.body.title); //다시 보내버릴 수 있는 code
    });
});

 

5. 글 쓰기 기능을 수행하는 페이지 만들기 

app.get('/topic/new', function(req, res) {
    fs.readdir('data', function(err, files){ //폴더 읽기 . 
        if (err) {
            console.log('error 발생!!\n' + err);
            res.status(500).send('Internal Server Error!');
        }
        res.render('new', {topics:files, title:'Welcome', data: 'Nodejs Express!'}); 
    });
});

 

---

<실행 결과>

new.jade

redirect 된 모습