-
5. node.js - express를 이용한 MVC모델 구축[간단한 웹서버] -시리즈3:form tag postIT&개발/node.js 2015. 8. 13. 00:39728x90반응형
parameter Passing 마지막 방법인 form tag post 방식을 이야기 하겠다.
여태까지 말한 3가지가 parameter Passing의 전부이다. 이 방식은 post방식 둘다 가능하다.
시리즈 1,2 와의 차이점이 있다면 바로 body-parser라는 모듈을 이용하는 것이다.
이것은 express에는 없는 기능을 보완하기 위하여 생성된다.
거두절미하고 본문을 으로 들어가겠다. 프로젝트의 구성은
이런형식이다. 다른 파일들도 많은데 이것을 생략한 이유는 사용하지 않기 때문이다 우리는 위에서 명시한 파일만 사용할 것이다.
순서대로 코딩해보자.
1.우선 패키지.json을 봐서 body-parser 와 ejs를 추가하자.
{
"name": "usingExpress_form_tag_post",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"ejs":"*"
}
}2. parameterPassing.js 코딩
// 1. 필요한 module require
var http = require("http"),//웹서버를 구축하기위해서
express = require("express"),//routing 기능을 사용하기 위해서
app = express(),//express의 함수를 한번실행한 결과를 app로 가진다.
path = require("path"),//경로지정을 조금 더 편하게 하기 위해서
bodyParser=require("body-parser");//form tag post 방식에서는 post형식이므로 body를 탐색하기위해 필요
// 2. routing module require
var routes = require("./routes/param");
// 3. view 폴더 들과 엔진을 설정
app.set("views",path.join(__dirname,"views"));
app.set("view engine","ejs");
// 4. express
//app가 못하는 작업을 bodyParser가 하도록 한다. 이때 use의 순서가 바뀌면 에러가 난다.
app.use(bodyParser());
app.use("/",routes);
// 5. 웹서도 기동
http.createServer(app).listen(5000,"localhost");
console.log("start.... - 5000");3. login.html 파일 코딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://localhost:5000/" method="post">
ID : <input type="text" name="uID"><br>
PW : <input type="text" name="uPW"><br>
<input type="submit" value="서버에 접속해요!!">
</body>
</html>4. param.js 코딩
var express = require("express"),
router = express.Router();
router.get("/",function(req,res){//맨처음 접속하면 login.html 파일이 실행되도록 한다.
res.sendFile("login.html",{
root : "./"//이것을 한 이유는 login.html 이 현재 폴더가 아닌 상위폴더에 존재하므로
//"../"를 하면은 상대적 상위폴더 개념인데 이것도 안되고
//__dirname 은 현재 폴더인데 당연히 안되서
//"./" 프로젝트의 기본 폴더를 지칭하는 이것을 사용
})
});
//"/"가 들어와도 get과 post방식의 차이로 실행되는 것이 다르다.
router.post("/",function(req,res){
//html form으로 부터 데이터를 받아요!!
//post를 받으려면 body-parser라는 module을 이용해야지 편하게 받아요
var id = req.body.uID;//login.html에서 지정한 id를 req.body라는 새로운 기능을 이용하여 추출
var pw = req.body.uPW;//login.html에서 지정한 id를 req.body라는 새로운 기능을 이용하여 추출
if(id=="test"&&pw=="1234"){//임시적으로 비번과 id를 저장해서 결과에 따라 해당 파일 출력
res.render("loginSuccess");
}
else{
res.render("loginFail");
}
});
module.exports = router;5. loginFaile.ejs / loginSuccess.ejs 파일 정의
<loginFaile.ejs>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>로그인에 실패했어요.</h1>
</body>
</html><loginSuccess.ejs>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>로그인에 성공했어요.</h1>
</body>
</html>이것으로 모든 파일 코딩이 완료 되었다. 전체적인 파일의 위치를 다시 확인하자면
자 이제 파일을 실행해보자
1. parameterPassing.js 파일 실행을 하면 콘솔창에 출력이 된다.
2. localhost:5000으로 접속한다.
3. id / pw 를 입력한다.
4. 올바르게 입력되었다면 성공
5. 올바르게 입력되지 않았다면 실패
6. 실패 페이지 확인할수 있다.
이것으로 우리는 form tag post 형식까지 배워보았다. 간단한거 같지만 만약 이 페이지를 보지 않았다면 엄청난 삽질을 해야했을 것이다. 왜냐하면 node 관련된 자료가 생각보다 적기 때문이다.
이것으로 paramete Passing 에 대한 이야기를 모두~~ 끝마칠수 있다!!
반응형'IT&개발 > node.js' 카테고리의 다른 글
Node.js - 노드 : 특징 (0) 2015.09.01 node.js를 이용하여 mysql에 접속하기 (1) 2015.08.13 4. node.js - express를 이용한 MVC모델 구축[간단한 웹서버] -시리즈2:QueryString (3) 2015.08.12 3. node.js - express를 이용한 MVC모델 구축[간단한 웹서버] -시리즈1 (2) 2015.08.12 3. node 파일시스템 모듈 fs 사용하기. (0) 2015.08.12
