카테고리 없음
[Node.js]게시판 만들기 ( 코드리뷰 )
jackypark
2022. 9. 22. 23:38
전 포스팅 내용에 시연 영상 및 목표 설정을 담았다.
https://jackycode.tistory.com/82?category=1034822
[Node.js] 게시판 만들기 (목표설정,사용모듈소개)
목표 설정: 내가 방학 때 공부한 jsp로 만든 간단 쇼핑몰을 만든 것을 node js로 바꿔 보는 것이 목표입니다. 참고: https://jackycode.tistory.com/52?category=1032772 팀 프로젝트 - 유기동물 입양+쇼핑몰+ 커..
jackycode.tistory.com
이번 포스팅에서는 코드를 보며 하나하나 설명하겠다.
흐름을 놓치거나 이해가 안 되면 전 포스팅 내용에 있는 시연 영상과 같이 보면 도움이 될 것이다.
CODE REVIEW:
코드는 회원가입-> 로그인 -> 게시판 -> 게시판 작성 -> 게시판 보기 -> 게시판 수정 -> 게시판 삭제 순으로 가겠다. 각종 DB를 가져오는 함수들은 맨 마지막에 설명하겠다.
회원가입 HTML 코드이다. 전에 공부한 정규식 표현을 활용해서 유효성 검사를 해주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://localhost:3000/public/css/bootstrap.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<div class="navbar-header">
</div>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="/process/doLogin">로그인 </a></li>
<li class="nav-item"><a class="nav-link" href='/process/doRegister'>회원 가입</a>
<li class="nav-item"><a class="nav-link" href="/process/product">게시판</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">회원가입</h1>
</div>
</div>
<br>
<div class="container" align="center">
<form method="post" class="form-signin" action="/process/adduser">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="id" pattern="^[a-zA-Z0-9]+$" maxlength="12" minlength="4" placeholder="4~12자의 영문 대소문자와 숫자로 입력" required></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="text" name="password" pattern="^[a-zA-Z0-9]+$" maxlength="12" minlength="4" placeholder="4~12자의 영문 대소문자와 숫자로 입력" required></td>
</tr>
<tr>
<td><label>사용자명</label></td>
<td><input type="text" name="name" pattern="^[a-zA-Z]{2,}|[가-힣]{2,}$" required></td>
</tr>
<tr>
<td><label>나이</label></td>
<td><input type="text" name="age" pattern="^[0-9]{,3}$" required></td>
</tr>
</table>
<input type="submit" value="회원가입하기">
</form>
</div>
</body>
</html>회원가입 정보를 다입력하게 된다면 post방식으로 /process/adduser라는 라우터를 호출하게 된다.
router.route('/process/adduser').post(function(req,res){//회원가입시 사용할 라우팅 함수
console.log('/process/adduser 호출됨.');
var paramId=req.body.id||req.query.id; //post방식 로 쓰이면 body get방식이면 query
var paramPasword=req.body.password || req.query.password;
var paramName=req.body.name||req.query.name;
var paramAge=req.body.age||req.query.age;
console.log('요청파라미터 :' +paramId +','+ paramPasword+','+ paramName+','+ paramAge);
var age=Number(paramAge);
addUser(paramId,paramName,age,paramPasword,function(err,addedUser){//addUser함수 실행 db에 넣어줄 정보를 파라메타로넘김
if(err){//에러 발생시 간단에러페이지
console.error('사용자 추가 중 오류발생'+err.stack);
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 중 오류 발생</h2>');
res.write('<p>'+err.stack+'<p>');
res.end();
return;
}
if(addedUser){//성공적으로 db를 가져왔다면 true
//제대로 찍혔는지 확인위해 콘솔로 확인절차
console.dir(addedUser);
console.log('inseted'+addedUser.affectedRows+'rows');
var insertId=addedUser.insertId;
console.log('추가한 레코드의 아이디: '+insertId);
//팝업창으로 회원가입 알림을 뛰우고 로그인 페이지로 이동
res.send("<script>alert('회원가입이 완료되었습니다.');location.href='/public/login2.html'</script>");
}else{
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 실패</h2>');
res.end();
}
});
});var addUser=function(id,name,age,password,callback){//회원가입한 정보를 db에 저장시킬 함수
console.log('addUser 호출됨');
//케넥션풀에서 연결객체를 가져온다
pool.getConnection(function(err,conn){//db에 연결
if(err){//db연결 실패시
if(conn){
conn.release(); //반드시 해제해야함 풀로 다시 커넥션을 반납해주는 과정
}
callback(err,null);
return;
}
var data={id:id,name:name,age:age,password:password};//db에 추가할 정보
conn.query('insert into users set ?',data,//db에 회원정보 삽입
function(err,result){
conn.release();
console.log('실행된 SQL: '+exec.sql);
if(err){
console.log('sql 실행시 에러발생.');
callback(err,null);
return;
}
callback(null,result);//찾은데이터를 콜백함수에 넣어서 삽입
});
});
}- DB함수들은 마지막에 설명한 다했는데 Callback 함수에 대해 설명하기 위해 이번 db함수만 먼저 설명하겠다.
- 라우터에서 addUser함수를 호출하면 파라미터로 회원정보를 넘겨서 query문에 넣어준다.
- 그리고 결과가 완료되면 result라는 변수에 저장되는데 그다음 파라미터로 받은 callback함수에 result를 넣어서 실행해준다.(성공했으니 에러는 안 터졌으니 err 들어갈 값에는 null이 들어가게 함)
- 그러면 라우터의 addUser에 있는 function(err, addedUser)가 작동한다.
- addedUser에는 result값이 들어가서 작동하게 되는데 정상적으로 회원가입이 완료되면 알림 창으로 회원가입 완료를 해주고 로그인 창으로 이동하게 된다
나머지 db호출 함수들도 다 이런 형식이다.
그다음 가장 기본인 로그인. html이다.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="http://localhost:3000/public/css/bootstrap.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<div class="navbar-header">
</div>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="/process/doLogin">로그인 </a></li>
<li class="nav-item"><a class="nav-link" href='/process/doRegister'>회원 가입</a>
<li class="nav-item"><a class="nav-link" href="/process/product">게시판</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">로그인</h1>
</div>
</div>
<div class="container" align="center">
<div class="col-md-4 col-md-offset-4">
<h3 class="form-signin-heading">Please sign in</h3>
<form class="form-signin" action="/process/login" method="post">
<div class="form-group">
<label for="inputUserName" class="sr-only">User Name</label>
<input type="text" class="form-control" placeholder="ID" name='id' required autofocus>
</div>
<div class="form-group">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password" name='password' required>
</div>
<input type="submit" class="btn btn btn-lg btn-success btn-block" value="전송" name="">
<div align="right">
<br>
<input type="button" class="btn btn btn-lg btn-primary" value="회원가입" onclick='location.href="adduser2.html"'>
</div>
</form>
</div>
</div>
</body>
</html>회원 가입한 아이디로 로그인을 하게 되면 post방식으로 /process/login 라우터를 호출하게 된다.
router.route('/process/login').post(function(req,res){//로그인을 수행할 라우터 함수
console.log('/process/login 라우팅 함수에서 받음.');
var paramId = req.body.id || req.query.id; //post방식 로 쓰이면 body get방식이면 query
var paramPassword = req.body.password || req.query.password; //post방식 로 쓰이면 body get방식이면 query
console.log('요청파라미터 :'+paramId +', '+ paramPassword);
authUser(paramId,paramPassword,function(err,rows){//db에 존재하는 아이디 비번인지 확인
if(err){
console.error('사용자 로그인중 오류발생' +err.stack);
res.writeHead(200,{"Content-Type":"text/html;charset=utf8"});
res.write('<h1>에러발생<h1>');
res.end();
}
if(rows){//db에 존재 하는 아이디일시
console.dir(rows);
req.session.user={// 세션에 아이디 값과 이름정보를 저장함
id:rows[0].id,
name:rows[0].name,
authorized:true
};
res.redirect('/process/product');//게시판으로 이동할 라우터함수 호출
}else{
res.send("<script>alert('아이디또는 비밀번호가 틀렸습니다.');location.href='/public/login2.html'</script>");//알림창 뛰운후 로그인창으로 이동
}
});
});- authUser라는 함수를 활용해서 db에 존재하는 아이디인지 확인하고 db에 존재하는 아이디 일시 아이디와 이름값을 세션에 넣어 관리하도록 한다. 그 후 게시판으로 이동하는 라우터 함수를 호출합니다.
- 아이 디또는 비밀번호가 틀렸다면 알림 창으로 알려주고 로그인 창으로 다시 이동시켜줍니다.
다음은 게시판 호출 라우터 함수입니다.
router.route('/process/product').get(function(req,res){//게시판으로 이동 시킬 라우터 함수
console.log('/process/product 라우팅 함수 호출됨.');
//이거 게시판에서 검색할때 사용할 것들
var paramText=req.query.text; //post방식 로 쓰이면 body get방식이면 query
var paramItems=req.query.items;
var data;
if(req.session.user){//만약에 세션에 정보가 있다면
data=req.session.user.id;//data에 세션id넣기
}else{
data="";
}
viewBoardList(paramItems,paramText,function(err,result){//result에 게시판목록들을 가져옴
if(err){
console.error('리스트불러오기 중 오류발생'+err.stack);
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>리스트불러오기 중 오류 발생</h2>');
res.write('<p>'+err.stack+'<p>');
res.end();
return;
}
if(result){//결과가 있다면
res.render(__dirname+'/public/product.html',{tables:result,sId:data});//result가 tables라는명으로 product.html로 넘어감 sId도 마찬가지
}else{//결과가 없다면
result=0;
res.render(__dirname+'/public/product.html',{tables:result,sId:data});
}
});
});- 우선 paramText 랑 paramItems 형식은 게시판에서 검색 기능할 때 필요한 변수들이다.
- viewBoardList 함수를 호출하여 db에서 게시판 목록들을 가져옵니다.
- 그 후 tables에는 result 값을 넘기고 sId에는 세션에 존재하는 아이디를 넣습니다.
- render 메서드를 통해 값을 게시판. html로 데이터(게시판 목록, 세션 아이디)를 넘겨줍니다.
- 그 후 게시판. html로 이동합니다.
게시판.html 부분입니다.
우선 게시판의 상단에 있는 네비 바의 코드입니다.
<div>
<ul class="navbar-nav mr-auto">
<%if(sId==""){ %>
<li class="nav-item"><a class="nav-link" href="/process/doLogin">로그인 </a></li>
<li class="nav-item"><a class="nav-link" href='/process/doRegister'>회원 가입</a>
<%}else{ %>
<li style="padding-top: 7px; color: white">[<%=sId%>님]</li>
<li class="nav-item"><a class="nav-link" href="/process/logout">로그아웃 </a></li>
<li class="nav-item"><a class="nav-link" href='/process/editUser'>회원 수정</a>
<%} %>
<li class="nav-item"><a class="nav-link" href="/process/product">게시판</a></li>
</ul>
</div>아까 서버에서 넘겨받은 세션 아이디(sId)가 비어있을 시 :
네비 바에 로그인 회원가입 게시판 출력
세션 아이디가 존재할 시:
네비 바에 접속한 아이디 표시, 로그아웃, 회원 수정, 게시판 출력
더보기
<form action="/process/product" method="get">
<div class="text-right">
<span class="badge badge-success">전체 <%=tables.length%>건 </span>
</div>
<div style="padding-top: 50px">
<table class="table table-hover">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
<th>조회</th>
<th>글쓴이</th>
</tr>
<% for(var i=tables.length-1; i>= 0; i--){ %>
<tr>
<td>
<%=tables[i].num%>
</td>
<td><a href="/process/boardView?num=<%=tables[i].num%>">
<%=tables[i].title%>
</a></td>
<td>
<-- toLocalDateString() 날짜형식(요일/년도/월.일) -->
<%=tables[i].date.toLocaleDateString()%>
</td>
<td>
<%=tables[i].hit%>
</td>
<td>
<%=tables[i].name%>
</td>
</tr>
<% } %>
</table>
</div>
<div align="left">
<table>
<tr>
<td width="100%" align="left">
<select name="items" class="txt">
<option value="title">제목에서</option>
<option value="content">본문에서</option>
<option value="name">글쓴이에서</option>
</select> <input name="text" type="text" />
<input type="submit" id="btnAdd"
class="btn btn-primary " value="검색 " />
</td>
<td width="100%" align="right">
<a href="/process/checkLogin" class="btn btn-primary">«글쓰기</a>
</td>
</tr>
</table>
</div>
</form>- 서버에서 넘겨받은 글목록(tables) 데이터를 담겨있는 수만큼 출력시키기 위해 <% for문을 %> 활용해서 글 목록수만큼 뽑아주도록 하였다.
- 지금 for문에서 지금 i--로 진행하는데 사실 데이터를 뽑아올 때 sql문에서 desc num까지 해줬더라면 저렇게 코딩 안 했었어도 된다..
(다음에는 이번과 같은 실수를 하지 않기를) - 제목에 <a> 태그로 링크를 주어서 get방식으로 해당 글 목록의 번호를 서버로 넘겨줍니다.
- 검색을 하게 되면 /process/product(여길 눌려봐)를 다시 실행시켜서 결괏값을 다시 가져와서 출력시켜줍니다.
- 글쓰기 버튼을 눌리게 되면 /process/checkLogin 라우터 함수를 호출하게 됩니다.
/process/checkLogin 라우터
router.route('/process/checkLogin').get(function(req,res){//로그인되있는지 확인할 라우터 함수
console.log('/process/checkLogin 라우팅 호출 됨');
if(req.session.user){//세션에 정보가 존재한다면
res.render(__dirname+'/public/boardWrite.html',{name:req.session.user.name});//글작성할수있는 페이지로 이동 세션에 담긴 이름과 함께
}else{//세션에 정보가 없다면
res.send("<script>alert('로그인을 해주세요.');location.href='/public/login2.html'</script>");//알림창 뛰운후 로그인 로그인 페이지로 이동
}
});
- 로그인이 돼있다면 글 작성. html로 이동
- 안 돼있으면 로그인 창으로 이동
글 작성. html이다
여기서 중요 동작은 작성 버튼을 누르면 /process/insertBoard 라우터로 이동하는 것이다
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:3000/public/css/bootstrap.min.css"/>
<title>Borad</title>
</head>
<script type="text/javascript">
function checkForm() {
if (!document.newWrite.name.value) {
alert("성명을 입력하세요.");
return false;
}
if (!document.newWrite.title.value) {
alert("제목을 입력하세요.");
return false;
}
if (!document.newWrite.content.value) {
alert("내용을 입력하세요.");
return false;
}
}
function goData() {
console.log("실행안됨?");
var edit=document.getElementById('editor').innerHTML
var form = document.newWrite;
$('input[name=content]').attr('value', edit);
console.log(edit)
console.log(form)
}
</script>
<body>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">글 작성하기</h1>
</div>
</div>
<div class="container">
<form name="newWrite" id="newWrite" action="/process/insertBoard"
class="form-horizontal" method="post" onsubmit="return checkForm()">
<input type="hidden" value="" name="content">
<div class="form-group row">
<label class="col-sm-2 control-label" >성명</label>
<div class="col-sm-3">
<input name="name" type="text" class="form-control" value=" <%=name %> "
placeholder="name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" >제목</label>
<div class="col-sm-5">
<input name="title" type="text" class="form-control"
placeholder="title" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" >내용</label>
<div class="col-sm-8">
<div class="editor-menu">
<button type="button" id="btn-bold">
<b>B</b>
</button>
<button type="button" id="btn-italic">
<i>I</i>
</button>
<button type="button" id="btn-underline">
<u>U</u>
</button>
<button type="button" id="btn-strike">
<s>S</s>
</button>
<button type="button" id="btn-ordered-list">OL</button>
<button type="button" id="btn-unordered-list">UL</button>
</div>
<input id="img-selector" type="file" accept="image/*" onchange='openFile(event)' >
<div id="editor" class="form-control" contenteditable="true" ></div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10 ">
<input type="submit" class="btn btn-primary " value="등록" onclick="goData();">
<input type="button" class="btn btn-danger" onclick="location.href='/process/product'" value="취소 ">
</div>
</div>
</form>
<hr>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
const editor = document.getElementById('editor');
const btnBold = document.getElementById('btn-bold');
const btnItalic = document.getElementById('btn-italic');
const btnUnderline = document.getElementById('btn-underline');
const btnStrike = document.getElementById('btn-strike');
const btnOrderedList = document.getElementById('btn-ordered-list');
const btnUnorderedList = document.getElementById('btn-unordered-list');
const btnImage = document.getElementById('btn-image');
const imageSelector = document.getElementById('img-selector');
btnBold.addEventListener('click', function () {
setStyle('bold');
});
btnItalic.addEventListener('click', function () {
setStyle('italic');
});
btnUnderline.addEventListener('click', function () {
setStyle('underline');
});
btnStrike.addEventListener('click', function () {
setStyle('strikeThrough')
});
btnOrderedList.addEventListener('click', function () {
setStyle('insertOrderedList');
});
btnUnorderedList.addEventListener('click', function () {
setStyle('insertUnorderedList');
});
btnImage.addEventListener('click', function () {
imageSelector.click();
});
imageSelector.addEventListener('change', function (e) {
const files = e.target.files;
if (!!files) {
insertImageDate(files[0]);
}
});
function setStyle(style) {
document.execCommand(style);
focusEditor();
}
// 버튼 클릭 시 에디터가 포커스를 잃기 때문에 다시 에디터에 포커스를 해줌
function focusEditor() {
editor.focus({preventScroll: true});
}
function insertImageDate(file) {
const reader = new FileReader();
reader.addEventListener('load', function (e) {
focusEditor();
document.execCommand('insertImage', false, `${reader.result}`);
});
reader.readAsDataURL(file);
}
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var dataURL = reader.result;
var output = document.getElementById('output');
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>
</html>
<style>
div#editor {
padding: 16px 24px;
border: 1px solid #D6D6D6;
border-radius: 4px;
}
#img-selector {
display: none;
}
#editor img {
max-width: 100%;
}
</style>
작성 한글을 DB에 넣어줄 라우터이다.
router.route('/process/insertBoard').post(function(req,res){//작성한 글을 등록할 라우터 함수
console.log('/process/insertBoard 호출됨.');
var paramContent=req.body.content;//글내용
var sessionId=req.session.user.id;//현재접속중인 아이디
var paramName=req.body.name||req.query.name;//성명
var paramTitle=req.body.title||req.query.title;//제목
insertBoard(sessionId,paramName,paramTitle,paramContent,function(err,result){//작성한 글을 db에 저장시킴
if(err){
console.error('작성 중 오류발생'+err.stack);
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>작성 중 오류 발생</h2>');
res.write('<p>'+err.stack+'<p>');
res.end();
return;
}
if(result){//성공적으로 db에 넣었다면
console.dir(result);
var insertId=result.insertId;
console.log('추가한 레코드의 아이디: '+insertId);
res.send("<script>alert('작성이 완료되었습니다.');location.href='/process/product'</script>");//작성완료 알림창 후 게시판으로 이동시킬 라우터로 이동
}else{
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>작성 실패</h2>');
res.end();
}
});
});- 작성한 글을 db에 저장시킬 insertBoard 함수를 불러줌
- 성공적으로 넣었다면 게시글 화면으로 이동 [/process/product 이동하기]
(위 이동하기 버튼을 눌려서 코드를 한번 확인해 주세요.)
다음은 글목록에서 제목을 클릭했을 때 이동하게 되는 boardView 라우터 함수입니다.
더보기
router.route('/process/boardView').get(function(req,res){//글내용을 출력시키기 위한 라우터 함수
console.log('/process/boardView라우팅 함수 호출됨.');
//글번호를 가져옴
var paramNum=req.body.num||req.query.num; //post방식 로 쓰이면 body get방식이면 query
var data;
if(req.session.user){//세션존재시
data=req.session.user.id;
}else{
data="";
}
boardView(paramNum,function(err,result){//db에서 글내용을 가져올 함수 가져온값 result에 반환
if(err){//에러발생시
console.error('boardView불러오기 중 오류발생'+err.stack);
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>boardView불러오기 중 오류 발생</h2>');
res.write('<p>'+err.stack+'<p>');
res.end();
return;
}
if(result){//글내용 존재시
console.dir(result);
updateHit(paramNum);//조회수 올리는 함수
res.render(__dirname+'/public/boardView.html',{tables:result[0],sId:data});//result가 tables라는명으로 product.html로 넘어감 sId도 마찬가지
}else{
console.log('에러발생');
res.writeHead(200,{"Content-Type":"text/html;charset=utf8"});
res.write('<h1> 데이터 조회안됨.<h1>');
res.end();
}
});
});- get방식으로 가져온 글 번호를 boardView()함수를 실행시켜서 해당 글번호 내용들을 가져온다
- 가져온 내용들을 boardView.html에 같이 넘겨줘서 이동시켜준다.
boardView.html
<div class="container">
<form name="newWrite" id="newWrite" action="/process/editBoard"
class="form-horizontal" method="get" >
<input type="hidden" name="num" value="<%=tables.num%>">
<div class="form-group row">
<label class="col-sm-2 control-label" >성명</label>
<div class="col-sm-3">
<% if(sId == tables.id){ %>
<input name="name" type="text" class="form-control" value=" <%=tables.name%>" required>
<% }else{ %>
<%=tables.name%>
<% } %>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" >제목</label>
<div class="col-sm-5">
<% if(sId == tables.id){ %>
<input name="title" type="text" class="form-control" value=" <%=tables.title%>" required>
<% }else{ %>
<%=tables.title%>
<% } %>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" >내용</label>
<div class="col-sm-8">
<% if(sId == tables.id){ %>
<textarea name="write" cols="50" rows="5" class="form-control" ><%=tables.content%></textarea>
<% }else{ %>
<textarea name="write" cols="50" rows="5" class="form-control" readonly><%=tables.content%></textarea>
<% } %>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10 ">
<%if(sId == tables.id){ %>
<a href="/process/deleteBoard?num=<%=tables.num%>" class="btn btn-danger"> 삭제</a>
<input type="submit" class="btn btn-success" value="수정 ">
<% } %>
<a href="/process/product" class="btn btn-primary"> 목록</a>
</div>
</div>
</form>- 만약 세션에 있는 아이디와 해당 글의 아이디와 일치하다면 글을 수정 삭제 가능하도록 설정
- 일치하지 않다면 글 내용을 읽을 수 만 있고 목록 버튼만 보임
수정/삭제 구동 라우터 함수
더보기
router.route('/process/editBoard').get(function(req,res){//글내용을 수정하기위한 라우터 함수
console.log('/process/editBoard라우팅 함수 호출됨.');
var paramContent=req.body.write||req.query.write; //post방식 로 쓰이면 body get방식이면 query
var paramName=req.body.name||req.query.name;
var paramTitle=req.body.title||req.query.title;
var paramNum=req.body.num||req.query.num;
var num=Number(paramNum);
var data;
if(req.session.user){//세션에 값 존재한다면
data=req.session.user.id;
}else{
res.redirect('/public/login2.html');
}
editBoard(paramName,paramTitle,paramContent,num,function(err,result){//글내용DB을 수정하기위해 글작성시 필요한 값들을 파라메타로 넘김
if(err){
console.error('editBoard 중 오류발생'+err.stack);
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>editBoard 중 오류 발생</h2>');
res.write('<p>'+err.stack+'<p>');
res.end();
return;
}
if(result){//글내용을 성공적으로 수정했다면
console.dir(result);
res.redirect('/process/product');// 게시판이동하는 라우터로 이동
}else{
console.log('에러발생');
res.writeHead(200,{"Content-Type":"text/html;charset=utf8"});
res.write('<h1> 데이터 조회안됨.<h1>');
res.end();
}
});
});
router.route('/process/deleteBoard').get(function(req,res){//글을 삭제하기위한 라우터 함수
console.log('/process/deleteBoard 함수 호출됨.');
var paramNum=req.body.num||req.query.num; //post방식 로 쓰이면 body get방식이면 query
var data;
if(req.session.user){
data=req.session.user.id;
}else{
data="";
}
deleteBoard(paramNum,function(err,result){//db에서 파라메타 넘긴 글번호정보를 삭제시킴
if(err){
console.error('boardView불러오기 중 오류발생'+err.stack);
res.writeHead('200',{'Content-type':'text/html;charset=utf8'});
res.write('<h2>boardView불러오기 중 오류 발생</h2>');
res.write('<p>'+err.stack+'<p>');
res.end();
return;
}
if(result){//db에서 성공적으로 삭제가 완료되면
res.redirect('/process/product');//게시판으로 이동
}else{
console.log('에러발생');
res.writeHead(200,{"Content-Type":"text/html;charset=utf8"});
res.write('<h1> 데이터 조회안됨.<h1>');
res.end();
}
});
});
글들을 작성하면서 코드를 보니깐 수정해야 할 코드들이 많이 보이는 것 같다. 차후 보완해서 수정해야겠다.
다음 포스팅에는 각종 db를 위해 호출했던 함수들에 대해서 설명하겠습니다.