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에 출력됨
Author And Source
이 문제에 관하여(express form 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@samidg108/express-form-통신저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)