Commit @aa5491da58730770b9fa486113c55ee9a32aa10a

guntaek 2024-08-08

240808 김건택 PhotoBook.vue 수정

@aa5491da58730770b9fa486113c55ee9a32aa10a

e9d1963

aa5491d

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


 
       // 페이징 정보
       page: 1,
-      pageSize: 3,
+      pageSize: 2,
       totalpages: null,
 
       // 사용자 정보

e9d1963

aa5491d

client/views/pages/main/PhotoBook.vue

--- client/views/pages/main/PhotoBook.vue

+++ client/views/pages/main/PhotoBook.vue


                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photoList.result[0].likeData }}</span>
+                                <p class="title2">{{ photoList.result[0].unitName }}</p>
                             </div>
                         </div>
                     </div>

                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photoList.result[1].likeData }}</span>
+                                <p class="title2">{{ photoList.result[1].unitName }}</p>
                             </div>
     
                         </div>

                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photoList.result[2].likeData }}</span>
+                                <p class="title2">{{ photoList.result[2].unitName }}</p>
                             </div>
     
                         </div>

                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photoList.result[3].likeData }}</span>
+                                <p class="title2">{{ photoList.result[3].unitName }}</p>
                             </div>
     
                         </div>

                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photoList.result[4].likeData }}</span>
+                                <p class="title2">{{ photoList.result[4].unitName }}</p>
                             </div>
     
                         </div>

                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">20</span>
-                                <p class="title2">1단원</p>
+                                <span class="member ml30">{{ photoList.result[5].likeData }}</span>
+                                <p class="title2">{{ photoList.result[5].unitName }}</p>
                             </div>
                         </div>
                     </div>

 import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
 import { mdilArrowRight } from '@mdi/light-js';
 import ProgressBar from '../../component/ProgressBar.vue';
