spa로 페이지 구성하기

프로그래밍/NodeJS

spa로 페이지 구성하기

타코코딩 2023. 10. 30. 18:36

url이 바뀌지 않고 json출력을 바꿔가는 방법 연습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>안녕하세요 ejs파일 테스트</h1>
    <ul style="display: flex; list-style: none">
      <li
        onclick="getItemBy('가전제품')"
        style="border: 1px solid black; margin: 10px">
        가전제품
      </li>
      <li
        onclick="getItemBy('컴퓨터')"
        style="border: 1px solid black; margin: 10px">
        컴퓨터
      </li>
      <li
        onclick="getItemBy('생활용품')"
        style="border: 1px solid black; margin: 10px">
        생활용품
      </li>
    </ul>
    <div id="list"></div>
    <script>
      getItemBy("가전제품");
      function getItemBy(name) {
        const url = "/" + "category" + "/" + name;
        fetch(url)
          .then((res) => res.json())
          .then((result) => {
            const output = `${result
              .map(
                (v) => `
            <h1>${v.category_name}</h1>
            <h1>${v.product_name}</h1>
            <h1>${v.unit_price}</h1>`
              )
              .join("\n")}`;
            document.querySelector("#list").innerHTML = output;
          });
      }
    </script>
  </body>
</html>

import * as categoryRepository from "../repository/categoryRepository.js";

export async function getHome(req, res) {
  res.render("index.ejs");
}

export async function getList(req, res) {
  let { page } = req.params;
  const row = await categoryRepository.getHome(page);
  res.json(row);
}

import { db } from "../db/database.js";

export async function getHome(name) {
  return db
    .execute(
      "SELECT  category_name, product_name , unit_price, sub_category_name  FROM order_detail od INNER JOIN  product p ON od.product_id = p.product_id INNER JOIN sub_category sc ON sc.sub_category_id = p.sub_category_id INNER JOIN category c  ON c.category_id = sc.category_id WHERE  category_name = ?",
      [name]
    )
    .then((result) => result[0]);
}