In My Team project, we made rest api using Java Spring boot.
And we made frontend server using node.js and express modules.
but when launched nodemon app.js, my page didn't rendered to html page.
I attached json data using fetch, javascript code, html file, and app.js code below.
What is my mistake?
0️⃣ fetch data (this is dummy data. we used 6 things like them.)
{"id":6,"meetDateTime":"23/02/03","meetLocation":"장소QWWQER","currentPeople":2,"maxPeople":4,"title":"모집-제목WQEQWE","content":"내용입니다 테스트12345667889","close":false,"exhibitionName":"2022 안성맞춤 천문과학관","exhibitionMainUrl":"http://ticketimage.interpark.com/Play/image/large/21/21013073_p.gif","userName":"namesasdas","createdAt":"2023-02-06T17:19:33.836827"}
1️⃣ javascript code
async function getGatherings() {
let url = `http://localhost:8080/api/v1/gatherings`;
try {
let res = await fetch(url);
res = await res.json();
return await res.result.content();
} catch (err) {
console.log(err);
}
}
async function displayGatherings() {
// getGatherings() 함수의 결과로 파티 결과를 받아옵니다.
let gatherings = await getGatherings();
// 빈 html 객체 생성
let html = '';
gatherings.forEach(gathering => {
let htmlSeg = `
<div class="pricing-horizontal row col-10 m-auto d-flex shadow-sm rounded overflow-hidden bg-white">
<div class="pricing-horizontal-icon col-md-3 text-center bg-secondary text-light py-4">
<i class="display-1 bx bx-package pt-4"></i>
<img src = "${gathering.exhibitionMainUrl}" class = "exhibition_poster_image"/>
<h5 class="h5 semi-bold-600 pb-4 light-300"> ${gathering.exhibitionName}</h5>
</div>
<!-- 파티 정보 넣기 -->
<div class="pricing-horizontal-body offset-lg-1 col-md-5 col-lg-4 d-flex align-items-center pl-5 pt-lg-0 pt-4">
<ul class="text-left px-4 list-unstyled mb-0 light-300">
<p> ${gathering.title} </p>
<p> 전시 제목 </p>
<li><i class="bx bxs-circle me-2"></i>5 Users</li>
<li><i class="bx bxs-circle me-2"></i>2 TB space</li>
<li><i class="bx bxs-circle me-2"></i>Community Forums</li>
</ul>
</div>
<!-- 파티 참석 인원 동그라미 넣기 -->
<div class="pricing-horizontal-tag col-md-4 text-center pt-3 d-flex align-items-center">
<div class="w-100 light-300">
<!-- 현재 참석 인원 -->
<p> ${gathering.currentPeople}/${gathering.maxPeople}</p>
<!-- 버튼 -->
<a href="#" class="btn rounded-pill px-4 btn-outline-primary mb-3"> 더 알아보기 </a>
<a href="#" class="btn rounded-pill px-4 btn-outline-primary mb-3"> 신청하기! </a>
</div>
</div>
</div> `;
html += htmlSeg;
});
let container = document.getElementById('this-is-card-container');
container.innerHTML = html;
2️⃣ html
<!DOCTYPE html>
<html lang="en">
<head>
..
</head>
<body>
<!-- 파티 목록 시작 -->
<section id="test-layout" class="container py-5">
<div class="container py-5" id = "container-test" **id="this-is-card-container"** >
<!-- 첫번째 카드 시작 -->
<div class="pricing-horizontal row col-10 m-auto d-flex shadow-sm rounded overflow-hidden bg-white">
<!-- 전시 포스터 넣기 -->
<div class="pricing-horizontal-icon col-md-3 text-center bg-secondary text-light py-4">
<i class="display-1 bx bx-package pt-4"></i>
<h5 class="h5 semi-bold-600 pb-4 light-300"> 전시 이름 </h5>
</div>
<!-- 파티 정보 넣기 -->
<div class="pricing-horizontal-body offset-lg-1 col-md-5 col-lg-4 d-flex align-items-center pl-5 pt-lg-0 pt-4">
<ul class="text-left px-4 list-unstyled mb-0 light-300">
<p>모임 제목</p>
<p>전시 제목</p>
<li><i class="bx bxs-circle me-2"></i>5 Users</li>
<li><i class="bx bxs-circle me-2"></i>2 TB space</li>
<li><i class="bx bxs-circle me-2"></i>Community Forums</li>
</ul>
</div>
<!-- 파티 참석 인원 동그라미 넣기 -->
<div class="pricing-horizontal-tag col-md-4 text-center pt-3 d-flex align-items-center">
<div class="w-100 light-300">
<!-- 현재 참석 인원 -->
<p>$0</p>
<!-- 버튼 -->
<a href="#" class="btn rounded-pill px-4 btn-outline-primary mb-3"> 더 알아보기 </a>
<a href="#" class="btn rounded-pill px-4 btn-outline-primary mb-3"> 신청하기! </a>
</div>
</div>
</div>
**<script src="assets/js/gatherings.js"></script>
<script>
console.log("Start fetching.")
window.addEventListener('DOMContentLoaded', function() {
displayGatherings();
});
</script>**
</div>
</section>
...
</body>
</html>
3️⃣ app.js
const express = require("express");
const app = express();
app.use(express.static(__dirname));
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
app.get("/about", (req, res) => {
res.sendFile(__dirname + "/about.html");
});
app.get("/contact", (req, res) => {
res.sendFile(__dirname + "/contact.html");
});
app.get("/pricing", (req, res) => {
res.sendFile(__dirname + "/pricing.html");
});
app.get("/gathering", (req, res) => {
res.sendFile(__dirname + "/gathering.html");
});
app.use((req, res) => {
res.sendFile(__dirname + "/error.html");
});
app.listen(3000, (err) => {
if (err) return console.log(err);
console.log("The server is listening on port 3000");
});
I tried to troubleshoot, but it didn't work.
