수정은 1)수정링크 url을 생성하고 2)수정할 정보를 전송하고
3) 파일명을 변경하고 내용을 저장하는 과정으로 이루어진다.
먼저 홈화면이 아닌 목록리스트의 링크에서만
update의 버튼이 보여지도록 ui를 만들고
그 화면에서 클릭하면 수정링크로 갈 수 있게 url를 생성하는 코드를 만든다.
ui 만들기와 수정링크 url 생성
먼저 ui를 만들어주기 위해서 templateHTML에 매개변수 control를 넣어준다.
다음 루트 경로('/')이외의 페이지에 control 부분에
create와 update 버튼을 만들어준다.
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>
`;
}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>`
);
response.writeHead(200);
response.end(template);
}
);<a href="/update?id=${title}">update</a> 와 같이 해당 쿼리로 들어가면 update를 작성할 수 있는 url 주소가 만들어졌다.
이제 그 페이지로 들어가면 수정할 수 있는 ui가 그려지고
어떤 정보를 수정할 것인지 불러와야 한다.
즉 수정은 저장된 정보를 다시 불러오고 파일을 재전송하는 과정이라고 할 수 있다.
저장되어 있는 수정할 정보 불러오기와 재전송
아래와 같이 /update_process라는 페이지로 가게 만들어주었다.
여기에서 주의해야 할 점은 title을 새롭게 입력한 후에 전송을 누르면
수정이 되는 것이 아니라 새로운 파일이 만들어져 버린다.
따라서 id값을 기존의 제목에 추가해주고 value="${title} 이렇게 value를
설정해주어야 찾아들어가서 수정될수 있다.
이제 수정작업을 요청하는 정보가 /update_process라는 페이지로 가게 되었다.
<input type="hidden" name="id" value="${title}">else if (pathname === "/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="/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);
});
});update_process라는 페이지에서 전송된 데이터 받아서 변경과 내용저장
전송된 파일을 불러올 때 create_process에서 써주었던 함수를 써준다.
이번에는 id값도 전송해주었기 때문에 변수로 저장해주고
여기서 파일의 이름을 변경해주는 매서드 fs.rename을 사용하고
매개 변수로 변경전제목 (여기서는 data/${id}이다), 내용, 콜백함수를 써주고 콜백함수의 내용으로 fs.writeFile 를 사용해서 내용까지 기록하고 저장해준다.
else if (pathname === "/update_process") {
var body = "";
request.on("data", function (data) {
body = body + data;
});
request.on("end", function () {
var post = qs.parse(body);
console.log(post);
var title = post.title;
var id = post.id;
var description = post.description;
fs.rename(`data/${id}`, `data/${title}`, function (err) {
fs.writeFile(`data/${title}`, description, "utf8", function (err) {
response.writeHead(302, { Location: `/?id=${title}` });
response.end();
});
});
});