かたわく
次に、テンプレートエンジンを使用してテンプレートを挿入して検証します.
前回作成したtemplatesフォルダで詳細に説明します.ejsとindex.ejs, register.ejsファイルを作成します.
次にejsファイルのルートを追加します.
index.jsファイルの真ん中に挟みます.
先ほど作成したインデックスもejsファイルにコードを追加します.
そして中の変数を私が作った変数に変えました.
ここはホームページで、データベースからデータを取得し、カード形式で表示します.
イメージや商品名、商品ラベル、商品価格などが出てきます.それを押すと細部までejsに移動します
まだ細部があります.ejsコードを追加します.
商品の詳細ページです.
商品の詳細ページが出てきたら、カートに入れるかカートに入れるかを選びます.
個数も指定できます.
登録もあります.ejsにコードを追加します.
不眠症を利用して商品を入れるのは不便なので、別のページを作って、そのページに情報を入れて、データベースに保存することができます.後でホームページにボタンを作成し、クリックするとすぐにデータベースに追加されたこのテンプレートが表示されます.
ここでformactionを使用して入力したデータをサーバに送信します.
そうすると、サーバーを実行/家庭に入ると、よく表示されます.
前回作成したtemplatesフォルダで詳細に説明します.ejsとindex.ejs, register.ejsファイルを作成します.
次にejsファイルのルートを追加します.
index.jsファイルの真ん中に挟みます.
app.get('/home', (req, res) => {
res.render('index');
})
app.get('/detail', (req, res) => {
res.render('detail');
})
app.get('/register', (req, res) => {
res.render('register');
})先ほど作成したインデックスもejsファイルにコードを追加します.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>
<link href="/static/mystyle.css" rel="stylesheet">
<title>스파르타 쇼핑몰 | 상품 목록</title>
<script>
$(document).ready(function () {
get_goods()
$("#categorySelect").on("change", function () {
get_goods($(this).val())
})
})
function sign_out() {
$.removeCookie('mytoken', { path: '/' });
$.removeCookie('userName', { path: '/' });
window.location.href = "/"
}
function get_goods(category) {
$("#goodsList").empty()
console.log(category)
$.ajax({
type: "GET",
url: `/api/products${category ? "?tag=" + category : ""}`,
data: {},
success: function (response) {
let products = response["products"]
for (let i = 0; i < products.length; i++) {
make_card(products[i])
}
}
})
}
function make_card(item) {
let htmlTemp = `<div>
<div class="card mb-2" onclick="location.href='/detail?productId=${item["productId"]}'">
<div class="row no-gutters">
<div class="col-sm-5" style="background: #868e96;">
<img src="${item["imageUrl"]}"
class="card-img-top h-100" alt="...">
</div>
<div class="col-sm-7 d-flex">
<div class="card-body flex-fill">
<div class="card-title mb-auto">
<h5 style="display: inline">${item["name"]}</h5>
<span class="card-price ml-2">$${number2decimals(item["price"])}</span>
</div>
<span class="badge badge-secondary">${item["tag"]}</span>
<!-- <p class="card-text"><small class="text-muted">drink</small></p>-->
</div>
</div>
</div>
</div>
</div>`
$("#goodsList").append(htmlTemp)
}
function makeNoti(data) {
let htmlTemp = `<div class="alert alert-sparta alert-dismissible show fade" role="alert" id="customerAlert">
${data["userName"]}님이 방금 <a href="#" class="alert-link">${data["goodsName"]}</a>을 구매했어요!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>`
$("body").append(htmlTemp)
}
function number2decimals(num) {
return (Math.round(num * 100) / 100).toFixed(2);
}
</script>
<style>
.card {
cursor: pointer;
}
html {
overflow: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-sparta justify-content-end">
<a class="navbar-brand" href="/goods">
<img src="/static/logo_big_tr.png" width="30" height="30" class="d-inline-block align-top" alt="">
스파르타 쇼핑몰
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse flex-grow-0 ml-auto" id="navbarSupportedContent" style="">
<ul class="navbar-nav mr-auto text-right">
<li class="nav-item" id="link-cart">
<a class="nav-link" href="/cart">
장바구니<i class="fa fa-shopping-cart ml-2" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item" id="link-logout">
<a class="nav-link" data-toggle="modal" data-target="#signOutModal">
로그아웃<i class="fa fa-sign-out ml-2" aria-hidden="true"></i>
</a>
<div class="modal text-left" id="signOutModal" tabindex="-1" role="dialog"
aria-labelledby="signOutModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signOutModalLabel">로그아웃</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
로그아웃하시면 장바구니가 사라져요!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-sparta" data-dismiss="modal">취소
</button>
<button type="button" class="btn btn-sparta" onclick="sign_out()">로그아웃하기
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="wrap">
<div>
<div class="form-group row mr-0">
<label for="categorySelect" class="col-4 col-form-label">카테고리</label>
<select class="form-control col-8" id="categorySelect">
<option value="" selected>전체</option>
<option value="drink">음료</option>
<option value="food">음식</option>
</select>
</div>
</div>
<div id="goodsList" class="mb-5">
<div>
<div class="card mb-2" onclick="location.href='#'">
<div class="row no-gutters">
<div class="col-sm-5" style="background: #868e96;">
<img src="https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg"
class="card-img-top h-100" alt="...">
</div>
<div class="col-sm-7 d-flex">
<div class="card-body flex-fill">
<div class="card-title mb-auto">
<h5 style="display: inline">상품 1</h5>
<span class="card-price ml-2">$6.20</span>
</div>
<span class="badge badge-secondary">drink</span>
<!-- <p class="card-text"><small class="text-muted">drink</small></p>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>そして中の変数を私が作った変数に変えました.
ここはホームページで、データベースからデータを取得し、カード形式で表示します.
イメージや商品名、商品ラベル、商品価格などが出てきます.それを押すと細部までejsに移動します
まだ細部があります.ejsコードを追加します.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<!-- Font Awesome CSS -->
<link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<link href="/static/mystyle.css" rel="stylesheet" />
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const productId = urlParams.get("productId");
$(document).ready(function() {
get_detail();
$("#numberSelect").on("change", function() {
let orderNum = parseInt($(this).val());
$("#orderNumber").html(
`<small class="mr-2 text-muted">총 수량 ${orderNum}개</small>${number2decimals(
orderNum * sessionStorage.getItem("productsPrice")
)}`
);
sessionStorage.setItem("orderNum", orderNum);
});
});
function sign_out() {
$.removeCookie("mytoken", { path: "/" });
$.removeCookie("userName", { path: "/" });
window.location.href = "/";
}
function get_detail() {
$.ajax({
type: "GET",
url: `/api/products/${productId}`,
data: {},
error: function(xhr, status, error) {
if (status == 404) {
alert("존재하지 않는 상품입니다.");
}
window.location.href = "/home";
},
success: function(response) {
let productsDetail = response["detail"];
$("#productsUrl").attr("src", productsDetail["imageUrl"]);
$("#productsName").text(productsDetail["name"]);
$("#productsPrice").text("$" + number2decimals(productsDetail["price"]));
sessionStorage.setItem("productId", productId);
sessionStorage.setItem("productsName", productsDetail["name"]);
sessionStorage.setItem("productsPrice", productsDetail["price"]);
sessionStorage.setItem("orderNum", 1);
}
});
}
function addCart() {
$.ajax({
type: "POST",
url: `/api/products/${productId}/basket`,
data: {
quantity: sessionStorage.getItem("orderNum")
},
error: function(xhr, status, error) {
if (status == 400) {
alert("존재하지 않는 상품입니다.");
}
window.location.href = "/products";
},
success: function(response) {
if (response["result"] == "success") {
$("#cartModal").modal("show");
}
}
});
}
function buyNow() {
sessionStorage.setItem(
"priceSum",
sessionStorage.getItem("productsPrice")
);
sessionStorage.setItem(
"basket",
JSON.stringify([
{
productsName: sessionStorage.getItem("productsName"),
quantity: sessionStorage.getItem("orderNum")
}
])
);
window.location.href = "/basket";
}
function number2decimals(num) {
return (Math.round(num * 100) / 100).toFixed(2);
}
</script>
<title>스파르타 쇼핑몰 | 상품 상세</title>
<style></style>
</head>
<body>
<nav
class="navbar navbar-expand-sm navbar-dark bg-sparta justify-content-end"
>
<a class="navbar-brand" href="/home">
<img
src="/static/logo_big_tr.png"
width="30"
height="30"
class="d-inline-block align-top"
alt=""
/>
스파르타 쇼핑몰
</a>
<button
class="navbar-toggler ml-auto"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="true"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse collapse flex-grow-0 ml-auto"
id="navbarSupportedContent"
style=""
>
<ul class="navbar-nav mr-auto text-right">
<li class="nav-item" id="link-cart">
<a class="nav-link" href="/basket">
장바구니<i
class="fa fa-shopping-cart ml-2"
aria-hidden="true"
></i>
</a>
</li>
<li class="nav-item" id="link-logout">
<a class="nav-link" data-toggle="modal" data-target="#signOutModal">
로그아웃<i class="fa fa-sign-out ml-2" aria-hidden="true"></i>
</a>
<div
class="modal text-left"
id="signOutModal"
tabindex="-1"
role="dialog"
aria-labelledby="signOutModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signOutModalLabel">로그아웃</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
로그아웃하시면 장바구니가 사라져요!
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-outline-sparta"
data-dismiss="modal"
>
취소
</button>
<button
type="button"
class="btn btn-sparta"
onclick="sign_out()"
>
로그아웃하기
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="wrap">
<div class="row no-gutters">
<div class="col-sm-5">
<img
src="https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg"
class="card-img-top h-100"
alt="..."
id="productsUrl"
/>
</div>
<div class="col-sm-7 card-body px-3">
<div class="flex-fill mt-3">
<div class="d-flex justify-content-between mb-3">
<h5 style="display: inline" id="productsName">상품 1</h5>
<span class="card-price" id="productsPrice">$6.20</span>
</div>
<div class="form-group row mr-0">
<label for="numberSelect" class="col-4 col-form-label"
>수량</label
>
<select class="custom-select col-8" id="numberSelect">
<option selected value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
<option value="4">4개</option>
<option value="5">5개</option>
</select>
</div>
<hr />
<div class="row mb-3">
<div class="col-5">총 상품금액</div>
<div class="col-7 text-right" id="orderNumber">
<small class="mr-2 text-muted">총 수량 1개</small>$6.20
</div>
</div>
<div class="row d-flex justify-content-around">
<div class="col-6 pr-2">
<button
type="button"
class="btn btn-outline-sparta btn-block"
onclick="addCart()"
>
장바구니
</button>
</div>
<div class="col-6 pl-2">
<button
type="button"
class="btn btn-sparta btn-block"
onclick="buyNow()"
>
바로 구매
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="modal text-left"
id="cartModal"
tabindex="-1"
role="dialog"
aria-labelledby="cartModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cartModalLabel">알림</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
장바구니에 담았습니다! 장바구니로 갈까요?
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-outline-sparta"
data-dismiss="modal"
>
취소
</button>
<button
type="button"
class="btn btn-sparta"
onclick='window.location.href="/basket"'
>
장바구니
</button>
</div>
</div>
</div>
</div>
</body>
</html>商品の詳細ページです.
商品の詳細ページが出てきたら、カートに入れるかカートに入れるかを選びます.
個数も指定できます.
登録もあります.ejsにコードを追加します.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
</head>
<body>
<h1>Register</h1>
<form action="/api/products" method="POST">
<p>상품ID<input type="number" name="productId" required></p>
<p>상품명<input type="text" name="name" ></p>
<p>상품 이미지 URL<input type="text" name="imageUrl" ></p>
<p>상품 태그<input type="text" name="tag" ></p>
<p>상품 카테고리<input type="number" name="price" ></p>
<p><input type="submit" value="등록"></p>
</form>
</body>
</html>不眠症を利用して商品を入れるのは不便なので、別のページを作って、そのページに情報を入れて、データベースに保存することができます.後でホームページにボタンを作成し、クリックするとすぐにデータベースに追加されたこのテンプレートが表示されます.
ここでformactionを使用して入力したデータをサーバに送信します.
そうすると、サーバーを実行/家庭に入ると、よく表示されます.
Reference
この問題について(かたわく), 我々は、より多くの情報をここで見つけました https://velog.io/@gusrn8959/템플릿テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol