//person.js

// person data object.  setter getter 만드는 방법


var firstName, lastName, age;


exports.setFirstName = function (fname) {

    firstName = fname;

};


exports.setLastName = function (lname) {

    lastName = lname;

};


exports.setAge = function (yrsold) {

    age = yrsold;

};


exports.getPersonInfo = function () {

    return {

        firstName: firstName,

        lastName: lastName,

        age: age

    };

};

---------------------------------------------------------------------------------------------------------------


//app.js

var person = require('./person.js');


// steve 라는 이름 할당

person.setFirstName('Steve');


// jobs 라는 이름 할당

person.setLastName('Jobs');


// 56 

person.setAge(56);


console.log(person.getPersonInfo());








//관련 모듈 설치
//npm i nodemailer
//npm i nodemailer-smtp-transport





var nodemailer = require('nodemailer');
//smtp 서버를 사용하기 위한 모듈이다.
var smtpTransport = require('nodemailer-smtp-transport');



//아이디가 존재할 경우
//숫자 + 문자 + 특수문자 새로운 비밀번호 생성하고
var arr = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,~,`,!,@,#,$,%,^,&,*,(,),-,+,|,_,=,\,[,],{,},<,>,?,/,.,;".split(",");
var randomPw = createCode(arr, 10);


//비밀번호 랜덤 함수
function createCode(objArr, iLength) {
var arr = objArr;
var randomStr = "";
for (var j=0; j<iLength; j++) {
randomStr += arr[Math.floor(Math.random()*arr.length)];
}
return randomStr
}




//이메일 발송함수
function sendNewPwFunc(email,pw){

var transporter = nodemailer.createTransport(smtpTransport({
service: 'gmail',
host: 'smtp.gmail.com',
auth: {
user: 'thanksman1211@gmail.com',
pass: 'project100$1'
}
}));
var mailOptions = {
from: 'thanksman1211@gmail.com',
to: email,
subject: 'Sending Email using Node.js[nodemailer]',
html:'<h1>00에서 새로운 비밀번호를 보내드립니다.~~~~</h1> <h2>' + pw + '</h2>'
};
transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
return false;
} else {
console.log('Email sent: ' + info.response);
console.log("새로운 비밀번호가 발송되었습니다.");
return true;
}
});

return true;
}




[node js] 성경 db 연동

mysql 성경 db를 찾아서 데이터를 넣어준 이후 작업.


bible.js

var express = require('express')
var app = express()
var router = express.Router()
var mysql = require('mysql')
var fs = require('fs')
var ejs = require('ejs')




//성경 메인 화면
router.get("/bible",function(req,res){
console.log("메인화면 진행")
//console.log(searchBibleIndex("여호수아"))

fs.readFile('bible.html', 'utf-8', function (error, data) {
res.send(ejs.render(data, {
data: [],
title: {book:"",chapter:""}
}));
});
})


//메인 화면
router.post("/bible_search",function(req,res){
console.log("바이블 찾기 포스트 진행")
var maintext = req.body.maintext

//창세기이면 01, 출애굽기

maintext = searchBibleIndex(maintext)

var jang = req.body.jang
var jeol = req.body.jeol
var jeol2 = req.body.jeol2
console.log(maintext,jang,jeol,jeol2)

var queryString = 'select book, chapter,verse,content from bible_korHRV where book = ? and chapter = ? and verse between ? and ?'
fs.readFile('bible.html', 'utf-8', function (error, data) {
getConnection().query(queryString, [maintext,jang,jeol,jeol2], function (error, result) {
if (error) {
console.log("바이블 데이터 로드 에러" + error);
return
}
//var bookName = searchBibleName(result[0].book)

res.json(result)

// res.send(ejs.render(data, {
// data: result,
// bookname:bookName,
// chapter : result[0].chapter
// }))
})
});

})


function searchBibleName(index) {

var searchIndex = index - 1

var book= [ "창세기",
"출애굽기",
"레위기",
"민수기",
"신명기",
"여호수아",
"사사기",
"룻기",
"사무엘상",
"사무엘하",
"열왕기상",
"열왕기하",
"역대상",
"역대하",
"에스라",
"느헤미야",
"에스더",
"욥기",
"시편",
"잠언",
"전도서",
"아가서",
"이사야",
"예레미야",
"예레미야애가",
"에스겔",
"다니엘",
"호세아",
"요엘",
"아모스",
"오바댜",
"요나",
"미가",
"나훔",
"하박국",
"스바냐",
"학개",
"스가랴",
"말라기",
"마태복음",
"마가복음",
"누가복음",
"요한복음",
"사도행전",
"로마서",
"고린도전서",
"고린도후서",
"갈라디아서",
"에베소서",
"빌립보서",
"골로새서",
"데살로니가전서",
"데살로니가후서",
"디모데전서",
"디모데후서",
"디도서",
"빌레몬서",
"히브리서",
"야고보서",
"베드로전서",
"베드로후서",
"요한일서",
"요한이서",
"요한삼서",
"유다서",
"요한계시록"]


return book[searchIndex]
}

function searchBibleIndex(name) {

var book= [ "창세기",
"출애굽기",
"레위기",
"민수기",
"신명기",
"여호수아",
"사사기",
"룻기",
"사무엘상",
"사무엘하",
"열왕기상",
"열왕기하",
"역대상",
"역대하",
"에스라",
"느헤미야",
"에스더",
"욥기",
"시편",
"잠언",
"전도서",
"아가서",
"이사야",
"예레미야",
"예레미야애가",
"에스겔",
"다니엘",
"호세아",
"요엘",
"아모스",
"오바댜",
"요나",
"미가",
"나훔",
"하박국",
"스바냐",
"학개",
"스가랴",
"말라기",
"마태복음",
"마가복음",
"누가복음",
"요한복음",
"사도행전",
"로마서",
"고린도전서",
"고린도후서",
"갈라디아서",
"에베소서",
"빌립보서",
"골로새서",
"데살로니가전서",
"데살로니가후서",
"디모데전서",
"디모데후서",
"디도서",
"빌레몬서",
"히브리서",
"야고보서",
"베드로전서",
"베드로후서",
"요한일서",
"요한이서",
"요한삼서",
"유다서",
"요한계시록"]
var changeBookList =[];

for(var i = 1; i < 67; i++){
var bookChange = { value :book[i-1]}
changeBookList.push(bookChange)
bookChange = {}
}

var bookIndex = changeBookList.map(function (book) { return book.value; }).indexOf(name);

console.log(bookIndex);
console.log(bookIndex+1);

if(bookIndex === -1){
return "데이터를 다시 확인해주세요"
}else{
return bookIndex+1
}
}



var pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
database: 'wow',
password: '1111'
})


//디비 연결 함수
function getConnection() {
return pool
}


module.exports = router


bible.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>성경 검색</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
<h1>성경검색</h1>
<p>찾을구절을 검색하세요</p>
</div>


<div class="container">
<h2>성경본문찾기</h2>
<p>찾으실 성경 본문을 입력해보세요</p>
<form class="form-inline" action="/bible_search" method="POST">
<div class="form-group">
<label for="maintext">성경본문</label>
<input type="text" class="form-control" id="maintext" placeholder="창세기" name="maintext">
</div>
<br><br><br>
<div class="form-group">
<input type="text" class="form-control" id="jang" placeholder="1장" name="jang">
<label for="jang"></label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="jeol" placeholder="1절" name="jeol">
<label for="jeol"></label>
</div>
<br>
<br>
<h4>에서부터</h4>
<br>
<br>

<div class="form-group">
<input type="text" class="form-control" id="jeol2" placeholder="10절" name="jeol2">
<label for="jeol2"></label>
</div>
<br>
<br>
<h4>까지</h4>
<br>
<br>
<button type="submit" class="btn btn-default">찾기</button>
</form>
</div>

<br>
<br>

<div class="container">
<% var bookname = bookname %>
<% var chapter = chapter %>
<%
if(bookname && chapter){
%>
<h2><%= bookname %> 본문</h2>
<h3><%= chapter %> 장</h3>

<% }%>
<table class="table table-striped">
<thead>
<tr>
<th>구절</th>
<th>내용</th>
</tr>
</thead>
<tbody>

<% data.forEach(function (item,index){ %>
<tr>
<td>
<%= item.verse %>
</td>
<td>
<%= item.content %>
</td>
</tr>

<% })%>
</tbody>
</table>
</div>
</body>
</html>


결과화면




[node js] 파일전송


네비게이션



file.js

var express = require('express')
var app = express()
var router = express.Router()
var mysql = require('mysql')
var fs = require('fs')
var ejs = require('ejs')

//파일관련 모듈
var multer = require('multer')

//파일 저장위치와 파일이름 설정
var storage = multer.diskStorage({
destination: function (req, file, cb) {
//파일이 이미지 파일이면
if (file.mimetype == "image/jpeg" || file.mimetype == "image/jpg" || file.mimetype == "image/png") {
console.log("이미지 파일이네요")
cb(null, 'uploads/images')
//텍스트 파일이면
} else if (file.mimetype == "application/pdf" || file.mimetype == "application/txt" || file.mimetype == "application/octet-stream") {
console.log("텍스트 파일이네요")
cb(null, 'uploads/texts')
}
},
//파일이름 설정
filename: function (req, file, cb) {
cb(null, Date.now() + "-" + file.originalname)
}

})
//파일 업로드 모듈
var upload = multer({ storage: storage })


//파일 업로드 및 디비에 위치 저장
router.post('/upload_images', upload.single('fileupload'), function (req, res) {
console.log("post")
console.log(req.file)
console.log(req.file.path)
console.log(upload)
console.log(upload.storage.getFilename)

//파일 위치를 mysql 서버에 저장
getConnection().query('insert into myfile(name) values (?)', [req.file.path], function () {

res.redirect('/filepage');
});
});



//파일 페이지 보여주기
router.get("/filepage", function (req, res) {
console.log("파일 페이지 나와라")

//파일 가져올 위치
var path = __dirname + '/../' + 'uploads/images/'

fs.readFile('file.html', 'utf-8', function (error, data) {
var queryString = 'select * from myfile'
getConnection().query(queryString, function (error, result) {
if (error) {
console.log("파일가져올때 에러 발생" + error);
return
}
res.send(ejs.render(data, {
data: result
}));
});
})


})

//파일 다운로드 눌렀을 때 작동
router.get('/download/uploads/images/:name', function (req, res) {
var filename = req.params.name;

var file = __dirname + '/../uploads/images/' + filename
console.log(__dirname)
console.log(req.path)
console.log(file)
res.download(file); // Set disposition and send it.
});


var pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
database: 'wow',
password: '1111'
})


//디비 연결 함수
function getConnection() {
return pool
}


module.exports = router


file.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>파일</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>파일업로드</h1>
<p> </p>
</div>
<p>.</p>
<a href="/main">게시판으로 이동</a>
</div>


<br>
<br>
<div class="container">
<form action="/upload_images" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleFormControlFile1">파일업로드</label>
<input type="file" class="form-control-file" id="fileupload" name="fileupload">
</div>
<input type="submit" value="올리기">
</form>
</div>

<br>
<br>
<br>
<h2>파일 다운로드</h2>
<ul>
<% data.forEach(function (item,index){ %>

<li><a href='/download/<%= item.name%>'><%= item.name%></a></li>

<% })%>
</ul>
</body>
</html>


결과화면


  1. 2018.10.24 12:58

    비밀댓글입니다

  2. it취준생 2018.11.11 23:11 신고

    한가지 궁금증이 있습니다.
    ejs(html)에서 파일뿐아니라 게시글제목, 작성자, 게시글내용까지 같이 작성한뒤에 mysql에 저장하려고 합니다.
    제목,작성자,게시글,파일까지 하나의 form내부에 작성한뒤 submit하도록 하였고 form타입은 enctype="multipart/form-data" 로 지정하였습니다.
    일부 html코드를 덧붙입니다.
    <td>작성자</td>
    <td><input type="text" name="brdwriter" size="20" maxlength="20" value="<%=row.BRDWRITER%>"></td>
    <input type="file" name="imgFile" value="<%=row.BRDIMAGE%>">

    이렇게 넘겨준 상태에서
    router의 파트에서
    router.post('/save', uqload.single("imgFile"), function(req,res,next){
    var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno, req.file.imgFile];
    ~~~ sql = "INSERT INTO TBL_BOARD(BRDTITLE, BRDMEMO, BRDWRITER, BRDIMAGE, BRDDATE) VALUES(?,?,?,?, NOW())";
    connection.query(sql, data, function (err, rows)
    이렇게 사용하면 될거라고 생각하고 코드를 작성하였으나, 애초에 data자체가 비어버리더군요..
    어떻게 가능하게 만들수 있는지 알수 있을까요???

    p.s 따로 이미지첨부관련 기능을 싹 빼버리면 잘 작동하며, 본문대로 이미지만 처리하는식으로 코드를 작성해도 잘 작동합니다.
    이미지와 게시판을 동시에 db에 저장하는 과정에서 문제가 발생합니다.

3년전인가 처음 게시판을 만들어보고 거의 처음인것 같다. 언제쯤이면 머릿속에 생각했던 내용들을 거침없이 만들 수 있는 날이 올까나. 암튼 게시판은 스스로 안보고 짤 수 있을 때까지 연습해보면 실력향상에 도움이 많이 되는 미니프로젝트긴하다. 나중에 게시판에 좀더 기능을 넣을 수도 있다. 예를 들면 db설계를 좀 해서 댓글 기능, 좋아요 기능, 조회기능 등을 넣어서 게시판을 확장 시킬 수 있다. 이번 포스팅에서는 아주 아주 심플한 게시판을 만들어서 페이징 기능의 핵심만 정리해본다.

네비게이션

아래는 파일 네비게이션이다. 우리가 사용할 파일들은 빨간점으로 표시해놓았다.


node js  기본셋팅(app.js)

app.js를 아래와 같이 작성한다. 게시판이랑 상관없는 로직도 있지만 지우지 않았다... var productRouter 부분 부터 자세히 보자. 우리가 만들 게시판과 직접 관련된 로직이다. 웹브라우저에 /main, /board 라고 적으면 ./routes/product.js에서 처리하게 해놓았다.그럼 products.js 페이지 부분으로 가보자

//모듈 임포트
var express = require('express');
var app = express()
var morgan = require('morgan') //로그 모듈 임포트
var mysql = require('mysql') //mysql 임포트
var bodyParser = require('body-parser');
//미들웨어 설정
app.use(morgan('short')) //로그 미들웨어
app.use(express.static('./public')) //기본 파일 폴더 위치 설정
app.use(bodyParser.urlencoded({extended:false}))
//라우트로 분리시켜주기
var userRouter = require('./routes/user.js')

//상품리스트 게시판~!
var productRouter = require('./routes/product.js')
app.use(userRouter)
app.use(productRouter)
//var PORT = process.env.PORT || 3003
//서버 가동
app.listen(3003,function(){
console.log("서버가동")
})


products.js (라우터)

가장 중요한 부분. 웹브라우저에서 넘어오는 url을 전부 이곳에서 받는다. 유심히 보아야 할 부분이 /main 부분과 /pasing/"cur 부분이다. 가장 처음으로 들어온 유저는 가장 첫페이지를 보여줘야 하기 때문에 기본값 1을 페이징 함수에 넘겼다. 나머지 설명은 주석에 적어 놓았다.

var express = require('express')
var router = express.Router()
var mysql = require('mysql')
var fs = require('fs')
var ejs = require('ejs')
var bodyParser = require('body-parser');


router.use(bodyParser.urlencoded({ extended: false }))


//게시판 페이징

router.get("/pasing/:cur", function (req, res) {

//페이지당 게시물 수 : 한 페이지 당 10개 게시물
var page_size = 10;
//페이지의 갯수 : 1 ~ 10개 페이지
var page_list_size = 10;
//limit 변수
var no = "";
//전체 게시물의 숫자
var totalPageCount = 0;

var queryString = 'select count(*) as cnt from products'
getConnection().query(queryString, function (error2, data) {
if (error2) {
console.log(error2 + "메인 화면 mysql 조회 실패");
return
}
//전체 게시물의 숫자
totalPageCount = data[0].cnt

//현제 페이지
var curPage = req.params.cur;

console.log("현재 페이지 : " + curPage, "전체 페이지 : " + totalPageCount);


//전체 페이지 갯수
if (totalPageCount < 0) {
totalPageCount = 0
}

var totalPage = Math.ceil(totalPageCount / page_size);// 전체 페이지수
var totalSet = Math.ceil(totalPage / page_list_size); //전체 세트수
var curSet = Math.ceil(curPage / page_list_size) // 현재 셋트 번호
var startPage = ((curSet - 1) * 10) + 1 //현재 세트내 출력될 시작 페이지
var endPage = (startPage + page_list_size) - 1; //현재 세트내 출력될 마지막 페이지


//현재페이지가 0 보다 작으면
if (curPage < 0) {
no = 0
} else {
//0보다 크면 limit 함수에 들어갈 첫번째 인자 값 구하기
no = (curPage - 1) * 10
}

console.log('[0] curPage : ' + curPage + ' | [1] page_list_size : ' + page_list_size + ' | [2] page_size : ' + page_size + ' | [3] totalPage : ' + totalPage + ' | [4] totalSet : ' + totalSet + ' | [5] curSet : ' + curSet + ' | [6] startPage : ' + startPage + ' | [7] endPage : ' + endPage)

var result2 = {
"curPage": curPage,
"page_list_size": page_list_size,
"page_size": page_size,
"totalPage": totalPage,
"totalSet": totalSet,
"curSet": curSet,
"startPage": startPage,
"endPage": endPage
};


fs.readFile('list.html', 'utf-8', function (error, data) {

if (error) {
console.log("ejs오류" + error);
return
}
console.log("몇번부터 몇번까지냐~~~~~~~" + no)

var queryString = 'select * from products order by id desc limit ?,?';
getConnection().query(queryString, [no, page_size], function (error, result) {
if (error) {
console.log("페이징 에러" + error);
return
}
res.send(ejs.render(data, {
data: result,
pasing: result2
}));
});
});


})

})


//메인화면
router.get("/main", function (req, res) {
console.log("메인화면")
//main 으로 들어오면 바로 페이징 처리
res.redirect('/pasing/' + 1)

});

//삭제
router.get("/delete/:id", function (req, res) {
console.log("삭제 진행")

getConnection().query('delete from products where id = ?', [req.params.id], function () {
res.redirect('/main')
});

})
//삽입 페이지
router.get("/insert", function (req, res) {
console.log("삽입 페이지 나와라")

fs.readFile('insert.html', 'utf-8', function (error, data) {
res.send(data)
})

})
//삽입 포스터 데이터
router.post("/insert", function (req, res) {
console.log("삽입 포스트 데이터 진행")
var body = req.body;
getConnection().query('insert into products(name,modelnumber,series) values (?,?,?)', [body.name, body.num, body.section], function () {
//응답
res.redirect('/main');
})

})
//수정 페이지
router.get("/edit/:id", function (req, res) {
console.log("수정 진행")

fs.readFile('edit.html', 'utf-8', function (error, data) {
getConnection().query('select * from products where id = ?', [req.params.id], function (error, result) {
res.send(ejs.render(data, {
data: result[0]
}))
})
});

})
//수정 포스터 데이터
router.post("/edit/:id", function (req, res) {
console.log("수정 포스트 진행")
var body = req.body;
getConnection().query('update products set name = ?, modelnumber = ?, series = ? where id = ?',
[body.name, body.num, body.section, req.params.id], function () {
res.redirect('/main')
})
})


//글상세보기
router.get("/detail/:id", function (req, res) {
console.log("수정 진행")

fs.readFile('detail.html', 'utf-8', function (error, data) {
getConnection().query('select * from products where id = ?', [req.params.id], function (error, result) {
res.send(ejs.render(data, {
data: result[0]
}))
})
});


})

//mysql db 연결 함수

var pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
database: 'wow',
password: '1111'
})



//디비 연결 함수
function getConnection() {
return pool
}


module.exports = router


list.html(조회)

products.js에서 데이터를 처리한 후 뿌려주는 화면이 list.html이다. products.js 에서 게시물 조회 하는 로직 아래 

                res.send(ejs.render(data, {

                    data: result,

                    pasing: result2

                }));


이부분을 자세히 보자. mysql에서 가져온 데이터(result)와 페이징 관련 데이터 results2를 각각 data, pasing 키에 담았다! 이 키 값이 그대로 list.html로 넘어간다.


<!DOCTYPE html>
<html lang="ko">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
<h2>상품테이블</h2>

<a href="/insert">추가하기</a>
<br>
<br>
<p>상품테이블 목록입니다.</p>

<table class="table table-striped">
<thead>
<tr>
<th>아이디</th>
<th>상품명</th>
<th>넘버</th>
<th>분류</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<tbody>

<% data.forEach(function (item,index){ %>
<tr>
<td>
<%= item.id %>
</td>
<td>
<a href='/detail/<%= item.id %>'><%= item.name %></a>
</td>
<td>
<%= item.modelnumber %>
</td>
<td>
<%= item.series %>
</td>
<td>
<a href="/delete/<%= item.id %>">삭제</a>
</td>
<td>
<a href="/edit/<%= item.id %>">수정</a>
</td>
</tr>
<% })%>
</tbody>
</table>
</div>


<br>
<br>


<div class="container">
<ul class="pager">



<%
var curSet = pasing.curSet
var endPage = pasing.endPage
var startPage = pasing.startPage
var totalSet = pasing.totalSet
var totalPage = pasing.totalPage
var page_list_size = pasing.page_list_size
var page_size = pasing.page_size
var curPage = pasing.curPage
%>


<%
if(curSet > 1){
%>

<li value=(startPage -1) class="previous">
<a href='/pasing/<%= ( startPage - 1) %>'>이전페이지</a>
</li>

<%
}
%>


<%
for(var i = startPage; i <= endPage; i++){
if(i > totalPage){break;}

if(i == curPage){
%>
<li value=<%= i %> class='' >
<a href='/pasing/<%= i %>'>
<%= i %>
</a>
</li>

<%
}else{
%>

<li value=<%= i %> class='active' >
<a href='/pasing/<%= i %>'>
<%= i %>
</a>
</li>


<%
}
%>

<%
}
%>

<%
if(curSet < totalSet){
%>
<li value=( endPage + 1) class="next">
<a href='/pasing/<%= ( endPage + 1) %>'>다음페이지</a>
</li>
<%
}
%>

</ul>
</div>

<br>
<br>

</body>

</html>


결과확인


나머지 화면 페이지부분은 게시판 페이징 기능 구현과 관련이 거의 없어서(?) 추가로 설명을 생략하겠습니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>메인화면</h1>
<p> </p>
</div>
<p>.</p>
<a href="/main">메인화면으로</a>
</div>

</body>
</html>


insert.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>물품관리</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>상품입력</h2>
<p>.</p>
<form action="/insert" method="POST">
<div class="form-group">
<label for="name">상품이름:</label>
<input type="text" class="form-control" id="name" name= "name">
</div>
<div class="form-group">
<label for="num">번호</label>
<input type="text" class="form-control" id="num" name="num">
</div>
<div class="form-group">
<label for="section">분류</label>
<input type="text" class="form-control" id="section" name="section">
</div>
<button type="submit" class="btn btn-success">삽입하기</button>
</form>
</div>

</body>
</html>


edit.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>물품관리</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>상품수정</h2>
<p>나는 날마다 점점 더 좋아진다.</p>
<form method="POST">

<div class="form-group">
<label for="id">아이디:</label>
<input type="text" class="form-control" id="id" name= "id" value = "<%= data.id%>" disabled>
</div>

<div class="form-group">
<label for="name">상품이름:</label>
<input type="text" class="form-control" id="name" name= "name" value = "<%= data.name%>">
</div>
<div class="form-group">
<label for="num">번호</label>
<input type="text" class="form-control" id="num" name="num" value = "<%= data.modelnumber%>">
</div>
<div class="form-group">
<label for="section">분류</label>
<input type="text" class="form-control" id="section" name="section" value = "<%= data.series%>">
</div>
<button type="submit" class="btn btn-success">수정하기</button>
</form>
</div>

</body>
</html>


detail.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>물품상제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>상품상세보기</h2>
<p></p>
<form method="POST">

<div class="form-group">
<label for="id">아이디:</label>
<input type="text" class="form-control" id="id" name= "id" value = "<%= data.id%>" disabled>
</div>

<div class="form-group">
<label for="name">상품이름:</label>
<input type="text" class="form-control" id="name" name= "name" value = "<%= data.name%>" disabled>
</div>
<div class="form-group">
<label for="num">번호</label>
<input type="text" class="form-control" id="num" name="num" value = "<%= data.modelnumber%>" disabled>
</div>
<div class="form-group">
<label for="section">분류</label>
<input type="text" class="form-control" id="section" name="section" value = "<%= data.series%>" disabled>
</div>
<!-- <button type="submit" class="btn btn-success">수정하기</button> -->
</form>
</div>

</body>
</html>


*자바스크립트 뒤로가기 쿼리


<div align="center">


<button onclick="goBack()" class="btn btn-primary" style='color: white; background-color:rgb( 59, 89, 152);'>뒤로가기</button>


</div>



<script>

function goBack() {

    window.history.back();

}

</script>




*서버에서 auth 객체를 view 에 던져서 존재하면 페이지를 보여주고

없으면 location.href로 바로 페이지 강제 이동


<% if(auth==null||auth==""||auth===null){ %>

<script>

location.href='https://000000.00000.00000';

</script>

<% } %>



                

동적쿼리 생성

 output += '<a href="#" class="list-group-item"><img src="http://www.icons101.com/icons/2/facebook_ui_icons_vector_by_lopagof/128/list.png"; onclick="image(\'' + rows2[i].replyer + '\');" width="25" height="auto" class="img-responsive">';



<script>

function image(a){

       //var a =$('#color').text();

       alert(a) 

</script>    

    

}


문제는 음...

동적쿼리를 생성하고 ...

ajax로 값을 받아와서 동적 쿼리에 넣어 그 값을 함수에 던져준다...

숫자는 잘들어가지는데 문자를 던지니깐 계속 에러가 났다.

출력해보니..... undefind 하면서 정의 할 수 없다고.. 

3시간 넘게 삽질했다..


그래서 구글링!!!

인자 사이에 \'' 요런걸 넣어라네.....

갈길이 멀다.ㅠㅠ



*참고

accepted

You need to wrap the input item.store_code with quotation marks; otherwise, it tries to treat it as a variable, not a string:

html += '<div class="col-sm-3"><input type="button" onclick="noActivationCodeRegistration(\'' + item.store_code + '\');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';




node js로 게시판을 만들다가 문제를 발견했다.

해당 글을 클릭하면 글 상세페이지로 넘어가면서 조회수가 1 증가한다.

하지만 웹의 뒤로가기 버튼을 누르면 글 목록 페이지로 이동되면서 조회수가 0 으로 

초기화 된다. 구글링하다가 관련 소스를 발견했다.



//main page

app.get('/', function(req, res) {

    res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');

    res.header('Expires', '-1');

    res.header('Pragma', 'no-cache');


.......

응답 헤더에 옵션 같은 것을 준것 같은데.. 왜 이렇게 작동되는지 찾아봐야겠다.




2.로그아웃 하면 메인화면. 다시 뒤로가기 누르면 로그인이된다....하..

일단 차선책으로 로그아웃하면 메인으로 리다이렉트하고 

메인 페이지에서 뒤로가기 버튼 비활성화 시키기


<script>

history.pushState(null, null, location.href); 

window.onpopstate = function(event) { 

history.go(1); 

}

</script>




view-

<html>

  <head>


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    

  </head>

  <body>

    <input type="text" id="msg" />

    <input type="button" id="ajax_test" value="ajax_test" />

    

    <!--이곳에 결과 값이 붙는다.-->

    <div id="result"></div>

    

    

    <!--ajax 작동 로직-->

    

    <script>

      $('#ajax_test').click( function() {

          $('#result').html('');

          

          $.ajax({

            

              url: '/board/ajax',                //주소

              dataType: 'json',                  //데이터 형식

              type: 'POST',                      //전송 타입

              data: {'msg':$('#msg').val()},      //데이터를 json 형식, 객체형식으로 전송

              

              success: function(result) {          //성공했을 때 함수 인자 값으로 결과 값 나옴

                

                  if ( result['result'] == true ) {

                      $('#result').html(result['msg']);

                  }

                  

              } //function끝

          }); // ------      ajax 끝-----------------

      })

    </script>

    

    

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    

  </body>

</html>


server 부분

/*ajax 테스트 로직*/



router.get('/getajax', function(req, res, next) {


    res.render("main/ajax");

});



/* POST 호출 처리 */

router.post('/ajax', function(req, res, next) {

    console.log('POST 방식으로 서버 호출됨');

    

    //view에 있는 data 에서 던진 값을 받아서

    var msg = req.body.msg;

    

    msg = '[에코]' + msg;

    

    //json 형식으로 보내 준다.

    res.send({result:true, msg:msg});

});



  1. 조새롬 2018.05.23 01:43 신고

    질문이 하나 있습니다. 중간에 res.render()함수를 쓰셨는데, 이건 ejs를 사용하신 건가요? 제가 잘 몰라서 여쭤봅니다...ㅠㅠ

+ Recent posts

티스토리 툴바