728x90
데이터 전송하기
1. create 링크만들기
/**
* 본문 셋팅 함수
* @param {*} title 제목
* @param {*} list 글 목록
* @param {*} body 본문
* @returns 중복코드 => template
*/
function templateHTML(title, list, body) {
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
<a href="/create">create</a> //여기
${body}
</body>
</html>
`;
}
2. 분기처리한 곳에 create 조건 추가해주기
if(pathname === '/') { //루트일 때 실행 (오류X)
...생략...
} else if(pathname === '/create') { //create 일 때
fs.readdir('./data',function(error, filelist) {
var title = 'WEB - create';
var description = 'Hello, Node.js';
var list = templateList(filelist);
var template =templateHTML(title, list, `
<form action="http://localhost:3000/create_process" method="post">
<p><input type="text" name="title" placeholder="title" /></p>
<p>
<textarea name="description" placeholder="description" ></textarea>
</p>
<p><input type="submit" /></p>
</form>
`);
response.writeHead(200);
response.end(template); //template 문자열 응답
});
} else { //루트가 아닐 때 실행(오류 O)
...생략...
}
3. 결과
아직 create_process가 없어서 그렇지 데이터는 잘 넘어간다
데이터 받기
1. 분기처리한 곳에 /create_process 조건추가하기
if(pathname === '/') { //루트일 때 실행 (오류X)
...생략...
} else if(pathname === '/create') { //create 일 때(화면)
...생략...
} else if(pathname === 'create_process') { //create_process일때(처리)
response.writeHead(200);
response.end('success');
} else { //루트가 아닐 때 실행(오류 O)
...생략...
}
2. qeuerystring 모듈을 이용하여 post값 확인
Node.js에서 웹 브라우저로 접속할 때마다 createServer의 콜백함수를 호출한다.
이때 두개의 인자를 전달하는데, request= 브라우저가 보낸 정보, response = 응답할때 브라우저에 전송할 정보이다.
즉 form에서 POST형식으로 보낸 데이터는 request에 있다.
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var app = http.createServer(function(request, response) {
var _url = request.url;
var queryData = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
if(pathname === '/') { //루트일 때 실행(오류X)
...생략...
}else if(pathname === '/create_process') {
var body = '';
request.on('data', function(data) {
//조각조각 나눠서 데이터를 수신할 때마다 호출되는 콜백 함수
//데이터를 처리하는 기능을 정의
body = body + data;
});
request.on('end', function(data) {
//더이상 수신할 정보가 없으면 호출되는 콜백 함수
//데이터 처리를 마무리하는 기능을 정의
var post = qs.parse(body);
console.log(post);
});
} else {
...생략...
}
...생략...
3. 값만 추출하기
else if(pathname === '/create') { //create 눌렀을 때
fs.readdir('./data',function(error, filelist) {
var title = 'WEB - create';
var description = 'Hello, Node.js';
var list = templateList(filelist);
var template =templateHTML(title, list, `
<form action="http://localhost:3000/create_process" method="POST">
<p><input type="text" name="title" placeholder="title" /></p>
<p>
<textarea name="description" placeholder="description" ></textarea>
</p>
<p><input type="submit" /></p>
</form>
`);
response.writeHead(200);
response.end(template); //template 문자열 응답
});
}
파일생성
코드
else if(pathname === '/create_process') {
var body = '';
request.on('data', function(data) {
//조각조각 나눠서 데이터를 수신할 때마다 호출되는 콜백 함수
//데이터를 처리하는 기능을 정의
body = body + data;
});
request.on('end', function(data) {
//더이상 수신할 정보가 없으면 호출되는 콜백 함수
//데이터 처리를 마무리하는 기능을 정의
var post = qs.parse(body);
var title = post.title;
var description = post.description;
// 파일 , 파일에 쓸 내용 , 인코딩 방식, callback
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(200);
response.end('success');
});
});
}
결과
다시 홈으로 보내주기(리다이렉션)
// 파일 , 파일에 쓸 내용 , 인코딩 방식, callback
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id={title}`});
response.end();
});'{ "Hello World!" }; > Node.js' 카테고리의 다른 글
| (Node.js) 템플릿 기능 정리(객체지향), 모듈활용 (0) | 2023.12.12 |
|---|---|
| (Node.js) 글 수정, 삭제 하기 (0) | 2023.12.11 |
| (Node.js) 패키지 매니저(npm)와 PM2 (1) | 2023.12.10 |
| (Node.js) 동기, 비동기 그리고 콜백 (0) | 2023.12.10 |
| TIL 231210 (0) | 2023.12.10 |