63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="posts.length === 0">게시물이 없습니다.</div>
|
|
<div v-for="post in posts" :key="post.id" class="post">
|
|
<h3>{{ post.title }}</h3>
|
|
<p class="str_wrap">{{ post.content }}</p>
|
|
<small>{{ formatDate(post.date) }}</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
posts: [] // 게시물 리스트 초기화
|
|
};
|
|
},
|
|
methods: {
|
|
async fetchPosts() {
|
|
try {
|
|
const response = await axios.get('/api/board/general');
|
|
console.log(response.data); // 서버에서 반환된 전체 응답 데이터 확인
|
|
if (response.data && Array.isArray(response.data.data)) {
|
|
this.posts = response.data.data; // 서버에서 반환된 게시물 리스트 저장
|
|
} else {
|
|
console.error('Unexpected response format:', response.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch posts:', error);
|
|
}
|
|
},
|
|
formatDate(dateString) {
|
|
const date = new Date(dateString);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchPosts();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 텍스트 줄임 표시 */
|
|
.str_wrap {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3; /* 최대 3줄 표시 */
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
/* 게시물 스타일링 */
|
|
.post {
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 1px solid #ddd;
|
|
padding-bottom: 1rem;
|
|
}
|
|
</style>
|