- 플러그인 - 라이브러리에 모아 놓은 특정 기능을 가지고와서 사용할 수 있는 기능
- nodemon은 한번만 설치하면 다시 설치 안해도 된다.
ex04>routes>app.js
// 2021.08.06 연결해주는 코드의 역할을 한다.
// 라우터 뿌려준다고 생각하자.
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
app.use('/', indexRouter); // '/' 를 하면 routes>index.js
app.use('/users', usersRouter); // '/users' 를 하면 routes>users.js
ex04>views>index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
[new] ex04>public>stylesheet>style.css
#container {
width: 940px;
padding: 20px;
border: 1px solid burlywood;
margin: 0px auto;
}
#header {
padding: 20px;
border: 1px solid burlywood;
margin-bottom: 10px;
}
#content {
padding: 20px;
border: 1px solid burlywood;
margin-bottom: 10px;
}
#footer {
padding: 20px;
border: 1px solid burlywood;
}
<div id="header">
<img src="/images/back.jpg" width=900/>
</div>
- [new] DB
#2021.08.06
#데이터 베이스 생성
create database furnituredb;
#유저 생성
create user 'furniture'@'localhost' identified by 'pass';
#유저에게 데이터베이스 권한 부여
grant all privileges on furnituredb.* to 'furniture'@'localhost';
create table product(
id int auto_increment primary key,
title nvarchar(100) not null,
image nvarchar(100),
price int default 0
);
insert into product(title, image, price)
values('5단원목 서랍장', '/images/img01.jpg', 150000);
insert into product(title, image, price)
values('슈퍼싱글 원목침대', '/images/img02.jpg', 500000);
insert into product(title, image, price)
values('싱글 원목침대', '/images/img03.jpg', 450000);
insert into product(title, image, price)
values('4인용 가죽 쇼파', '/images/img04.jpg', 1250000);
insert into product(title, image, price)
values('12자 원목 장농', '/images/img05.jpg', 1150000);
insert into product(title, image, price)
values('3단 원목 서랍장', '/images/img06.jpg', 120000);
insert into product(title, image, price)
values('퀀 가죽 침대(흰색)', '/images/img07.jpg', 2150000);
insert into product(title, image, price)
values('퀸 가죽 침대(아이보리)', '/images/img08.jpg', 2150000);
insert into product(title, image, price)
values('12자 원목 슬라이드 장농', '/images/img09.jpg', 1150000);
insert into product(title, image, price)
values('TV 장식장(거울포함)', '/images/img10.jpg', 50000);
insert into product(title, image, price)
values('4인용 가죽 쇼파(스툴포함)', '/images/img11.jpg', 1150000);
insert into product(title, image, price)
values('6인용 원목식탁', '/images/img12.jpg', 850000);select * from product;ㄴ 확인
[new] ex04>db.js
var mysql = require('mysql');
var conn;
exports.connect = function () {
conn = mysql.createPool({
connectionLimit: 100,
host: 'localhost',
user: 'furniture', //*****/
password: 'pass', //*****/
database: 'furnituredb' /*****/
});
}
exports.get = function () {
return conn;
};
ex04>app,js
//2021.08.06
//데이타베이스 연결
var db = require('./db');
db.connect(function(err){
if(err){
console.log('DB error.......');
process.exit(1);
}else{
console.log('DB Success......');
}
});app.use('/furniture', require('./routes/furniture'))
[new] ex04>routes>furniture.js
var express = require('express');
var router = express.Router();
var db = require('../db'); // new
/* GET users listing. */ // new
router.get('/', function(req, res, next) {
var sql = 'select *, format(price,0) fprice from product;';
db.get().query(sql,[], function(err,rows){
res.send(rows);
});
});
module.exports = router;
- 터미널에서 mysql을 설치
C:\data\node\ex04>npm install mysql
+ mysql@2.18.1
added 9 packages from 14 contributors and audited 64 packages in 1.681s
found 0 vulnerabilities
C:\data\node\ex04>
- select tag를 이용하여 몇개씩 출력할지 선택하고, 선택된 갯수를 기준으로 다음 페이지로 넘어갈 수 있는 버튼을 만들어보자.
ex04>routes>furniture.js
var express = require('express');
var router = express.Router();
var db = require('../db'); // new
/* GET users listing. */ // new
router.get('/', function(req, res, next) {
var perPageNum = parseInt(req.query.perPageNum);
var page = parseInt(req.query.page);
var sql = 'select *, format(price,0) fprice from product limit ?,?;';
db.get().query(sql,[(page-1)*perPageNum, perPageNum], function(err,rows){
res.send(rows);
});
});
module.exports = router;
ex04\public\stylesheets\style.css
@font-face {
font-family: 'IBMPlexSansKR-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'IBMPlexSansKR-Regular';
}
#container {
width: 940px;
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin: 0px auto;
}
#container h3{
text-align: center;
}
#header {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin-bottom: 10px;
}
#content {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin-bottom: 10px;
}
#footer {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
}
#product {
width: 800px;
margin: 0px auto;
overflow: hidden;
}
.box {
width: 170px;
float: left;
background-color: rgb(250, 239, 234);
border: 1px solid rgb(245, 224, 214);
margin-left: 15px;
margin-bottom: 20px;
box-shadow: 5px 5px 5px rgb(248, 215, 211);
padding: 5px;
}
.box img {
margin-left: 10px;
}
.box .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 5px;
font-size: 18px;
}
ex04\views\index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="/images/back.jpg" width=900 />
</div>
<div id="content">
<h3>상품목록</h3>
<div style="border:1px solid dotted rgb(233, 137, 126); padding: 5px;">
<select id="perPageNum" style="height: 30px;">
<option value="4">4개씩 출력</option>
<option value="8">8개씩 출력</option>
<option value="12">12개씩 출력</option>
<option value="16">16개씩 출력</option>
</select>
</div>
<div id="product"></div>
<div id="pagination" style="text-align: center; padding: 10px;">
<button id="prev"><</button>
<span id="page">1</span>
<button id="next">></button>
</div>
</div>
<div id="footer">
<h3>COPYRIGHT F.Y.B ALL RIGHT RESERVED.</h3>
</div>
</div>
</body>
<script>
// getList(); 이전에 변수 선언
var page = 1;
// 목록 출력
getList();
// 이전 버튼
$('#prev').on('click',function(){
page--;
getList();
});
// 다음 버튼
$('#next').on('click',function(){
page++;
getList();
});
// #perPageNum 이 바뀔때 마다 다시 목록 출력
$('#perPageNum').on('change',function(){
page=1;
getList();
});
// 목록 출력 함수
function getList() {
var perPageNum = $('#perPageNum').val();
$('#page').html(page);
// db에서 정보 가지고 오는 ajax
$.ajax({
type: 'get',
url: '/furniture',
dataType: 'json',
data: {'perPageNum':perPageNum, 'page':page},
success: function (data) {
var str = '';
$(data).each(function () {
var id = this.id;
var title = this.title;
var price = this.fprice;
var image = this.image;
str += `<div class="box">`;
str += `<img src="${image}" width=150 height=150/>`;
str += `<div class="title">${id} : ${title}</div>`;
str += `<div class="price">${price}원</div>`;
str += `</div>`;
});
$('#product').html(str);
}
});
//
};
</script>
</html>
- 기능추가
1. 상품조건순 정렬
2. 상품 title 검색으로 정렬 + 상품수 바뀜
ex04\routes\furniture.js
var express = require('express');
var router = express.Router();
var db = require('../db');
/* GET users listing. */
router.get('/', function(req, res, next) {
var perPageNum = parseInt(req.query.perPageNum);
var page = parseInt(req.query.page);
var order = req.query.order; // new
var search = req.query.search; // new
var sql = `select *, format(price,0) fprice from product where title like '%${search}%' order by ${order} limit ?,?;`; // new
db.get().query(sql,[(page-1)*perPageNum, perPageNum], function(err,rows){
var data = rows;
// 전체 데이터 갯수 출력
sql = `select count(*) cnt from product where title like '%${search}%'`;
db.get().query(sql,[],function(err,rows){
var count=rows[0].cnt;
res.send({'rows':data,'count':count});
});
// 결과 출력
});
});
module.exports = router;
ex04\views\index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="/images/back.jpg" width=900 />
</div>
<div id="content">
<h3>상품목록</h3>
<div id="selectbox">
<select id="order" style="height: 30px;">
<option value="id">상품번호순</option>
<option value="price">상품저가순</option>
<option value="price desc">상품고가순</option>
<option value="title">상품이름순</option>
</select>
<select id="perPageNum" style="height: 30px;">
<option value="4">4개씩 출력</option>
<option value="8">8개씩 출력</option>
<option value="12">12개씩 출력</option>
<option value="16">16개씩 출력</option>
</select>
<span id="totalCount"></span> <!-- new -->
<input type="text" placeholder="검색입력" id="txtSearch"/>
<div id="product"></div>
<div id="pagination" style="text-align: center; padding: 10px;">
<button id="prev"><</button>
<span id="page">1</span>
<button id="next">></button>
</div>
</div>
<div id="footer">
<h3>COPYRIGHT F.Y.B ALL RIGHT RESERVED.</h3>
</div>
</div>
</body>
<script>
// getList(); 이전에 변수 선언
var page = 1;
// 목록 출력
getList();
// 검색어 상자에서 엔터키를 입력할 경우
$('#txtSearch').on('keypress',function(e){
if(e.keyCode==13){
page==1;
getList();
};
});
// 정렬키가 바뀔경우 // new
$('#order').on('change',function(){
page=1;
getList();
});
// 이전 버튼
$('#prev').on('click', function () {
page--;
getList();
});
// 다음 버튼
$('#next').on('click', function () {
page++;
getList();
});
// #perPageNum 이 바뀔때 마다 다시 목록 출력
$('#perPageNum').on('change', function () {
page = 1;
getList();
});
// 목록 출력 함수
function getList() {
var perPageNum = $('#perPageNum').val();
var order = $('#order').val(); // new
var search = $('#txtSearch').val(); // new
// db에서 정보 가지고 오는 ajax
$.ajax({
type: 'get',
url: '/furniture',
dataType: 'json',
data: {
'perPageNum': perPageNum,
'page': page,
'order': order, // new
'search': search // new
},
success: function (data) {
var str = '';
var count = data.count;
//.ceil ; 나눠서 올림
var lastPage = Math.ceil(count/perPageNum);
$('#page').html(page+'/'+lastPage);
$('#totalCount').html('상품수:'+count);
$(data.rows).each(function () {
var id = this.id;
var title = this.title;
var price = this.fprice;
var image = this.image;
str += `<div class="box">`;
str += `<img src="${image}" width=150 height=150/>`;
str += `<div class="title">${id} : ${title}</div>`;
str += `<div class="price">${price}원</div>`;
str += `</div>`;
});
$('#product').html(str);
// 첫번째 page일때
if (page == 1) $('#prev').attr('disabled', true);
else $('#prev').attr('disabled', false);
if (page == lastPage) $('#next').attr('disabled', true);
else $('#prev').attr('disabled', false);
}
});
};
</script>
</html>
ex04\public\stylesheets\style.css
@font-face {
font-family: 'IBMPlexSansKR-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'IBMPlexSansKR-Regular';
}
#container {
width: 940px;
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin: 0px auto;
}
#container h3 {
text-align: center;
}
#header {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin-bottom: 10px;
}
#content {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin-bottom: 10px;
}
#footer {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
}
#product {
width: 800px;
margin: 0px auto;
overflow: hidden;
}
.box {
width: 170px;
float: left;
background-color: rgb(250, 239, 234);
border: 1px solid rgb(245, 224, 214);
margin-left: 15px;
margin-bottom: 20px;
box-shadow: 5px 5px 5px rgb(248, 215, 211);
padding: 5px;
}
.box img {
margin-left: 10px;
}
.box .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 5px;
font-size: 18px;
}
#txtSearch {
height: 20px;
float: right;
}
#selectbox {
margin-bottom: 20px;
border: 1px solid dotted rgb(233, 137, 126);
padding: 5px;
}
ex04\app.js
app.use('/notice', require('./routes/notice'))
[new] ex04\routes\notice.js
var express = require('express');
var router = express.Router();
var db = require('../db');
/* 공지사항 목록및 갯수*/
router.get('/', function(req, res, next) {
var num = parseInt(req.query.num)
//공지사항 목록
var sql = `select *, date_format(wdate,"%Y-%m-%d %h:%i:%s") fdate from notice order by id desc limit ?,5`;
db.get().query(sql, [num], function(err, rows){
var result=rows;
//공지사항 글수
sql = 'select format(count(*),0) cnt from notice';
db.get().query(sql, [], function(err, rows){
var count = rows[0].cnt;
res.send({'rows': result, 'count':count});
});
});
});
module.exports = router;
ex04\views\index.ejs
<h3>공지사항</h3>
<div id="notice"></div>
<div id="more">더보기</div>ㄴ footer위에 추가
// 상위에 변수 추가
var noticeNum = 0;
// function 불러오기
getNotice();
// row를 누르면 content가 나오게 한다.
$('#notice').on('click', '.row', function () {
//모든 content를 숨긴다.
$('#notice .row .content').each(function () {
$(this).hide();
});
//현재 선택한 content를 보여준다.
var content = $(this).find('.content');
content.show();
});
//#more button click
$('#more').on('click', function () {
noticeNum += 5;
getNotice();
});
// 공지사항목록출력
function getNotice() {
$.ajax({
type: 'get',
url: '/notice',
dataType: 'json',
data: {
'num': noticeNum
},
success: function (data) {
var str = '';
$(data.rows).each(function () {
var id = this.id;
var title = this.title;
var content = this.content;
var fdate = this.fdate;
str += `<div class="row" style="border-bottom:1px solid; padding:10px;">`;
str += `<span class="no">[${id}]</span>`
str += `<span class="title">${title}</span>`
str += `<span class="fdate">${fdate}</span>`
str += `<div class="content" style="margin-top:20px;">${content}</div>`
str += `</div>`;
});
$('#notice').append(str);
}
});
};ㄴ script에 추가
- 최종본
C:\data\node\ex04\public\stylesheets\style.css
@font-face {
font-family: 'IBMPlexSansKR-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'IBMPlexSansKR-Regular';
}
#container {
width: 940px;
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin: 0px auto;
}
#container h3 {
text-align: center;
}
#header {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin-bottom: 10px;
}
#content {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
margin-bottom: 10px;
}
#footer {
padding: 20px;
border: 1px solid rgb(181, 90, 48);
}
#product {
width: 800px;
margin: 0px auto;
overflow: hidden;
}
.box {
width: 170px;
float: left;
background-color: rgb(250, 239, 234);
border: 1px solid rgb(245, 224, 214);
margin-left: 15px;
margin-bottom: 20px;
box-shadow: 5px 5px 5px rgb(248, 215, 211);
padding: 5px;
}
.box img {
margin-left: 10px;
}
.box .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 5px;
font-size: 18px;
}
#txtSearch {
height: 20px;
float: right;
}
#selectbox {
margin-bottom: 20px;
border: 1px solid dotted rgb(233, 137, 126);
padding: 5px;
}
#notice .content {
display: none;
}
#notice .title {
cursor: pointer;
}
#more {
cursor: pointer;
text-align: center;
margin: 20px 0px 30px 0px;
color: rosybrown;
text-decoration: underline;
}
#slider{
position: relative;
overflow: hidden;
width: 770px;
height: 150px;
border: 1px solid rgb(224, 50, 31);
margin: 0px auto;
}
#items{
position: absolute;
overflow: hidden;
width: 1320px;
}
#items .item {
float: left;
margin-left: 10px;
width: 100px;
}
C:\data\node\ex04\routes\furniture.js
var express = require('express');
var router = express.Router();
var db = require('../db');
// 베스트상품
router.get('/best',function(req,res){
var sql = 'select * from product order by price asc limit 0,12';
db.get().query(sql,[],function(err,rows){
res.send(rows);
});
});
/* GET 상품목록과 갯수. */
router.get('/', function(req, res, next) {
var perPageNum = parseInt(req.query.perPageNum);
var page = parseInt(req.query.page);
var order = req.query.order; // new
var search = req.query.search; // new
var sql = `select *, format(price,0) fprice from product where title like '%${search}%' order by ${order} limit ?,?;`; // new
db.get().query(sql,[(page-1)*perPageNum, perPageNum], function(err,rows){
var data = rows;
// 전체 데이터 갯수 출력
sql = `select count(*) cnt from product where title like '%${search}%'`;
db.get().query(sql,[],function(err,rows){
var count=rows[0].cnt;
res.send({'rows':data,'count':count});
});
// 결과 출력
});
});
module.exports = router;
C:\data\node\ex04\routes\notice.js
var express = require('express');
var router = express.Router();
var db = require('../db');
/* 공지사항 목록및 갯수*/
router.get('/', function(req, res, next) {
var num = parseInt(req.query.num)
//공지사항 목록
var sql = `select *, date_format(wdate,"%Y-%m-%d %h:%i:%s") fdate from notice order by id desc limit ?,5`;
db.get().query(sql, [num], function(err, rows){
var result=rows;
//공지사항 글수
sql = 'select format(count(*),0) cnt from notice';
db.get().query(sql, [], function(err, rows){
var count = rows[0].cnt;
res.send({'rows': result, 'count':count});
});
});
});
module.exports = router;
C:\data\node\ex04\views\index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="/images/back.jpg" width=900 />
</div>
<div id="content">
<h3>상품목록</h3>
<div id="selectbox">
<select id="order" style="height: 30px;">
<option value="id">상품번호순</option>
<option value="price">상품저가순</option>
<option value="price desc">상품고가순</option>
<option value="title">상품이름순</option>
</select>
<select id="perPageNum" style="height: 30px;">
<option value="4">4개씩 출력</option>
<option value="8">8개씩 출력</option>
<option value="12">12개씩 출력</option>
<option value="16">16개씩 출력</option>
</select>
<span id="totalCount"></span> <!-- new -->
<input type="text" placeholder="검색입력" id="txtSearch" />
<div id="product"></div>
<div id="pagination" style="text-align: center; padding: 10px;">
<button id="prev"><</button>
<span id="page">1</span>
<button id="next">></button>
</div>
<h3>😍BEST 상품😍</h3>
<div id="slider">
<div id="items"></div>
</div>
<div style="text-align: center; margin-top: 10px;">
<button id="left" disabled><</button>
<button id="right">></button>
</div>
<h3>공지사항</h3>
<div id="notice"></div>
<div id="more">더보기</div>
</div>
<div id="footer">
<h3>COPYRIGHT F.Y.B ALL RIGHT RESERVED.</h3>
</div>
</div>
</body>
<script>
// getList(); 이전에 변수 선언
var page = 1;
var noticeNum = 0;
// 목록 출력
getList();
getNotice();
getBest();
var sliderNum = 0;
// click right
$('#right').on('click', function () {
sliderNum++;
slider();
});
// click left
$('#left').on('click', function () {
sliderNum--;
slider();
});
function slider() {
$('#items').animate({
left: -(sliderNum) * 110
}, 100);
if (sliderNum == 0) $('#left').attr('disabled', true);
else $('#left').attr('disabled', false);
if (sliderNum == 3) $('#right').attr('disabled', true);
else $('#right').attr('disabled', false);
};
// best 상품 출력
function getBest() {
$.ajax({
type: 'get',
url: '/furniture/best',
dataType: 'json',
success: function (data) {
var str = '';
$(data).each(function () {
var image = this.image;
var id = this.id;
str += `<div class="item">`;
str += `<img src="${image}" width=100 height=100/>`;
str += `<div>${id}</div>`;
str += `</div>`;
});
$('#items').html(str);
}
})
}
// row를 누르면 content가 나오게 한다.
$('#notice').on('click', '.row', function () {
//모든 content를 숨긴다.
$('#notice .row .content').each(function () {
$(this).hide();
});
//현재 선택한 content를 보여준다.
var content = $(this).find('.content');
content.show();
});
//#more button click
$('#more').on('click', function () {
noticeNum += 5;
getNotice();
});
// 공지사항목록출력
function getNotice() {
$.ajax({
type: 'get',
url: '/notice',
dataType: 'json',
data: {
'num': noticeNum
},
success: function (data) {
var str = '';
$(data.rows).each(function () {
var id = this.id;
var title = this.title;
var content = this.content;
var fdate = this.fdate;
str += `<div class="row" style="border-bottom:1px solid; padding:10px;">`;
str += `<span class="no">[${id}]</span>`
str += `<span class="title">${title}</span>`
str += `<span class="fdate">${fdate}</span>`
str += `<div class="content" style="margin-top:20px;">${content}</div>`
str += `</div>`;
});
$('#notice').append(str);
}
});
};
// 검색어 상자에서 엔터키를 입력할 경우
$('#txtSearch').on('keypress', function (e) {
if (e.keyCode == 13) {
page == 1;
getList();
};
});
// 정렬키가 바뀔경우 // new
$('#order').on('change', function () {
page = 1;
getList();
});
// 이전 버튼
$('#prev').on('click', function () {
page--;
getList();
});
// 다음 버튼
$('#next').on('click', function () {
page++;
getList();
});
// #perPageNum 이 바뀔때 마다 다시 목록 출력
$('#perPageNum').on('change', function () {
page = 1;
getList();
});
// 목록 출력 함수
function getList() {
var perPageNum = $('#perPageNum').val();
var order = $('#order').val(); // new
var search = $('#txtSearch').val(); // new
// db에서 정보 가지고 오는 ajax
$.ajax({
type: 'get',
url: '/furniture',
dataType: 'json',
data: {
'perPageNum': perPageNum,
'page': page,
'order': order, // new
'search': search // new
},
success: function (data) {
var str = '';
var count = data.count;
//.ceil ; 나눠서 올림
var lastPage = Math.ceil(count / perPageNum);
$('#page').html(page + '/' + lastPage);
$('#totalCount').html('상품수:' + count);
$(data.rows).each(function () {
var id = this.id;
var title = this.title;
var price = this.fprice;
var image = this.image;
str += `<div class="box">`;
str += `<img src="${image}" width=150 height=150/>`;
str += `<div class="title">${id} : ${title}</div>`;
str += `<div class="price">${price}원</div>`;
str += `</div>`;
});
$('#product').html(str);
// 첫번째 page일때
if (page == 1) $('#prev').attr('disabled', true);
else $('#prev').attr('disabled', false);
if (page == lastPage) $('#next').attr('disabled', true);
else $('#prev').attr('disabled', false);
}
});
};
</script>
</html>
C:\data\node\ex04\app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 2021.08.06 연결해주는 코드의 역할을 한다.
// 라우터 뿌려준다고 생각하자.
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var noticeRouter = require('./routes/notice');
app.use('/', indexRouter); // '/' 를 하면 routes>index.js
app.use('/users', usersRouter); // '/users' 를 하면 routes>users.js
app.use('/furniture', require('./routes/furniture'));
app.use('/notice',noticeRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
//2021.08.06
//데이타베이스 연결
var db = require('./db');
db.connect(function(err){
if(err){
console.log('DB error.......');
process.exit(1);
}else{
console.log('DB Success......');
}
});
module.exports = app;
C:\data\node\ex04\db.js
var mysql = require('mysql');
var conn;
exports.connect = function () {
conn = mysql.createPool({
connectionLimit: 100,
host: 'localhost',
user: 'furniture', //*****/
password: 'pass', //*****/
database: 'furnituredb' /*****/
});
}
exports.get = function () {
return conn;
};
'ICIA 수업일지' 카테고리의 다른 글
| 2021.08.10 수업일지(node.js, mysql) (0) | 2021.08.10 |
|---|---|
| 2021.08.09 수업일지(Mysql, node.js, html, css) (0) | 2021.08.09 |
| 2021.08.05 수업일지{html, css, java script(jQuery),MySql,node.js} (0) | 2021.08.07 |
| 2021.08.04 수업일지(node.js, MySQL, VSC) (0) | 2021.08.07 |
| 2021.08.03 수업일지(MySQL, jQuery, node.js) (0) | 2021.08.07 |
