▶ nodejs 의 App 포스팅은 생활코딩 (https://opentutorials.org/course/1) 에서 제공하는 강의를 기반으로 한 학습내용입니다.
▶ 출처 : 생활코딩 > WEB > WEB2 - Node.js (https://opentutorials.org/course/3332)
▷ 해당 학습 과정의 프로젝트를 저의 Github Repository 에도 게시하였습니다. (devdhjo/nodejs_opentutorials)
◇ FORM 을 이용하여 title 이 일치하는 파일을 삭제하는 방법을 학습합니다.
1. 글을 삭제할 수 있도록 버튼을 생성합니다.
-
다른 버튼처럼 a 태그를 이용하여 버튼을 생성한다면 링크 이동이 발생하기 때문에 FORM 태그를 이용합니다.
-
삭제할 파일을 구분하기 위해 선택한 파일의 title 을 FORM 의 hidden 속성으로 저장합니다.
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 == '/') {
if(queryData.id == undefined) {
...
} else {
fs.readdir('./data', 'utf8', 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>`);
+ `<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);
});
})
}
} else if (pathname == '/create') {
...
}
});
2. ‘/delete_process’ 주소로 전송된 FORM 데이터를 처리하기 위한 코드를 추가합니다.
- fs.unlink 함수를 이용하여 title 이 일치하는 파일을 삭제합니다.
– 참고자료 (Node.js - fs.unlink(path, callback))
var app = http.createServer(function(request,response){
...
if(pathname == '/') {
...
+ } else if (pathname == '/delete_process') {
+ var body = '';
+ request.on('data', function(data){
+ body = body + data;
+ });
+ request.on('end', function(){
+ var post = qs.parse(body);
+ var id = post.id;
+ fs.unlink(`data/${id}`, function(error){
+ response.writeHead(302, {Location: `/`});
+ response.end();
+ })
+ })
} else {
response.writeHead(404);
response.end('Not found');
}
});
3. 수정 된 main.js 를 실행합니다.
- window + R → cmd 실행
D:\workspace\git\nodejs\webapp>node main.js
- main.js (수정사항 보기)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
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 = 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;
if(pathname == '/') {
if(queryData.id == undefined) {
fs.readdir('./data', 'utf8', 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 {
fs.readdir('./data', 'utf8', 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><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>
`);
response.writeHead(200);
response.end(template);
})
})
}
} else if (pathname == '/create') {
fs.readdir('./data', 'utf8', function(err, filelist) {
var title = 'Welcome - Create';
var list = templateList(filelist);
var template = templateHTML(title, list, `
<form action="/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 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);
})
})
} 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 id = post.id;
var title = post.title;
var description = post.description;
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 if (pathname == '/delete_process') {
var body = '';
request.on('data', function(data) {
body = body + data;
})
request.on('end', function() {
var post = qs.parse(body);
var id = post.id;
fs.unlink(`data/${id}`, function(error){
response.writeHead(302, {Location: `/`});
response.end();
})
})
} else {
response.writeHead(404);
response.end('Not found');
}
});
app.listen(3000);