Node.js Express - GET Method 전송

이전 게시글에서 노드 부트스트랩을 사용하면서 임의의 값을 입력받는 입력 폼을 만들었어요.

 

전송하기 버튼을 누르면 값 1, 값 2에 있는 값이 result 페이지로 전송됩니다.

 

 

index.ejs

 

<%- include("include/header") -%>

<div class="container w-50">
	<div class="form-floating mb-3">
		<h1>익스프레스 메인페이지 입니다.</h1>
	</div>
	<h3>메소드를 GET으로 보내기</h3>
	<form action="result" method="get">
		<div class="form-floating mb-3">
			<div class="form-floating mb-3">
				<input type="text" class="form-control" name="val1">
				<label for="floatingInput">값 1 : </label>
			</div>
			<div class="form-floating mb-3">
				<input type="text" class="form-control" name="val2">
				<label for="floatingPassword">값 2 : </label>
			</div>
		</div>
		<div class="d-grid gap-2 mb-3">
			<input type="submit" class="btn btn-primary" value="전송하기">
		</div>
	</form>
</div>

<%- include("include/footer") -%>

 

폼으로 값을 넘겨줍니다.

 

app.js

 

// express
var express = require('express');
var app = express();

// ejs
app.set('views', __dirname + '/views');
app.set("view engine", "ejs");

// bootstrap
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // bootstrap JS
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // bootstrap CSS

app.get('/', function (req, res) {
	res.render('index');
});

app.get('/result', function (req, res) {
	var val1 = req.query.val1;
    var val2 = req.query.val2;
	res.render('result',{'val1':val1, 'val2':val2});
});

app.listen(3000, function () {
	console.log("3000포트로 노드서버 오픈!!");
})

 

js에서 넘겨준 값을 받아서 결과 페이지에 데이터를 전달하고

 

result.ejs

 

<%- include("include/header") -%>

<div class="container w-50">
	<h1>val1 : <%=val1%></h1>
	<h1>val2 : <%=val2%></h1>
	<div class="d-grid gap-2">
		<a href="/" class="btn btn-primary">돌아가기</a>
	</div>
</div>

<%- include("include/footer") -%>

 

결과 페이지에서 전달받은 데이터를 출력해 줍니다.