Merge branch 'master' of https://lab.ssafy.com/jhynsoo/vue-pjt
This commit is contained in:
이정혁
commit
603fb25914
@ -10,23 +10,6 @@ const route = useRoute();
|
||||
const id = Number(route.params.id);
|
||||
const article = ref({});
|
||||
|
||||
// function mockAPI() {
|
||||
// return new Promise((resolve) => {
|
||||
// setTimeout(() => {
|
||||
// resolve({
|
||||
// id,
|
||||
// title: `Article title ${id}`,
|
||||
// text: 'Article text 1\n\nasdfasdf asdf',
|
||||
// author: 'asdf',
|
||||
// comments: [],
|
||||
// date: '2024-04-05 13:23',
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
// mockAPI().then((result) => (article.value = result));
|
||||
|
||||
getArticle(id, ({ data }) => {
|
||||
article.value = data;
|
||||
});
|
||||
|
||||
@ -5,26 +5,6 @@ import { RouterLink } from 'vue-router';
|
||||
|
||||
const articles = ref([]);
|
||||
|
||||
// function mockAPI() {
|
||||
// return new Promise((resolve) => {
|
||||
// setTimeout(() => {
|
||||
// resolve(
|
||||
// Array(20)
|
||||
// .fill()
|
||||
// .map((_, i) => ({
|
||||
// id: i + 1,
|
||||
// title: `Article title ${i + 1}`,
|
||||
// author: 'asdf',
|
||||
// comments: i % 3 === 0 ? i : 0,
|
||||
// date: '2024-04-05 13:23',
|
||||
// }))
|
||||
// );
|
||||
// }, 300);
|
||||
// });
|
||||
// }
|
||||
|
||||
// mockAPI().then((result) => (articles.value = result));
|
||||
|
||||
getArticles(({ data }) => (articles.value = data));
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,129 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { addArticle } from '@/api/article';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
//v-model과 연결한 반응형 변수 선언
|
||||
const title = ref('');
|
||||
const text = ref('');
|
||||
const name = ref('');
|
||||
const authorId = ref('');
|
||||
|
||||
/*
|
||||
Dom과 연결할 반응형 변수 선언, setup에서는 DOM tree가 구성되지 않았기 때문에
|
||||
mounted 이후에 접근이 가능하다.
|
||||
*/
|
||||
const titleDiv = ref(null);
|
||||
const textDiv = ref(null);
|
||||
const nameDiv = ref(null);
|
||||
const authorIdDiv = ref(null);
|
||||
|
||||
// const books = inject('books')
|
||||
// console.log('BookRegist....books:', books.value)
|
||||
|
||||
function moveHandler() {
|
||||
router.push({ name: 'article-list' });
|
||||
}
|
||||
|
||||
function createHandler() {
|
||||
//사용자 입력 값을 체크하기
|
||||
let err = false;
|
||||
let msg = '';
|
||||
|
||||
// if (!isbn.value) {
|
||||
// msg = '책 일련 번호를 입력해 주세요'
|
||||
// err = false;
|
||||
// isbnDiv.value.focus()
|
||||
// } else if (err && !title.value) { }
|
||||
!title.value && ((msg = '제목을 입력해 주세요'), (err = true), titleDiv.value.focus());
|
||||
!err && !text.value && ((msg = '내용을 입력해 주세요'), (err = true), textDiv.value.focus());
|
||||
!err && !name.value && ((msg = '이름을 입력해 주세요'), (err = true), nameDiv.value.focus());
|
||||
!err &&
|
||||
!authorId.value &&
|
||||
((msg = '아이디를 입력해 주세요'), (err = true), authorIdDiv.value.focus());
|
||||
|
||||
const article = ref({
|
||||
title: '',
|
||||
text: '',
|
||||
name: '',
|
||||
authorId: '',
|
||||
});
|
||||
|
||||
if (err) {
|
||||
alert(msg);
|
||||
} else {
|
||||
article.value.title = title.value;
|
||||
article.value.text = text.value;
|
||||
article.value.name = name.value;
|
||||
article.value.authorId = authorId.value;
|
||||
}
|
||||
// console.log('bookregist.......', books.value)
|
||||
|
||||
// title.value = ''
|
||||
// isbn.value = ''
|
||||
// author.value = ''
|
||||
// price.value = ''
|
||||
// describ.value = ''
|
||||
// alert('등록')
|
||||
// moveHandler()
|
||||
// }
|
||||
addArticle(
|
||||
article.value,
|
||||
({ data }) => {
|
||||
console.log('update................result:', data);
|
||||
alert('등록 성공');
|
||||
},
|
||||
(error) => {
|
||||
alert('수정 실패');
|
||||
}
|
||||
);
|
||||
|
||||
moveHandler();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="me-4">
|
||||
<h1 class="underline text-center">도서 등록</h1>
|
||||
<table class="table table-boardered">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>제목</td>
|
||||
<td><input type="text" ref="titleDiv" v-model="title" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>내용</td>
|
||||
<td><input type="text" ref="textDiv" v-model="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>이름</td>
|
||||
<td><input type="text" ref="nameDiv" v-model="name" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>아이디</td>
|
||||
<td><input type="text" ref="authorIdDiv" v-model="authorId" /></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <tr>
|
||||
<td colspan="2">책 정보</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="text-center">
|
||||
<textarea v-model="describ" cols="45" rows="10" />
|
||||
</td>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td colspan="2" class="text-center">
|
||||
<button class="btn btn-primary m-1" @click="createHandler">등록</button>
|
||||
<button class="btn btn-primary m-1" @click="moveHandler">목록</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,16 +0,0 @@
|
||||
<script setup>
|
||||
defineProps({ article: Object });
|
||||
</script>
|
||||
<template>
|
||||
<tr class="text-center">
|
||||
<th>{{ article.isbn }}</th>
|
||||
<td>
|
||||
<router-link :to="{ name: 'article-detail', query: { id: article.id } }">
|
||||
{{ article.title }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>{{ article.author }}</td>
|
||||
<td>{{ article.price }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
@ -1,12 +0,0 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
@ -1,10 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, provide, watch } from 'vue';
|
||||
</script>
|
||||
<template>
|
||||
<div class="text-center m-4">
|
||||
<div class="alert alert-info" role="alert">게시판</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
@ -12,7 +12,6 @@ import AppHeader from '@/components/AppHeader.vue';
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
/* max-width: 1280px; */
|
||||
max-width: 960px;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user