반응형
목표
리스트 목록 페이지를 Express을 이용해 semantic url 방식으로 작성하기
request.params
app.get('/page/:pageId', function(request, response){
console.log(request.params);
}
{ pageId: 'CSS' }
따라서 request.params.pageId를 이용하여 클릭된 제목을 인지한다.
이전 코드
// 2. id값을 선택한 page
} else {
fs.readdir('./data', function(err, 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);
var list = template.list(filelist);
var html = template.html(title, list,
`<a href="/create">create</a>
<a href="/update?id=${sanitizedTitle}">update</a>
<form action="delete_process" method="post" onsubmit="blarblar">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>
`,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`);
response.writeHead(200); //200: 파일을 성공적으로 전송하였음
response.end(html);
});
});
}
Express 코드
app.get('/page/:pageId', function(request, response){
fs.readdir('./data', function(err, 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);
var list = template.list(filelist);
var html = template.html(title, list,
`<a href="/create">create</a>
<a href="/update?id=${sanitizedTitle}">update</a>
<form action="delete_process" method="post" onsubmit="blarblar">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>
`,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`);
response.send(html);
});
});
});
하지만 링크를 글 목록을 클릭했을 때 query string방식으로 동작하여 링크로 들어가게 된다.
우리는 query string 방식이 아닌 url path parameter방식인 semantic url 방식으로 구현할 것이기 때문에 수정해야 한다. 이는 template.js에 있는 list: function을 수정하면 된다.
list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;
그러면 이제 링크를 클릭해도 원하는 url로 가게 된다.
반응형
'Back-End > Node.js' 카테고리의 다른 글
Express - 6. 페이지 생성 구현 (0) | 2020.09.06 |
---|---|
Node.js - get & post (0) | 2020.09.06 |
Express - 5.1. 상세페이지구현 1 - Route Parameter (0) | 2020.09.04 |
Express - 4. 홈페이지 구현 (0) | 2020.09.04 |
Express - 3.2. Hello Word 2 (0) | 2020.09.04 |