728x90
글 수정하기
수정 링크 생성
- update 는 글을 수정하는 기능이기 때문에 쿼리스트링으로 id값을 받았을때만 보여지게 하고 싶음
- 홈 화면 = create만/ 페이지 화면 = create,update 둘다 / create 화면 = 자체 form태그 사용중 공백 삽입
- update 할때 수정대상을 알려줘야 하기때문에 쿼리 스트링으로 id를 넘겨줘야함
/**
* 본문 셋팅 함수
*/
function templateHTML(title, list, body, control) {
return `
...생략...
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
...생략...
`;
}
-----------------------------------------------------
//홈
var template =templateHTML(title, list,
`<h2>${title}</h2><p>${description}</p>`,
`<a href="/create">create</a>`);
//페이지
var template =templateHTML(title, list,
`<h2>${title}</h2><p>${description}</p>`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`);
//create
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>
`, '');
수정 화면 만들기
- 수정 폼 필요함
- 수정해야 할 데이터를 미리 넣어둬야 하기 때문에 파일읽기 기능이 필요함
- 수정하는 정보(변경할 title)와 우리가 수정하고자 하는 정보(기존 title)를 구부내서 전송해야함
- create 화면 블럭을 복사해서 수정
- !_내가 readdir함수랑 readFile함수의 순서를 바꿔 썻더라...
- !_form action 경로 절대경로 >>> 상대경로로 변경
else if(pathname === '/update') { //update일 때 실행
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,`
<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);
});
});
}
수정 처리 하기
- 웹 페이지 제목 = 파일 이름 이므로, 첫번째로 파일 이름을 변경해야함 nodejs file rename
- 그 후 내용 수정 하기
- create_process 복사하여 수정
else if(pathname === '/update_process') { //update_process일 때 실행
var body = '';
request.on('data', function(data) {
body = body + data;
});
request.on('end', function(data) {
var post = qs.parse(body);
var id = post.id; //기존 title
var title = post.title; //변경할 title
var description = post.description;
fs.rename(`data/${id}`,`data/${title}`, function(err){
if(err)
console.log(err);
else {
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
});
}
});
});
}
결과
글 삭제하기
삭제 버튼 만들기
- 화면이 필요하지 않다 > 페이지 이동이 필요하지 않다 > 주소 노출 시(외부 유출시) 보안사고가 발생할 수 있다
- 즉 POST 방식으로 데이터를 넘겨줘야 한다(링크 x 폼O)
//페이지
var template =templateHTML(title, list,
`<h2>${title}</h2><p>${description}</p>`,
`<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>`);
삭제 처리 하기
- nodejs delete file 검색
- 리다이렉션을 홈으로
else if(pathname === '/delete_process') { //delete_process일 때 실행
var body = '';
request.on('data', function(data) {
body = body + data;
});
request.on('end', function(data) {
var post = qs.parse(body);
var id = post.id;
fs.unlink(`data/${id}`, function(err){
response.writeHead(302, {Location: `/`});
response.end();
});
});
}
결과
'{ "Hello World!" }; > Node.js' 카테고리의 다른 글
| (Node.js) 입출력 정보 보안 (0) | 2023.12.12 |
|---|---|
| (Node.js) 템플릿 기능 정리(객체지향), 모듈활용 (0) | 2023.12.12 |
| (Node.js) Form 이용하여 데이터 주고받기 (2) | 2023.12.10 |
| (Node.js) 패키지 매니저(npm)와 PM2 (1) | 2023.12.10 |
| (Node.js) 동기, 비동기 그리고 콜백 (0) | 2023.12.10 |