* 해당 포스터는 생활코딩 강의를 정리한 내용입니다.
[ update_process 쪽으로 데이터를 전송했기 때문에 전송한 데이터를 받아서 처리하는 방법 ]
update_process에서도 post방식으로 들어온 데이터를 받아야함
< post 방식으로 데이터를 받는 코드 >
var body ='';
request.on('data',function(data){
body = body + data
});
request.on('end', function(){
var post = qs.parse(body);
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
})
});
1. title을 변경했을 경우 파일의 title을 바꿔줘야 한다.
fs.rename(`data/${id}`, `data/${title}`, function(){
} )
첫번째 인자인 data/${id} 값의 title을 두번째 인자인 data/${title}로 바꿔주고 callback 함수를 실행
rename 메소드의 첫번째 파라미터로는 수정하고자 하는 예전 파일이름이고, 두번째 파라미터로는 바꿀 새로운 이름,
세번째 파라미터로는 이름을 변경하는 작업이 끝나면 실행할 callback 함수이다.
2. 파일의 내용을 변경
fs.rename(`data/${id}`, `data/${title}`, function(error){
//파일의 내용 변경
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
})
})
파일의 이름을 수정한 다음에는 writeFile를 사용해서 수정된 이름에 해당되는 파일에 받은 description 정보를 줘서
처리하고 그 id값으로 들어가면 된다.
var http = require('http');
var fs = require('fs');
var url = require('url');
function templateHTML(title,list,body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`
}
function templateList(filelist){
var list = '<ul>';
var i = 0;
while( i < filelist.length ){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`
i += 1
}
list = list + '</ul>';
return list;
}
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;
var qs = require('querystring')
//qs는 querystring이라는 NodeJS가 가지고 있는 모듈을 가져온다.
if( pathname === '/'){
if( queryData.id === undefined ){ //home
fs.readdir('./data', function(error, filelist) {
var title = 'Welcome'
var description = 'Hello, Node.js'
var list = templateList(filelist);
var template = templateHTML(title,list,`<h2>${title}</h2>
<p>${description}</p>`,`<a href="/create">create</a>`);
response.writeHead(200);
response.end(template);
})
} else { //id 페이지를 선택한 페이지
fs.readdir('./data', function(error, filelist) {
fs.readFile(`data/${queryData.id}`, 'utf8', function(err,description){
var list = templateList(filelist);
var title = queryData.id
var template = templateHTML(title,list,`<h2>${title}</h2>
<p>${description}</p>`,`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`);
response.writeHead(200);
response.end(template);
});
});
}
}
else if( pathname === '/create' ){
fs.readdir('./data', function(error, filelist) {
var title = 'WEB-Create'
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);
});
}
else if( pathname === '/create_process' ){
var body ='';
request.on('data',function(data){
body = body + data
});
request.on('end', function(){
var post = qs.parse(body);
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
})
});
}
else if (pathname === '/update') {
fs.readdir('./data', function(error, filelist) {
fs.readFile(`data/${queryData.id}`, 'utf8', function(err,description){
var list = templateList(filelist);
var title = queryData.id
var template = templateHTML(title,list,
//forn에서 submit을 했을 때 사용자가 정보를 update_process로 보내게 변경
`<form action="http://localhost:3000/update_process" method="post">
<input type="hidden" name="id" value="${title}">
<p><input type="text" name="title" placeholder="title" value='${title}'></p>
<p>
<textarea name="description" placeholder="description">${description}</textarea>
</p>
<p>
<input type="submit">
</p>
</form>`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
)
response.writeHead(200);
response.end(template);
});
});
}
else if (pathname === '/update_process') {
var body ='';
request.on('data',function(data){
body = body + data
});
request.on('end', function(){
var post = qs.parse(body);
var title = post.title;
var description = post.description;
var id = post.id
fs.rename(`data/${id}`, `data/${title}`, function(error){
//파일의 내용 변경
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
})
})
});
}
else {
response.writeHead(404);
response.end('Not Found');
}
});
app.listen(3000);'Back-End > App' 카테고리의 다른 글
| [ NodeJS - APP ] 글 삭제 기능 완성 (0) | 2021.08.12 |
|---|---|
| [ NodeJS - APP ] 글 삭제 버튼 구현 (0) | 2021.08.12 |
| [ NodeJS - APP ] 글 수정 정보 전송 (0) | 2021.08.12 |
| [ NodeJS - APP ] 글 수정 링크 생성 (0) | 2021.08.12 |
| [ NodeJS - APP ] 파일 생성과 리다이렉션 (0) | 2021.08.12 |
