320x100
먼저 사이드바에 각 게시판으로 이동하기 쉽도록 카테고리를 만들고 링크를 건다.
<aside id="sidebar">
<div id="board-list">
<ul class="list-group">
<a href="/list"><li class="list-group-item active">전체글 보기</li></a>
<a href="/list?type=자유게시판"><li class="list-group-item">자유게시판</li></a>
<a href="/list?type=유머게시판"><li class="list-group-item">유머게시판</li></a>
</ul>
</div>
</aside>
그리고 글 리스트에서 해당 글의 제목을 누르면 글로 이동할 수 있도록 링크를 걸어둔다.
링크는 글의 ID를 기준으로 생성한다.
그리고 해당 링크를 클릭했을 때 나오는 조회 페이지의 레이아웃을 작성했다.
view.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= id %> 조회</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/menu-button.css">
</head>
<body>
<%-include('sidebar')%>
<%-include('navi-bar')%>
<div id="content">
<div id="wrap-inner-view">
<div id="view-left">
<div id="view-post">
<div id="post-head">
<div id="post-title">글 제목</div>
<hr>
<div id="post-authorandtype">작성자 / 게시판</div>
<div id="post-views">조회수</div>
<div style="clear:both"></div>
<hr>
</div>
<div id="post-body">
본문 내용
</div>
<div id="post-thumbuparea">
(추천수)<br>추천하기버튼
</div>
</div>
</div>
<%-include('inner-right')%>
</div>
</div>
</body>
<script src="/jq/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="javascripts/effect.js"></script>
</html>
style.css
#view-left{
min-height: 500px;
max-width: 900px;
min-width: 900px;
margin-right: 30px;
}
#wrap-inner-view{
padding-top: 150px;
min-height: 1100px;
display: flex;
justify-content: center;
}
#view-post{
display: flex;
flex-direction: column;
min-height: 400px;
border: solid 1px grey;
}
#post-title{
font-size: 2em;
padding-bottom: 5px;
}
#post-body{
text-align: left;
padding: 20px;
flex: 1;
}
#post-authorandtype{
float:left;
padding:5px 20px;
}
#post-views{
float:right;
padding:5px 20px;
}
#post-thumbuparea{
height: 100px;
}
#post-head hr{
margin: 0;
}
이제 view.js에서 클라이언트로부터 GET요청이 날아왔을 시 쿼리문을 생성해 DB에서 row정보를 받아오고 적용시켜야 한다.
var viewPost = function(id,callback){
// 조회수 증가
db.query('UPDATE POST SET VIEWS=VIEWS+1 WHERE ID=?',[id],function(){});
// 글 조회
db.query('SELECT * FROM POST WHERE ID=?',[id],function(err,post){
if(err){
console.log('에러 발생 : ' + err);
} else{
callback(post[0]);
}
});
}
먼저 DB에서는 해당 글의 조회수를 1 증가시키고 id에 해당하는 row를 가져와서 callback으로 넘겨준다.
var express = require('express');
var router = express.Router();
var db = require('../db-query');
router.get('/', function(req, res, next) {
let {id} = req.query;
db.viewPost(id,(response)=>{
res.render('view', {id: id,
title: response.TITLE,
author: response.AUTHOR,
type: response.TYPE,
content: response.CONTENT,
views: response.VIEWS,
isLogined: response.isLogined,
thumbup: response.THUMBUP});
});
});
module.exports = router;
view.js에서는 그냥 해당 값을 받아서 view.ejs에 하나씩 넘겨주면 된다.
<!DOCTYPE html>
<html>
<head>
<title><%= id %> 조회</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/menu-button.css">
</head>
<body>
<%-include('sidebar')%>
<%-include('navi-bar')%>
<div id="content">
<div id="wrap-inner-view">
<div id="view-left">
<div id="view-post">
<div id="post-head">
<div id="post-title"><%=title%></div>
<hr>
<div id="post-authorandtype"><%=author%> / <%=type%></div>
<div id="post-views">조회수 <%=views%></div>
<div style="clear:both"></div>
<hr>
</div>
<div id="post-body">
<%=content%>
</div>
<div id="post-thumbuparea">
<%=thumbup%><br>추천하기버튼
</div>
</div>
</div>
<%-include('inner-right')%>
</div>
</div>
</body>
<script src="/jq/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="javascripts/effect.js"></script>
</html>
이제 view.ejs에 맞는 곳에다 값을 할당해주면 된다.
적용시 글을 클릭하면 해당 글로 넘어가면서 내용이 보이고, 조회수가 1씩 올라간다. 조회수는 GET요청을 받을 때마다 1씩 늘어난다.
조회수와 추천하기는 ip당 1씩만 증가시킬수 있도록 후에 조치할 것이다.
'Projects > NodeBoard' 카테고리의 다른 글
| 글 삭제 기능 제작 (0) | 2021.02.26 |
|---|---|
| 글 작성 기능 제작 (0) | 2021.02.25 |
| 테이블 생성과 게시판별 조회 기능 (1) | 2021.02.23 |
| 기본적인 라우팅과 MySQL DB 연동 (0) | 2021.02.22 |
| 메인 페이지 레이아웃 짜기 (0) | 2021.02.21 |
댓글