5-1강 상세 페이지 구현하기 - app.get으로 pathname의 parameter 가져오기
Express 홈페이지에서 Router 설명을 읽다가
Router.parameters 예제에서
parameter를 이용하는 방법을 찾았다.
app.get('page/:pageid', function(req, res){
return res.send(req.params);
});실행결과
localhose:3000/page/:pageid 값대로
request한 pageid값이 send되었다.
5-2강 실습
(1) main.js 수정
else {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(queryData.id).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = queryData.id;
var sanitizedTitle = sanitizeHtml(title);
var sanitizedDescription = sanitizeHtml(description, {
allowedTags:['h1']
});
var list = template.list(filelist);
var html = template.HTML(sanitizedTitle, list,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
` <a href="/create">create</a>
<a href="/update?id=${sanitizedTitle}">update</a>
<form action="delete_process" method="post">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>`
);
response.writeHead(200);
response.end(html);
});
});이 코드는 상세 페이지, 즉 url에서 pathname==='/'이고 쿼리데이터가 있는 경우의 코드.
app.get('/page/:pageId', function(request, response) {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var sanitizedTitle = sanitizeHtml(title);
var sanitizedDescription = sanitizeHtml(description, {
allowedTags:['h1']
});
var list = template.list(filelist);
var html = template.HTML(sanitizedTitle, list,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
` <a href="/create">create</a>
<a href="/update?id=${sanitizedTitle}">update</a>
<form action="delete_process" method="post">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>`
);
response.send(html);
});
});
});세가지 변경
- url에서 pathname==='/'이고 쿼리데이터가 있는 경우 --> app.get('/page/:pageId', function(req, res)으로 바꿔준다.
var filteredId = path.parse(queryData.id).base;
var filteredId = path.parse(request.params.pageId).base;- (+ 마지막 코드 response write + end => send으로 변경)
(2) template.js 수정
기존코드 중 ,
module.exports = {
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;
}
}
list 코드에서 링크가 쿼리형식으로 되어있다 . path/pathid 형태로 수정.
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;list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;6강,7강,8강 실습2( create, update, delete page) - app.post이용
'Backend > JavaScript,NodeJS, Express' 카테고리의 다른 글
| Express 설치 및 구동, MYSQL 연동하기 (0) | 2021.03.20 |
|---|---|
| Postman / MySQL 설치하기 (0) | 2021.03.13 |
| [생활코딩 Express] 1-4강 정리 (Router 처음 다뤄보기 ) (0) | 2021.02.17 |
| 윈도우에서 npm, pm2, express 설치오류 해결하기 (0) | 2021.02.16 |
| Ajax 가 무엇일까? (0) | 2021.01.29 |