express form 통신

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>



	<form method="post" action="/result_page">

		User IDw : <input type="text" name="email">

		<br>


		<input type="submit">

	</form>



</body>

</html>
  • index.html

post 형식으로 받았으며 name="email"로 식별

var express = require("express");

var http = require("http");

var path = require("path");

//https://korbillgates.tistory.com/183
//https://catchdream.tistory.com/79
//https://itholic.github.io/js-form/

//https://korbillgates.tistory.com/183

var app = express();

var bodyParser = require('body-parser');
// var result_page = require('./routes/result_page');  // 추가된 코드
var users = require('./routes/users');

var index = require('./routes/index');

var post_page = require('./routes/post_page');  // 추가된 코드

//본 코드에서는 form 통신에 라우터를 구현하지 않았음





app.listen(3000,function(){
	console.log("start!! express servr on port 3000");
	
});

app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));

// app.use('/result_page', result_page);  // 추가된 코드
app.use('/users', users);
app.use('/', index);

app.use('/post_page', post_page);  // 추가된 코드
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

 



app.get('/',function(req,res){
	res.sendFile(__dirname+"/public/index.html");
	
});

app.get('/main',function(req,res){
	res.sendFile(__dirname+"/public/index.html");
	
});

app.post('/result_page', function(req, res){ // *데이터 양이 많아 post 로 뿌려줌 , post로 받을때는 body-parser를 이용해야함(위 require 참고)
	var id = req.body.email;  //index.html에서 post로 받은 name=email 요소를 id변수에 담은 뒤  render 함수를 이용하여 

    res.render('result_page.ejs',{title: 'Express', id: id}); //* ejs(html)파일 보여줄 때 이렇게 render() 사용

});

  • 주석 참조
<!DOCTYPE html> 
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <h2>result page</h2>
        <p>id: <%= id %></p> 
        
    </body>
</html>

email이 id에 출력됨

좋은 웹페이지 즐겨찾기