뭐지? 글 다 적어놓고 임시저장만 해둠 ㄷ 순서꼬엿지만 올리기
파일 생성과 리다이렉션
request.on('end', function(){
var post = qs.parse(body); //입력값을 post에 저장. 즉 post data임.
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`}); //302: 일시적으로 보낸다. location에 적힌 주소로 리다이렉션
response.end();
})
});- 코드 실행 결과
입력 폼에 입력한 타이틀 이름으로 파일이 생성되었고 내용도 저장되었다!
그리고 생성된 파일의 페이지로 바로 넘어간다!
수정 링크 생성
- templateHTML 수정
function templateHTML(title, list, body, control){ //매개변수 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>
`;
}else { //루트가 아닐 때!
fs.readdir('./data', function(error, filelist) {
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
var title = queryData.id;
var list = templateList(filelist);
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`);
//create 옆에 update 링크 생성. 클릭하면 title 값이 쿼리스트링으로 된 링크로 이동
response.writeHead(200);
response.end(template);
});
});
}수정할 정보 전송
else if (pathname === '/update') {
fs.readdir('./data', function(error, filelist) {
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ //불러온 내용을 description에 저장하는 것 같음
var title = queryData.id;
var list = templateList(filelist);
var template = templateHTML(title, list,
`<form action="/update_process" method="post">
<input type="hidden" name="id" value="${title}"> //기존 title 값을 id에 저장
<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);
});
});
}- title 값을 변경하게 되면 변경된 이름으로 파일명을 찾기 때문에 그 전의 값을 저장해야 한다.
- 그래서 HTML에 type="hidden" 사용! 눈에 보이지는 않는 코드이다.
파일명 및 내용 수정
else if (pathname === '/update_process') {
var body ='';
request.on('data', function(data){
body = body + data;
}); //조각조각 데이터가 들어올 때마다 이어서 붙인다.
request.on('end', function(){
var post = qs.parse(body); //입력값을 post에 저장. 즉 post data임.
var id = post.id;
var title = post.title;
var description = post.description;
fs.rename(`data/${id}`, `data/${title}`, function(error) { //id 명으로 되어있는 파일을 title이름으로
fs.writeFile(`data/${title}`, description, 'utf8', function(err){ //내용 수정
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
})
})
});
}- 파일명과 내용이 수정되어 저장된다!
삭제 버튼 구현
else {
fs.readdir('./data', function(error, filelist) {
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
var title = queryData.id;
var list = templateList(filelist);
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`,
`<a href="/create">create</a>
<a href="/update?id=${title}">update</a>
<form action="delete_process" method="post"> //이부분!!!
<input type="hidden" name="id" value="${title}">
<input type="submit" value="delete">
</form>
`);
response.writeHead(200);
response.end(template);
});
});
}- 삭제 버튼을 링크로 구현하면 쿼리스트링 내용이 드러나기 때문에 폼 형태로 구현하여 POST 방식으로 전송한다!
파일 삭제
else if (pathname === '/delete_process') {
var body ='';
request.on('data', function(data){
body = body + data;
}); //조각조각 데이터가 들어올 때마다 이어서 붙인다.
request.on('end', function(){
var post = qs.parse(body); //입력값을 post에 저장. 즉 post data임.
var id = post.id;
fs.unlink(`data/${id}`, function(error) { //경로에 있는 파일을 삭제
response.writeHead(302, {Location: `/`}); //302: 리다이렉션 번호. home으로 이동
response.end();
})
});
}- delete 버튼을 누르면 파일이 삭제되고 Home 페이지로 리다이렉션된다!
객체와 함수
var template = {
HTML: function (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>
`;
}, list:function (filelist) {
var list = '<ul>';
var i = 0;
while(i < filelist.length) {
list = list +`<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i +1;
}
list = list+'</ul>';
return list;
}
}- 자바스크립트에서는 함수가 값으로도 되기 때문에 객체의 값으로 할당이 가능하다.
