반응형
이전까지 CRUD 기능을 단계별로 만들어 보았습니다.
이번에는 활용성이 높은 데이터 필터링 기능을 어떻게 만들면 되는지 직접 구현해 보겠습니다.
Product 데이터 항목중 카테고리별 데이터 조회기능을 다음과 같이 단계적으로 만들어 봅니다.
- show.ejs에서 카테고리에 링크 추가하기
- index.js 에서 카테고리 선택시 해당 카테고리 데이터만 필터링 기능 만들기
- 카테고리별 리스트에서 전체 Product 페이지로 돌아가기
1. 카테고리 링크 추가 및 필터링 라우트 설정
상세페이지의 category 데이터에 <a> tag 통해서 이동할 라우터를 설정합니다.
라우터는 다음과 같이 두가지로 만들 수 있습니다.
- /categories/vegetable : 카테고리명으로 라우터 적용
- /products?category=vegetable : 쿼리문자열 기능으로 라우터 적용
데이터 필터링 기능은 두번째와 같이 쿼리문자열 기능을 사용하는 것을 추천합니다.
별도 category 라우트를 구성하는 것보다 products를 사용함으로써 일관성을 유지하는 것이 더 좋습니다.
show.ejs
(...)
<body>
<h1><%= product.name %></h1>
<ul>
<li>Price : $<%= product.price %></li>
<li>
Category :
<a href="/products?category=<%= product.category %>"
><%= product.category %></a
>
</li>
</ul>
<a href="/products">All Products</a>
<a href="/products/<%=product._id%>/edit">Edit Product</a>
<form action="/products/<%=product._id%>?_method=DELETE" method="POST">
<button>Delete</button>
</form>
</body>
(...)
2. index.js 에서 카테고리 선택시 해당 카테고리 데이터만 필터링 기능 만들기
쿼리문자열로 카테고리를 받아오면 mongoose 에서 해당 카테고리로 데이터를 조회하고 선택한 카테고리가 없으면 전체 product를 보여줍니다.
// 변경 전
app.post("/products", async (req, res) => {
const newProduct = new Product(req.body);
await newProduct.save();
res.redirect(`/products/${newProduct._id}`);
});
// 변경 후
app.get("/products", async (req, res) => {
const { category } = req.query;
if (category) {
const products = await Product.find({ category });
res.render("products/index", { products, category });
} else {
const products = await Product.find({});
res.render("products/index", { products, category: "All" });
}
});
fruit 카테고리 데이터만 조회됩니다.
3. 페이지에 카테고리에 맞는 타이틀로 수정
index.ejs에서 타이틀을 카테고리 필터링 조건에 맞도록 수정하고 카테고리 리스트 페이지에서 전체 목록 페이지로 이동하는 버튼 만들기
전체 목록에서는 "All Products" 링크가 보이지 않도록 조건문으로 처리합니다.
(...)
<body>
<h1><%=category %> Products!</h1>
<ul>
<% for (let product of products) { %>
<li><a href="/products/<%= product._id %>"><%=product.name %></a></li>
<% } %>
</ul>
<a href="/products/new">New Product</a>
<% if (category !== 'All') { %>
<a href="/products">All Products</a>
<% } %>
</body>
(...)
반응형
'데이터베이스' 카테고리의 다른 글
| mongoose-express 데이터 삭제하기 (0) | 2023.08.22 |
|---|---|
| mongoose-express 카테고리 선택자 자동 셋팅 (0) | 2023.08.21 |
| mongoose-express 데이터 업데이트 하기 (0) | 2023.08.19 |
| mongoose-express 신규데이터 입력폼 만들기 (0) | 2023.08.12 |
| mongoose-express 상세페이지 만들기 (0) | 2023.08.12 |
