게시판 테스트트
This commit is contained in:
parent
82ce223a15
commit
f17f00c5e7
@ -1,65 +1,62 @@
|
||||
<template>
|
||||
<div class="" role="button">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex">
|
||||
<div v-if="img">
|
||||
<img class="card-img card-img-left" :src="img" alt="" style="width: 200px; height: 200px; object-fit: cover" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title align-items-center">
|
||||
<slot name="badgeType"></slot>
|
||||
{{ title }}
|
||||
</h5>
|
||||
<p class="card-text str_wrap pt-5">
|
||||
{{ content }}
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">{{ date }}</small>
|
||||
<slot name="optInfo"></slot>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 setup>
|
||||
// const data = defineProps(['item']);
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '제목',
|
||||
required: true,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: '내용',
|
||||
required: true,
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: 'date',
|
||||
required: true,
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
const colSetting = () => {
|
||||
img ? 'col-9' : '';
|
||||
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;
|
||||
-webkit-line-clamp: 3; /* 최대 3줄 표시 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* 게시물 스타일링 */
|
||||
.post {
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,19 +8,23 @@
|
||||
<WriteButton />
|
||||
</router-link>
|
||||
</div>
|
||||
<template v-for="(item, index) in list" :key="item.id">
|
||||
<board-card :title="item.title" :content="item.content" :img="item.img" :date="item.date" @click="goDetail(item.id)">
|
||||
<template v-for="item in list" :key="item.id">
|
||||
<board-card
|
||||
:title="item.title"
|
||||
:content="item.content"
|
||||
@click="goDetail(item.id)"
|
||||
>
|
||||
<template #badgeType>
|
||||
<span v-if="item.type == 1" class="badge rounded-pill bg-label-danger">공지</span>
|
||||
<span v-else-if="item.type == 2" class="badge rounded-pill bg-label-primary">자유</span>
|
||||
<span v-else-if="item.type == 3" class="badge rounded-pill bg-label-success">익명</span>
|
||||
</template>
|
||||
<template #optInfo>
|
||||
<small v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-eye"></i> {{ item.viewCount }}
|
||||
<small v-show="item.viewCount" style="padding-left: 10px" class="text-muted">
|
||||
<i class="fa-regular fa-eye"></i> {{ item.viewCount }}
|
||||
</small>
|
||||
<small v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
|
||||
<small v-show="item.cmtCount" style="padding-left: 10px" class="text-muted">
|
||||
<i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
|
||||
</small>
|
||||
</template>
|
||||
</board-card>
|
||||
@ -32,7 +36,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
import BoardCard from '@c/list/BoardCard.vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
@ -41,10 +45,17 @@
|
||||
import dummy from '@a/boardDummy.json';
|
||||
import WriteButton from '@c/button/WriteBtn.vue';
|
||||
|
||||
const list = ref(dummy);
|
||||
const searchText = ref('');
|
||||
export default {
|
||||
components: {
|
||||
BoardCard,
|
||||
Pagination,
|
||||
SearchBar,
|
||||
WriteButton,
|
||||
},
|
||||
setup() {
|
||||
const list = ref(dummy); // 데이터 정의
|
||||
const searchText = ref(''); // 검색 텍스트 정의
|
||||
|
||||
/** 상세로 이동 */
|
||||
const goDetail = idx => {
|
||||
router.push(`/board/get/${idx}`);
|
||||
};
|
||||
@ -52,6 +63,13 @@
|
||||
const search = e => {
|
||||
console.log('검색:', e);
|
||||
};
|
||||
|
||||
// 반환
|
||||
return { list, searchText, goDetail, search };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
/* 필요한 스타일 추가 */
|
||||
</style>
|
||||
|
||||
@ -5,6 +5,14 @@ import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:10325', // Spring Boot 서버 주소
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user