-static 미들웨어-
npm install serve-static --save 설치
샘플1.
var static = require('serve-static')
app.use('/public',static(path.join(__dirname,'public')));위 코드처럼 설정을 하면 폴더1/public/index.html 에서 index.html에 접근하려면 바로 http://localhost:3000/index.html로 바로 접근 가능하다.
-body-parser 미들웨어-
app7.js
/**
* POST 방식으로 전달된 파라미터 확인하기
*
* (1) 웹 브라우저에서 http://localhost:3000/public/login.html 페이지 열고 요청
* (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
* GET 방식으로 요청 시에는 웹브라우저에서 아래 URL로 요청해야 함
* http://localhost:3000?id=test1&password=123456
*
* @date 2016-10-25
* @author Mike
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use(static(path.join(__dirname, 'public')));
// 미들웨어에서 파라미터 확인
app.use(function(req, res, next) {
console.log('첫번째 미들웨어에서 요청을 처리함.');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
res.write('<div><p>Param id : ' + paramId + '</p></div>');
res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
res.end();
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로그인 테스트</title>
</head>
<body>
<h1>로그인</h1>
<br>
<form method='post'>
<table>
<tr>
<td><label>아이디</label></td>
<td><input type='text' name="id"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="password"></td>
</tr>
</table>
<input type="submit" value="전송" name=''>
</form>
</body>
</html>
-라우터 미들웨어-
사용자가 요청한 기능이 무엇인지 패스를 기준으로 구별함.
example
//라우터 객체 참조
var router = express.Router();
//라우팅 함수 등록
router.route('/process/login').get(...);
router.route('/process/login').post(...);
...
//라우터 객체를 app 객체에 등록
app.use('/',router);↓
router.route(요청패스).get(실행될 함수);
router.rout(요청패스).post(실행될 함수);| 메소드 이름 | 설명 |
| get(callback) | get 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. |
| post(callback) | post 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. |
| put(callback) | put 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. |
| delete(callback) | delete 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. |
| all(callback) | 모든 요청 방식을 처리하며 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. |
app8.js
/**
* Router 객체를 이용해 라우팅 함수 등록하기
*
* (1) 웹 브라우저에서 http://localhost:3000/public/login2.html 페이지 열고 요청
* (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
*
* @date 2016-10-25
* @author Mike
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use('/public', static(path.join(__dirname, 'public')));
// 라우터 객체 참조
var router = express.Router();
// 라우팅 함수 등록
router.route('/process/login').post(function(req, res) {
console.log('/process/login 처리함.');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
res.write('<div><p>Param id : ' + paramId + '</p></div>');
res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
res.write("<br><br><a href='/public/login2.html'>로그인 페이지로 돌아가기</a>");
res.end();
});
// 라우터 객체를 app 객체에 등록
app.use('/', router);
// 등록되지 않은 패스에 대해 페이지 오류 응답
app.all('*', function(req, res) {
res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>');
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
login2.html(Action 속성 추가)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로그인 테스트</title>
</head>
<body>
<h1>로그인</h1>
<br>
<form method='post' action="/process/login">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type='text' name="id"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="password"></td>
</tr>
</table>
<input type="submit" value="전송" name=''>
</form>
</body>
</html>
-URL 파라미터 사용하기-
app8_02.js(router.route 경로에 /:name 추가)
req.params.name;-> param에서 이름을 가져옴
/**
* Router 객체를 이용해 라우팅 함수 등록하기
* POST로 요청할 때 URL 파라미터를 params 객체로 확인
*
* (1) 웹 브라우저에서 http://localhost:3000/public/login3.html 페이지 열고 요청
* (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
*
* @date 2016-10-25
* @author Mike
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use('/public', static(path.join(__dirname, 'public')));
// 라우터 사용하여 라우팅 함수 등록
var router = express.Router();
router.route('/process/login/:name').post(function(req, res) {
console.log('/process/login/:name 처리함.');
var paramName = req.params.name;
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
res.write('<div><p>Param name : ' + paramName + '</p></div>');
res.write('<div><p>Param id : ' + paramId + '</p></div>');
res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
res.write("<br><br><a href='/public/login3.html'>로그인 페이지로 돌아가기</a>");
res.end();
});
app.use('/', router);
// 등록되지 않은 패스에 대해 페이지 오류 응답
app.all('*', function(req, res) {
res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>');
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
login3.html(액션에 경로추가)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로그인 테스트</title>
</head>
<body>
<h1>로그인</h1>
<br>
<form method='post' action="/process/login/mike">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type='text' name="id"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="password"></td>
</tr>
</table>
<input type="submit" value="전송" name=''>
</form>
</body>
</html>/prcoess/login/mike <-> /process/login/:name 서로 매핑해준다.
'For developer > Node.js' 카테고리의 다른 글
| (Node.js)파일 업로드 기능 (0) | 2020.09.08 |
|---|---|
| (Node.js)쿠키와 세션 (0) | 2020.09.08 |
| (Node.js)익스프레스로 웹 서버 만들기(1) (0) | 2020.09.07 |
| (Node.js)서버관련 (0) | 2020.09.07 |
| (Node.js)파일처리 관련(1) (0) | 2020.09.06 |
