URL 요청파라미터

post 방식 요청 path (Router) 의 맨 뒤의 경로를 값으로 쓰겠다는 것



형식 :

path/:name


클라이언트에서 요청할떄 name 으로 요청 보냄




nodejs : Express, Router 라우터로 경로에 대한 분기 처리

http://3dmpengines.tistory.com/1867


글을 먼저 참고



전과 달라진 부분만 강조하여 표시하면



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
 
<html>
<head>
    <meta charset="utf-8" />
    <title>로긴</title>
</head>
<body>
 
    <h1>로그인 Route</h1>
    <br />
    <form method="post" action="/process/Login/add">
        <table>
            <tr>
                <td><label>아이디</label></td>
                <td><input type="text" name="id"></td>
            </tr>
            <tr>
                <td><label>비번</label></td>
                <td><input type="text" name="passwords"></td>
            </tr>
        </table>
        <td><input type="submit" value="전송" name=""></td>
    </form>
 
</body>
</html>

 

submit 을 할때 경로 끝에 /add 를 붙여 이것이 경로가 아닌 파라미터로 넘어가게 한다






서버측 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var express = require('express');
var http = require('http');
var serveStatic = require('serve-static');      //특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 열어주는 역할
var path = require('path');
 
var app = express();      //express 서버 객체
 
var bodyParser_post = require('body-parser');       //post 방식 파서
 
app.set('port'3000);
 
 
//미들웨어들 등록 시작, 아래 미들웨어들은 내부적으로 next() 가실행됨
 
//join은 __dirname : 현재 .js 파일의 path 와 public 을 합친다
//이렇게 경로를 세팅하면 public 폴더 안에 있는것을 곧바로 쓸 수 있게된다
app.use(serveStatic(path.join(__dirname, 'public')));
 
 
//post 방식 일경우 begin
//post 의 방식은 url 에 추가하는 방식이 아니고 body 라는 곳에 추가하여 전송하는 방식
app.use(bodyParser_post.urlencoded({ extended: false }));            // post 방식 세팅
app.use(bodyParser_post.json());                                     // json 사용 하는 경우의 세팅
//post 방식 일경우 end
 
 
 
//라우터를 사용 (특정 경로로 들어오는 요청에 대하여 함수를 수행 시킬 수가 있는 기능을 express 가 제공해 주는것)
var router = express.Router();
 
router.route('/process/login/:name').post(                      //이 경로로 들어오는 것은 post 방식으로 처리
    function (req, res) {
        console.log('/process/login:name 라우팅 함수에서 받음');
 
        var paramName = req.params.name; //이런 방식으로 경로에서 요청파라미터의 값을 얻어온다
 
        var paramID = req.body.id || req.query.id;
        var pw = req.body.passwords || req.query.passwords;
 
        res.writeHead(200, { "Content-Type""text/html;characterset=utf8" });
        res.write(paramName + ' ,  ' + paramID + " : " + paramID);
        res.end();
    }
);
 
app.use('/', router);       //라우트 미들웨어를 등록한다
 
 
//웹서버를 app 기반으로 생성
var appServer = http.createServer(app);
appServer.listen(app.get('port'),
    function () {
        console.log('express 웹서버 실행' + app.get('port'));
    }
);
 




입력 화면 :






전송 클릭



결과 화면 : 




실행 결과를 보면 add 가 post 보내기 방식과 Router를 통해 경로중 끝값인 :name 에 매칭되어 보내졌다는 결과를 볼 수 있다



파라미터를 보내는 방식은 get ,post , 라우터를 통한 파라미터 보내기 방식인 3가지가 있다






등록하지 않은 경로에 대한 예외처리는 다음 처럼 할 수 있다





상단 서버코드에서 접근 가능한 경로외의 경로 전체에  대한 코드만 추가해주면 되는데 다음과 같다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//라우터를 사용 (특정 경로로 들어오는 요청에 대하여 함수를 수행 시킬 수가 있는 기능을 express 가 제공해 주는것)
var router = express.Router();
 
router.route('/process/login/:name').post(                      //이 경로로 들어오는 것은 post 방식으로 처리
    function (req, res) {
        console.log('/process/login:name 라우팅 함수에서 받음');
 
        var paramName = req.params.name;
 
        var paramID = req.body.id || req.query.id;
        var pw = req.body.passwords || req.query.passwords;
 
        res.writeHead(200, { "Content-Type""text/html;characterset=utf8" });
        res.write(paramName + ' ,  ' + paramID + " : " + paramID);
        res.end();
    }
);
 
app.use('/', router);       //라우트 미들웨어를 등록한다


app.all('*',
    function (req, res)
    {
        res.status(404).send('<h1> 요청 페이지 없음 </h1>');
    }
);
 
 





'*' 정상경로가 아닌 모든 경우의 경우  res.status(..)  로 예외처리를 할 수 있다




위 이미지에 표시된 경로는 서버 public 폴더 안에 없는 경로임으로 위와 같은 예외처리 문장이 나타나게 됩니다



좀 더 예외처리를 향상되게 하고 싶다면 'express-error-handler'  모듈을 사용하여 예외처리를 할 수 있습니다


이 기능은 해당 에러에 대한 에러 페이지를 미리 만들놔 그 페이지를 보여주는 방식입니다






Path 를 찾지 못하는 경우의 flow






반응형

+ Recent posts