Feat: Add article component
This commit is contained in:
parent
988ce03ec1
commit
2fb1f9e234
@ -1,139 +1,55 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { getArticle, updateArticle, deleteArticle } from '@/api/article';
|
import BoardHeader from './BoardHeader.vue';
|
||||||
|
import { getArticle } from '@/api/article';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const id = ref(route.query.id);
|
const id = route.params.id;
|
||||||
|
const article = ref({});
|
||||||
|
|
||||||
/*
|
// function mockAPI() {
|
||||||
DOM이 mounted된 상태에서 아직 서버에서 데이터가 안 온 경우
|
// return new Promise((resolve) => {
|
||||||
Book의 데이터를 화면에 표시 할 수 없어서 error 발생하므로 초기 설정을 한다.
|
// setTimeout(() => {
|
||||||
*/
|
// resolve({
|
||||||
const article = ref({
|
// id,
|
||||||
id: '',
|
// title: `Article title ${id}`,
|
||||||
title: '',
|
// text: 'Article text 1\n\nasdfasdf asdf',
|
||||||
text: '',
|
// author: 'asdf',
|
||||||
name: '',
|
// comments: [],
|
||||||
authorId: '',
|
// date: '2024-04-05 13:23',
|
||||||
date: '',
|
// });
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// mockAPI().then((result) => (article.value = result));
|
||||||
|
|
||||||
|
getArticle(id, ({ data }) => {
|
||||||
|
article.value = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
//setup(init)단계이므로 detailBook() 호출해서 서버에서 데이터 전송 받기
|
|
||||||
getArticle(
|
|
||||||
id.value,
|
|
||||||
({ data }) => {
|
|
||||||
article.value = data;
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
alert(error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
//초기에는 Detail화면 표시 하기 위해 readonly='readonly' 로 표시
|
|
||||||
//수정일 경우 readonly='' 표시하기 위해 isReadonly=false로
|
|
||||||
const isReadonly = ref(true);
|
|
||||||
|
|
||||||
function removeHandler() {
|
|
||||||
// console.log('BookDetail.remove.......................')
|
|
||||||
// books.value = books.value.filter((item) => isbn.value != item.isbn)
|
|
||||||
// console.log('BookDetail.remove.......................books:', books.value)
|
|
||||||
deleteArticle(
|
|
||||||
id.value,
|
|
||||||
({ data }) => {
|
|
||||||
console.log('deleteArticle................result:', data);
|
|
||||||
alert('삭제 성공');
|
|
||||||
moveHandler();
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
alert('삭제 실패');
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// moveHandler()
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveHandler() {
|
|
||||||
router.push({
|
|
||||||
name: 'article-list',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHandler() {
|
|
||||||
if (!isReadonly.value) {
|
|
||||||
//isReadonly가 false인 상황은 update 상황
|
|
||||||
updateArticle(
|
|
||||||
article.value,
|
|
||||||
id,
|
|
||||||
({ data }) => {
|
|
||||||
console.log('updateArticl................result:', data);
|
|
||||||
alert('수정 성공');
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
alert('수정 실패');
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
isReadonly.value = !isReadonly.value;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<BoardHeader>
|
||||||
<table class="table table-bordered">
|
<template #title>
|
||||||
<tbody>
|
<h1>{{ article.title }}</h1>
|
||||||
<tr>
|
</template>
|
||||||
<th>게시판 번호</th>
|
<template #info>
|
||||||
<td><input type="text" v-model.lazy="book.isbn" readonly="readonly" /></td>
|
<div class="author">{{ article.author }}</div>
|
||||||
</tr>
|
<div class="date">{{ article.date }}</div>
|
||||||
<tr>
|
</template>
|
||||||
<th>제목</th>
|
</BoardHeader>
|
||||||
<td><input type="text" v-model.lazy="book.title" :readonly="isReadonly" /></td>
|
<p>{{ article.text }}</p>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>내용</th>
|
|
||||||
<td><input type="text" v-model.lazy="book.author" :readonly="isReadonly" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>작성자</th>
|
|
||||||
<td><input type="text" v-model.lazy="book.price" :readonly="isReadonly" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>아이디</th>
|
|
||||||
<td><input type="text" v-model.lazy="book.price" :readonly="isReadonly" /></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>날짜</th>
|
|
||||||
<td><input type="text" v-model.lazy="book.price" :readonly="isReadonly" /></td>
|
|
||||||
</tr>
|
|
||||||
<!-- <tr>
|
|
||||||
<th colspan="2">책 정보</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td colspan="2">
|
|
||||||
<textarea
|
|
||||||
cols="45"
|
|
||||||
rows="10"
|
|
||||||
v-model.lazy="book.describ"
|
|
||||||
:readonly="isReadonly"
|
|
||||||
></textarea>
|
|
||||||
</td>
|
|
||||||
</tr> -->
|
|
||||||
<tr>
|
|
||||||
<td colspan="2" class="text-center">
|
|
||||||
<button class="btn btn-outline-primary m-1" @click="updateHandler">수정</button>
|
|
||||||
<button class="btn btn-outline-primary m-1" @click="moveHandler">목록</button>
|
|
||||||
<button class="btn btn-outline-primary m-1" @click="removeHandler">삭제</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
input:read-only {
|
p {
|
||||||
background-color: lightgray;
|
margin: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
white-space: pre;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user