폼 작성 전에 먼저 app.js 소스코드를 살펴보도록 하겠습니다
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); // 여기가지 모듈을 불러오는 부분입니다.
var routes = require('./routes/index'); var users = require('./routes/users'); // routes의 경로를 변수명으로 지정하고 아래 app.use('/', routes) 부분으로 경로를 넘겨준게 보이네요.
var app = express(); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // 뷰 엔진으로 ejs를 사용했다고 나옵니다.
app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes);
// url 경로에서 '/' 일 경우 위에서 설정한 경로에 존재하는 routes를 사용하라고 하네요. app.use('/users', users);
// '/users' 일 경우 위에서 지정한 users 경로에 있는 routes로 되어있네요.
이제 view 에서 html 폼(form)을 하나 만들어서 값을 입력하고 서버로 보내보겠습니다.
기존에 있던 index.ejs 안에 body 태그 안에 form 태그를 넣겠습니다.
<body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <form action="/name" method="POST"> <input type="text" name = "user_name"> <button type="submit">submit</button> </form> </body> |
/name 경로로 form 태그 안에 있는 user_name을 POST로 보내도록 했습니다.
이제 app.js로 가서 소스코드를 추가 하도록 하겠습니다.
var name = require('./routes/name');
-- 생략 --
app.use(bodyParser.urlencoded({extended:true}));
// 중간에 이 부분에서 extended : false로 되어있을텐데 이걸 true로 바꿔주세요.
-- 생략 --
app.use('/name', name);
이제 routes 폴더로 가서 name.js 를 하나 만듭니다.
var express = require('express'); var router = express.Router(); router.post('/', function(req, res){ res.send('Name : ' + req.body.user_name); console.log('Name : ' + req.body.user_name); });
module.exports = router;
이제 모든 작성이 끝났습니다. 터미널에서 npm start를 입력하고 브라우저를 열어 localhost:3000으로 갑니다
이제 이름 칸에 이름을 입력하고 submit 해봅니다.
/name 으로 이동했고 입력한 이름이 표시되는 걸 확인할 수 있습니다.
터미널을 확인하면 아래와 데이터를 받은걸 볼 수 있습니다.
GET / 200 15.020 ms - 334 GET /stylesheets/style.css 304 4.766 ms - - Name : mike POST /name 200 24.505 ms - 11
만약 폼 처리 후 특정 경로로 이동하고 싶을 경우 routes/name.js 에서 res.redirect(303, '/경로'); 를 추가하면 됩니다.
'node.js & express' 카테고리의 다른 글
| 4. express 템플릿 만들기 application generator (0) | 2016.01.11 |
|---|---|
| 3. Node.js 프레임워크인 express 설치하기 (0) | 2016.01.08 |
| 2. Node.js 를 웹 서버로 실행하기. (0) | 2016.01.06 |
| 1. Node.js 설치하기 (ubuntu) (0) | 2016.01.05 |