반응형
mongo DB에 저장된 데이터를 조회하여 웹페이지에 간단하게 표출해 봅니다.
라우트를 적용 (url : localhost:3000/products)하여 콜백을 이용해서 데이터 조회되도록 아래와 같이 작성합니다.
데이터베이스에서 조회하기 때문에 조회시간을 고려하여 비동기 조회로 async /await 을 사용합니다.
const express = require("express");
const app = express();
const path = require("path");
const Product = require("./models/product");
const mongoose = require("mongoose");
mongoose
.connect("mongodb://127.0.0.1:27017/farmStand", { useNewUrlParser: true })
.then(() => {
console.log("mongo connection open !!!");
})
.catch((err) => {
console.log("OH NO mongo connection error !!!");
console.log(err);
});
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.get("/products", async (req, res) => {
const products = await Product.find({});
console.log(products);
res.send("ALL PRODUCTS WILL BE HERE!");
});
app.listen(3000, () => {
console.log("APP IS LISTENING ON PORT 3000!");
});>nodemon index.js 로 서버를 실행하면 Prooducts 데이터를 불러옵니다.
웹페이지 localhost:3000/products 접속하면 정상 표출되는 것을 볼 수 있습니다.
실제 데이터를 불러와서 페이지에 보여주기 위해서 views>products 폴더를 만들고, index.ejs 파일을 다음과 같이 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>All Produtcs</title>
</head>
<body>
<h1>All Products!</h1>
<ul>
<% for (let product of products) { %>
<li><%=product.name %></li>
<% } %>
</ul>
</body>
</html>해당 파일을 라우트에 적용합니다. index.js 파일에 라우트의 응답으로 products/index.ejs 를 불러오고 index.ejs로 데이터베이스에서 조회된 products 데이터를 전달합니다.
(...)
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.get("/products", async (req, res) => {
const products = await Product.find({});
res.render("products/index", { products });
});
(...)다음과 같이 products 라우트 조회 시 proudct 목록이 조회됩니다.
반응형
'데이터베이스' 카테고리의 다른 글
| mongoose-express 신규데이터 입력폼 만들기 (0) | 2023.08.12 |
|---|---|
| mongoose-express 상세페이지 만들기 (0) | 2023.08.12 |
| mongoose - express 모델 만들기 (0) | 2023.08.05 |
| mongoose와 express 연결하기(Node.js) (0) | 2023.08.05 |
| mongoose 데이터 삭제하기 - REPL 사용 (0) | 2023.07.30 |
