Commit @3828f4ae87b056c3d327d659c7afad40cf70d498

구자현 2024-08-08

240808 구자현 교사 교재 CRUD

@3828f4ae87b056c3d327d659c7afad40cf70d498

291bbab

3828f4a

client/views/pages/teacher/textbook.vue

--- client/views/pages/teacher/textbook.vue

+++ client/views/pages/teacher/textbook.vue


 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">교재 관리</p>
-        <!-- <select name="" id="">
+        <p class="title">교재</p>
+        <select name="" id="">
             <option value="">A반</option>
-        </select> -->
-        </div>
-        <div class="content-t">
-            <div  class=" flex " style="gap: 50px;">
-                <div class="textbook">
-                    <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')">
-                    </div>
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">A 교재</p>
-                        <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                            <button>수정</button><p>&#124;</p>
-                            <button @click="showConfirm('delete')">삭제</button>
-                        </div>
-                    </div>
+        </select>
+    </div>
+    <div class="content-t">
+        <div class="flex" style="gap: 2.5%;" :style="{flexWrap: 'wrap'}">
+            <div class="textbook" v-for="textbookItem in textbookList" :key="textbookItem.book_id" style="width: 22.5%; margin-bottom: 30px;">
+                <div class="box" style="gap: 10px;" @click="goToPage('TextBookDetail', textbookItem.book_id)">
                 </div>
-                
-                <div class="textbook-add">
-                        <button  @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
-        
+                <div class="text">
+                    <p class="title1" style="color: #fff;">{{ textbookItem.book_nm }}</p>
+                    <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
+                        <button @click="editBook(textbookItem)">수정</button>
+                        <p>&#124;</p>
+                        <button @click="deleteBook(textbookItem.book_id)">삭제</button>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
+
+            <div class="textbook-add" style="width: 22.5%; margin-bottom: 30px;">
+                <button @click="buttonSearch">
+                    <img src="../../../resources/img/btn32_98t_normal.png" alt="">
+                </button>
+            </div>
+
+            <div v-show="searchOpen" class="popup-wrap">
+                <div class="popup-box">
                     <div class="flex justify-between mb30">
                         <p class="popup-title">교재 이름</p>
                         <button type="button" class="popup-close-btn" @click="closeBtn">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-
                         </button>
                     </div>
                     <div class="search-wrap mb30">
-                        <input type="text" class="data-wrap" placeholder="">
-                        <!-- <button type="button" title="교재 검색">
+                        <input type="text" class="data-wrap" v-model="newBookName" placeholder="교재 이름을 입력하세요">
+                        <button type="button" title="교재 검색" @click="insertBook">
                             <img src="../../../resources/img/look_t.png" alt="">
-                        </button> -->
+                        </button>
                     </div>
-                    <div class="flex justify-center ">
-                        <button type="button" title="글쓰기" class="new-btn mr10">
+                    <div class="flex justify-center">
+                        <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
                             취소
                         </button>
-                        <button type="button" title="글쓰기" class="new-btn">
-                            생성
+                        <button type="button" title="생성" class="new-btn" @click="editMode ? updateBook() : insertBook()">
+                            {{ editMode ? '수정' : '생성' }}
                         </button>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