+import axios from "axios";
 
 
 export default {
     data() {
         return {
+            classList: [],
+            photoList: [],
+
+            page: 1,
+            pageSize: 6,
+            totalpages: null,
+
             mdiWindowClose: mdiWindowClose,
             selectedTab: 'tab1',
             mdiMagnify: mdiMagnify,

         }
     },
     methods: {
+        stdClassesSelectList: function () {
+            const vm = this;
+            axios({
+                url: "/classes/selectClass.json",
+                method: "post",
+                headers:{
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    userId:"2"
+                }
+            })
+            .then(function (response) {
+                console.log("classList - response : ", response.data);
+                vm.classList = response.data;
+            })
+            .catch(function (error) {
+                console.log("classList - error : ", error);
+                alert("학생 반 조회에 오류가 발생했습니다.");
+            });
+        },
+
+        stdPhotoSelectList: function () {
+            const vm = this;
+            axios({
+                url: "/photo/stdPhotoList.json",
+                method: "post",
+                headers:{
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                        "stdId":"1",
+                        "sclsId":"1",
+                        page: vm.page,
+                        pageSize: vm.pageSize
+                }
+            })
+            .then(function (response) {
+                console.log("photoList - response : ", response.data);
+                vm.photoList = response.data;
+            })
+            .catch(function (error) {
+                console.log("photoList - error : ", error);
+                alert("반별 내 사진 조회에 오류가 발생했습니다.");
+            });
+        },
+
         closeModal() {
             this.showModal = false;
         },

     },
     mounted() {
         console.log('Main2 mounted');
+        this.stdClassesSelectList();
+        this.stdPhotoSelectList();
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -102,7 +102,7 @@
102	102
103	103	// 페이징 정보
104	104	page: 1,
105		- pageSize: 3,
	105	+ pageSize: 2,
106	106	totalpages: null,
107	107
108	108	// 사용자 정보

...	...	@@ -24,8 +24,8 @@
24	24	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
25	25	</div>
26	26	<div class="text flex justify-between mt20">
27		- <span class="member ml30">20</span>
28		- <p class="title2">1단원</p>
	27	+ <span class="member ml30">{{ photoList.result[0].likeData }}</span>
	28	+ <p class="title2">{{ photoList.result[0].unitName }}</p>
29	29	</div>
30	30	</div>
31	31	</div>
...	...	@@ -35,8 +35,8 @@
35	35	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
36	36	</div>
37	37	<div class="text flex justify-between mt20">
38		- <span class="member ml30">20</span>
39		- <p class="title2">1단원</p>
	38	+ <span class="member ml30">{{ photoList.result[1].likeData }}</span>
	39	+ <p class="title2">{{ photoList.result[1].unitName }}</p>
40	40	</div>
41	41
42	42	</div>
...	...	@@ -47,8 +47,8 @@
47	47	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
48	48	</div>
49	49	<div class="text flex justify-between mt20">
50		- <span class="member ml30">20</span>
51		- <p class="title2">1단원</p>
	50	+ <span class="member ml30">{{ photoList.result[2].likeData }}</span>
	51	+ <p class="title2">{{ photoList.result[2].unitName }}</p>
52	52	</div>
53	53
54	54	</div>
...	...	@@ -61,8 +61,8 @@
61	61	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
62	62	</div>
63	63	<div class="text flex justify-between mt20">
64		- <span class="member ml30">20</span>
65		- <p class="title2">1단원</p>
	64	+ <span class="member ml30">{{ photoList.result[3].likeData }}</span>
	65	+ <p class="title2">{{ photoList.result[3].unitName }}</p>
66	66	</div>
67	67
68	68	</div>
...	...	@@ -73,8 +73,8 @@
73	73	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
74	74	</div>
75	75	<div class="text flex justify-between mt20">
76		- <span class="member ml30">20</span>
77		- <p class="title2">1단원</p>
	76	+ <span class="member ml30">{{ photoList.result[4].likeData }}</span>
	77	+ <p class="title2">{{ photoList.result[4].unitName }}</p>
78	78	</div>
79	79
80	80	</div>
...	...	@@ -85,8 +85,8 @@
85	85	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
86	86	</div>
87	87	<div class="text flex justify-between mt20">
88		- <span class="member ml30">20</span>
89		- <p class="title2">1단원</p>
	88	+ <span class="member ml30">{{ photoList.result[5].likeData }}</span>
	89	+ <p class="title2">{{ photoList.result[5].unitName }}</p>
90	90	</div>
91	91	</div>
92	92	</div>
...	...	@@ -119,11 +119,19 @@
119	119	import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
120	120	import { mdilArrowRight } from '@mdi/light-js';
121	121	import ProgressBar from '../../component/ProgressBar.vue';
	122	+import axios from "axios";
122	123
123	124
124	125	export default {
125	126	data() {
126	127	return {
	128	+ classList: [],
	129	+ photoList: [],
	130	+
	131	+ page: 1,
	132	+ pageSize: 6,
	133	+ totalpages: null,
	134	+
127	135	mdiWindowClose: mdiWindowClose,
128	136	selectedTab: 'tab1',
129	137	mdiMagnify: mdiMagnify,
...	...	@@ -136,6 +144,53 @@
136	144	}
137	145	},
138	146	methods: {
	147	+ stdClassesSelectList: function () {
	148	+ const vm = this;
	149	+ axios({
	150	+ url: "/classes/selectClass.json",
	151	+ method: "post",
	152	+ headers:{
	153	+ "Content-Type": "application/json; charset=UTF-8",
	154	+ },
	155	+ data: {
	156	+ userId:"2"
	157	+ }
	158	+ })
	159	+ .then(function (response) {
	160	+ console.log("classList - response : ", response.data);
	161	+ vm.classList = response.data;
	162	+ })
	163	+ .catch(function (error) {
	164	+ console.log("classList - error : ", error);
	165	+ alert("학생 반 조회에 오류가 발생했습니다.");
	166	+ });
	167	+ },
	168	+
	169	+ stdPhotoSelectList: function () {
	170	+ const vm = this;
	171	+ axios({
	172	+ url: "/photo/stdPhotoList.json",
	173	+ method: "post",
	174	+ headers:{
	175	+ "Content-Type": "application/json; charset=UTF-8",
	176	+ },
	177	+ data: {
	178	+ "stdId":"1",
	179	+ "sclsId":"1",
	180	+ page: vm.page,
	181	+ pageSize: vm.pageSize
	182	+ }
	183	+ })
	184	+ .then(function (response) {
	185	+ console.log("photoList - response : ", response.data);
	186	+ vm.photoList = response.data;
	187	+ })
	188	+ .catch(function (error) {
	189	+ console.log("photoList - error : ", error);
	190	+ alert("반별 내 사진 조회에 오류가 발생했습니다.");
	191	+ });
	192	+ },
	193	+
139	194	closeModal() {
140	195	this.showModal = false;
141	196	},
...	...	@@ -181,6 +236,8 @@
181	236	},
182	237	mounted() {
183	238	console.log('Main2 mounted');
	239	+ this.stdClassesSelectList();
	240	+ this.stdPhotoSelectList();
184	241	}
185	242	}
186	243	</script> (No newline at end of file)

Delete comment