Node.js 연동 ajax 기본
폴더수준으로 관리하기 위해서는 로컬프로젝트로 생성해야 함
1. 폴더생성
2. npm init
3. npm install --save express
단순 로그인과 route등을 포함한 기본형은 아래와 같다.
-server.js
단순 로그인부분을 포함한 ajax 연동 기본형
var fs = require('fs');
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
var http = require('http').Server(app);
var bodyParser = require('body-parser'); // 책과는 다르게 body-parser 모듈이 express와는 따로 설치해줘야함. cmd에서 "npm installs body-parser" <br/>
// body-parser은 POST요청 데이터를 추출하는 미들웨어임. 이걸 사용하면 request객체에 body 속성이 부여됨.
// 미들웨어를 설정합니다.
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true })); // extended:true를 해줘야 한다 .왜냐하면 url인코딩이 계속 적용될지 1번만 적용할지 묻는 것이기 때문
app.use(cookieParser());
app.use(express.static(__dirname));
// 라우터를 설정합니다.
app.get('/', function(request, response){
if ( request.cookies.auth){
//response.send('<h1>Login Success</h1>');
response.sendfile('starter.html');
} else {
response.redirect('/login');
}
});
app.get('/login', function(request, response){
response.sendfile('login.html');
});
app.get('/logs', function(request, response){
if ( request.cookies.auth){
//response.send('<h1>Login Success</h1>');
response.sendfile('logs.html');
} else {
response.redirect('/login');
}
});
app.post('/login', function(request, response){
// 쿠키를 생성합니다.
var login = request.body.login; // 변수를 받을때 post 방식은 request 안에 body 객체에서 받아온다.
var password = request.body.password; // var login = request.param("login")으로 받아오는 것도 가능 이건 get 방식
// 출력합니다.
console.log(login, password);
console.log(request.body);
// 로그인을 확인합니다.
if(login == 'admin' && password == '1234'){
// 로그인 성공
response.cookie('auth', true);
response.redirect('/');
} else {
// 로그인 실패
response.redirect('/login');
}
});
app.get("/test", function(request, response) {
response.sendfile('test.html');
});
app.post('/ajax_test', function(request, response){
console.log(request.body);
/*var pr1 = request.param('param1');
var pr2 = request.param('param2');
response.send({
param1: pr1,
param2: pr2,
result: "data end!"
});*/
response.send(request.body);
});
app.post('/logout', function(request, response){
response.clearCookie('auth');
response.redirect('/');
});
app.get("*", function(request, response) {
response.sendfile('404.html');
});
http.listen(1337);
console.log('Server running at http://127.0.0.1:1337/');
http.listen('3000', function() {
console.log("server on!");
})
-test.html
단순 ajax 연동 기본형
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
$('#calcBtn').click(function() {
$.ajax({
url : 'http://127.0.0.1:1337/ajax_test',
method : 'POST',
dataType : 'json',
data : {param1 : '입력값1', param2 : '입력값2'},
success : function(response) {
$('#div1').html(response.result);
$('#div2').html(response.param1);
$('#div3').html(response.param2);
}
})
})
});
</script>
</head>
<body>
<button id='calcBtn'>test</button>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</body>
</html>