+
+
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+import { mdiWindowClose } from '@mdi/js';
+import axios from 'axios';
 
 export default {
-    data () {
+    data() {
         return {
             mdiWindowClose: mdiWindowClose,
             showModal: false,
             searchOpen: false,
+            textbookList: [],
+            newBookName: '',
+            editMode: false,
+            editBookId: null,
         }
     },
     methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        closeModal() {
-            this.showModal = false;
+        goToPage(page, book_id) {
+            this.$router.push({ name: page, query: { book_id }});
         },
         buttonSearch() {
             this.searchOpen = true;
         },
         closeBtn() {
             this.searchOpen = false;
-
+            this.editMode = false;
+            this.editBookId = null;
+            this.newBookName = '';
         },
-        showConfirm(type) {
-            let message = '';
-            if (type === 'delete') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
-
-            if (confirm(message)) {
-                this.goBack();
-            }
+        editBook(book) {
+            this.newBookName = book.book_nm;
+            this.editMode = true;
+            this.editBookId = book.book_id;
+            this.searchOpen = true;
         },
-
-    },
-    watch: {
-
+        bookList() {
+            axios({
+                url: "/book/findAll.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                }
+            })
+            .then(response => {
+                this.textbookList = response.data;
+                })
+            .catch(error => {
+                console.error('Error fetching books:', error);
+            });
+        },
+        insertBook() {
+            const newBook = {
+                book_nm: this.newBookName
+            };
+            axios.post('/book/insert.json', newBook)
+                .then(response => {
+                    this.bookList();
+                    this.closeBtn();
+                })
+                .catch(error => {
+                    console.error('Error creating book:', error);
+                });
+        },
+        updateBook() {
+            const updatedBook = {
+                book_id: this.editBookId,
+                book_nm: this.newBookName
+            };
+            axios({
+                url: "/book/update.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: updatedBook,
+            })
+            .then(response => {
+                this.bookList();
+                this.closeBtn();
+            })
+            .catch(error => {
+                 console.error('Error updating book:', error);
+            });
+        },
+        deleteBook(book_id) {
+            if (confirm('삭제하시겠습니까?')) {
+                axios({
+                    url: "/book/delete.json",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    data: {
+                        book_id: book_id
+                    },
+                })
+                .then(response => {
+                    this.bookList();
+                })
+                .catch(error => {
+                    console.error('Error deleting book:', error);
+                });
+            }
+        }
     },
     computed: {
 

     },
     mounted() {
         console.log('Main2 mounted');
+        this.bookList();
     }
 }
 </script>
-<style scoped>
-.textbook{width: 300px;}
+
+<style>
+.content-t {
+    flex-wrap: wrap; 
+    height: 90%;
+    overflow-y: scroll;
+}
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+.textbook, .textbook-add {
+    margin-bottom: 30px;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,101 +1,166 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">교재 관리</p>
4		- <!-- <select name="" id="">
	3	+ <p class="title">교재</p>
	4	+ <select name="" id="">
5	5	<option value="">A반</option>
6		- </select> -->
7		- </div>
8		- <div class="content-t">
9		- <div class=" flex " style="gap: 50px;">
10		- <div class="textbook">
11		- <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')">
12		- </div>
13		- <div class="text ">
14		- <p class="title1" style="color: #fff;">A 교재</p>
15		- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
16		- <button>수정</button><p>\|</p>
17		- <button @click="showConfirm('delete')">삭제</button>
18		- </div>
19		- </div>
	6	+ </select>
	7	+ </div>
	8	+ <div class="content-t">
	9	+ <div class="flex" style="gap: 2.5%;" :style="{flexWrap: 'wrap'}">
	10	+ <div class="textbook" v-for="textbookItem in textbookList" :key="textbookItem.book_id" style="width: 22.5%; margin-bottom: 30px;">
	11	+ <div class="box" style="gap: 10px;" @click="goToPage('TextBookDetail', textbookItem.book_id)">
20	12	</div>
21		-
22		- <div class="textbook-add">
23		- <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
24		-
	13	+ <div class="text">
	14	+ <p class="title1" style="color: #fff;">{{ textbookItem.book_nm }}</p>
	15	+ <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
	16	+ <button @click="editBook(textbookItem)">수정</button>
	17	+ <p>\|</p>
	18	+ <button @click="deleteBook(textbookItem.book_id)">삭제</button>
	19	+ </div>
25	20	</div>
26	21	</div>
27		- </div>
28		- <div v-show="searchOpen" class="popup-wrap">
29		- <div class="popup-box ">
	22	+
	23	+ <div class="textbook-add" style="width: 22.5%; margin-bottom: 30px;">
	24	+ <button @click="buttonSearch">
	25	+ <img src="../../../resources/img/btn32_98t_normal.png" alt="">
	26	+ </button>
	27	+ </div>
	28	+
	29	+ <div v-show="searchOpen" class="popup-wrap">
	30	+ <div class="popup-box">
30	31	<div class="flex justify-between mb30">
31	32	<p class="popup-title">교재 이름</p>
32	33	<button type="button" class="popup-close-btn" @click="closeBtn">
33	34	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
34		-
35	35	</button>
36	36	</div>
37	37	<div class="search-wrap mb30">
38		- <input type="text" class="data-wrap" placeholder="">
39		- <!-- <button type="button" title="교재 검색">
	38	+ <input type="text" class="data-wrap" v-model="newBookName" placeholder="교재 이름을 입력하세요">
	39	+ <button type="button" title="교재 검색" @click="insertBook">
40	40	<img src="../../../resources/img/look_t.png" alt="">
41		- </button> -->
	41	+ </button>
42	42	</div>
43		- <div class="flex justify-center ">
44		- <button type="button" title="글쓰기" class="new-btn mr10">
	43	+ <div class="flex justify-center">
	44	+ <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
45	45	취소
46	46	</button>
47		- <button type="button" title="글쓰기" class="new-btn">
48		- 생성
	47	+ <button type="button" title="생성" class="new-btn" @click="editMode ? updateBook() : insertBook()">
	48	+ {{ editMode ? '수정' : '생성' }}
49	49	</button>
50	50	</div>
51	51	</div>
52	52	</div>
	53	+ </div>
	54	+ </div>
53	55	</template>
	56	+
	57	+
54	58
55	59	<script>
56	60	import SvgIcon from '@jamescoyle/vue-icon';
57		-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	61	+import { mdiWindowClose } from '@mdi/js';
	62	+import axios from 'axios';
58	63
59	64	export default {
60		- data () {
	65	+ data() {
61	66	return {
62	67	mdiWindowClose: mdiWindowClose,
63	68	showModal: false,
64	69	searchOpen: false,
	70	+ textbookList: [],
	71	+ newBookName: '',
	72	+ editMode: false,
	73	+ editBookId: null,
65	74	}
66	75	},
67	76	methods: {
68		- goToPage(page) {
69		- this.$router.push({ name: page });
70		- },
71		- closeModal() {
72		- this.showModal = false;
	77	+ goToPage(page, book_id) {
	78	+ this.$router.push({ name: page, query: { book_id }});
73	79	},
74	80	buttonSearch() {
75	81	this.searchOpen = true;
76	82	},
77	83	closeBtn() {
78	84	this.searchOpen = false;
79		-
	85	+ this.editMode = false;
	86	+ this.editBookId = null;
	87	+ this.newBookName = '';
80	88	},
81		- showConfirm(type) {
82		- let message = '';
83		- if (type === 'delete') {
84		- message = '삭제하시겠습니까?';
85		- } else if (type === 'reset') {
86		- message = '초기화하시겠습니까?';
87		- } else if (type === 'save') {
88		- message = '등록하시겠습니까?';
89		- }
90		-
91		- if (confirm(message)) {
92		- this.goBack();
93		- }
	89	+ editBook(book) {
	90	+ this.newBookName = book.book_nm;
	91	+ this.editMode = true;
	92	+ this.editBookId = book.book_id;
	93	+ this.searchOpen = true;
94	94	},
95		-
96		- },
97		- watch: {
98		-
	95	+ bookList() {
	96	+ axios({
	97	+ url: "/book/findAll.json",
	98	+ method: "post",
	99	+ headers: {
	100	+ "Content-Type": "application/json; charset=UTF-8",
	101	+ }
	102	+ })
	103	+ .then(response => {
	104	+ this.textbookList = response.data;
	105	+ })
	106	+ .catch(error => {
	107	+ console.error('Error fetching books:', error);
	108	+ });
	109	+ },
	110	+ insertBook() {
	111	+ const newBook = {
	112	+ book_nm: this.newBookName
	113	+ };
	114	+ axios.post('/book/insert.json', newBook)
	115	+ .then(response => {
	116	+ this.bookList();
	117	+ this.closeBtn();
	118	+ })
	119	+ .catch(error => {
	120	+ console.error('Error creating book:', error);
	121	+ });
	122	+ },
	123	+ updateBook() {
	124	+ const updatedBook = {
	125	+ book_id: this.editBookId,
	126	+ book_nm: this.newBookName
	127	+ };
	128	+ axios({
	129	+ url: "/book/update.json",
	130	+ method: "post",
	131	+ headers: {
	132	+ "Content-Type": "application/json; charset=UTF-8",
	133	+ },
	134	+ data: updatedBook,
	135	+ })
	136	+ .then(response => {
	137	+ this.bookList();
	138	+ this.closeBtn();
	139	+ })
	140	+ .catch(error => {
	141	+ console.error('Error updating book:', error);
	142	+ });
	143	+ },
	144	+ deleteBook(book_id) {
	145	+ if (confirm('삭제하시겠습니까?')) {
	146	+ axios({
	147	+ url: "/book/delete.json",
	148	+ method: "post",
	149	+ headers: {
	150	+ "Content-Type": "application/json; charset=UTF-8",
	151	+ },
	152	+ data: {
	153	+ book_id: book_id
	154	+ },
	155	+ })
	156	+ .then(response => {
	157	+ this.bookList();
	158	+ })
	159	+ .catch(error => {
	160	+ console.error('Error deleting book:', error);
	161	+ });
	162	+ }
	163	+ }
99	164	},
100	165	computed: {
101	166
...	...	@@ -105,9 +170,22 @@
105	170	},
106	171	mounted() {
107	172	console.log('Main2 mounted');
	173	+ this.bookList();
108	174	}
109	175	}
110	176	</script>
111		-<style scoped>
112		-.textbook{width: 300px;}
	177	+
	178	+<style>
	179	+.content-t {
	180	+ flex-wrap: wrap;
	181	+ height: 90%;
	182	+ overflow-y: scroll;
	183	+}
	184	+.flex {
	185	+ display: flex;
	186	+ flex-wrap: wrap;
	187	+}
	188	+.textbook, .textbook-add {
	189	+ margin-bottom: 30px;
	190	+}
113	191	</style> (No newline at end of file)

Delete comment