Commit @516c4721831fcd844ee7b4a4dc68a788c3fe6b64

woals 2024-08-23

240823 권민수 단어장 2_2 페이지 api 연결

@516c4721831fcd844ee7b4a4dc68a788c3fe6b64

33a2bd7

516c472

client/views/pages/main/Chapter/Chapter2_2.vue

--- client/views/pages/main/Chapter/Chapter2_2.vue

+++ client/views/pages/main/Chapter/Chapter2_2.vue


             <button class="popTxt" v-for="(item, index) in items" :key="index">
               <div class="listenGroup">
                 <img :src="item.imgSrc1" />
-                <p class="textbox"><img :src="item.imgSrc" /></p>
+                <p class="textbox"><img :src="item.imgSrc" style="height: 150px;"/></p>
               </div>
               <div
                 class="listenGroup"

 export default {
   data() {
     return {
-      items: [
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img77_41s.png",
-          isSecondImageVisible: false,
-          title: "america",
-        },
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img47_s.png",
-          isSecondImageVisible: false,
-          title: "airplane",
-        },
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img75_41s.png",
-          isSecondImageVisible: false,
-          title: "cat",
-        },
-        {
-          imgSrc1: "client/resources/img/img49_s.png",
-          imgSrc2: "client/resources/img/img50_s.png",
-          imgSrc: "client/resources/img/img74_41s.png",
-          isSecondImageVisible: false,
-          title: "mountain",
-        },
-      ],
+      // items: [
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img77_41s.png",
+      //     isSecondImageVisible: false,
+      //     title: "america",
+      //   },
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img47_s.png",
+      //     isSecondImageVisible: false,
+      //     title: "airplane",
+      //   },
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img75_41s.png",
+      //     isSecondImageVisible: false,
+      //     title: "cat",
+      //   },
+      //   {
+      //     imgSrc1: "client/resources/img/img49_s.png",
+      //     imgSrc2: "client/resources/img/img50_s.png",
+      //     imgSrc: "client/resources/img/img74_41s.png",
+      //     isSecondImageVisible: false,
+      //     title: "mountain",
+      //   },
+      // ],
+      items: [],
       timer: 0,
       intervalId: null,
       currentIndex: 0,

       this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
       this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
       this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
+      console.log(this.wdBookId);
 
-      // this.fetchWordList();
+      this.fetchWordList();
     },
 
     async fetchWordList() {
-      console.log("현재 단어장 콘텐츠 인덱스: ", this.$store.getters.getCurrentWdBkIndex);
-      this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex;
-      console.log("현재 단어장 콘텐츠 인덱스에 대한 단어장 id: ", this.$store.getters.getWdBookIdList[this.currentWdBkIndex]);
+      try {
+        const response = await axios.post('/word/getWordsByBookId.json', {
+          wdBookId: this.wdBookId,
+        });
+
+        const wordList = response.data;
+
+        // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
+        const requests = wordList.map(async (word) => {
+          const fileResponse = await axios.post("/file/find.json", {
+            file_mng_id: word.fileMngId,
+          });
+
+          const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
+          console.log("각 단어의 fileRpath: ", fileRpath);
+
+          // items 배열에 새로운 항목 추가
+          this.items.push({
+            imgSrc1: "client/resources/img/img49_s.png",
+            imgSrc2: "client/resources/img/img50_s.png",
+            imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
+            isSecondImageVisible: false, 
+            title: word.wdNm,
+          });
+        });
+
+        // 모든 요청이 완료될 때까지 대기
+        await Promise.all(requests);
+
+      } catch (error) {
+        console.error('단어 목록을 불러오는 중 오류 발생:', error);
+      }
     },
 
     async goToPrevPage() {

Add a comment

Open 0
Closed 0

List

...	...	@@ -45,7 +45,7 @@
45	45	<button class="popTxt" v-for="(item, index) in items" :key="index">
46	46	<div class="listenGroup">
47	47	<img :src="item.imgSrc1" />
48		- <p class="textbox"><img :src="item.imgSrc" /></p>
	48	+ <p class="textbox"><img :src="item.imgSrc" style="height: 150px;"/></p>
49	49	</div>
50	50	<div
51	51	class="listenGroup"
...	...	@@ -73,36 +73,37 @@
73	73	export default {
74	74	data() {
75	75	return {
76		- items: [
77		- {
78		- imgSrc1: "client/resources/img/img49_s.png",
79		- imgSrc2: "client/resources/img/img50_s.png",
80		- imgSrc: "client/resources/img/img77_41s.png",
81		- isSecondImageVisible: false,
82		- title: "america",
83		- },
84		- {
85		- imgSrc1: "client/resources/img/img49_s.png",
86		- imgSrc2: "client/resources/img/img50_s.png",
87		- imgSrc: "client/resources/img/img47_s.png",
88		- isSecondImageVisible: false,
89		- title: "airplane",
90		- },
91		- {
92		- imgSrc1: "client/resources/img/img49_s.png",
93		- imgSrc2: "client/resources/img/img50_s.png",
94		- imgSrc: "client/resources/img/img75_41s.png",
95		- isSecondImageVisible: false,
96		- title: "cat",
97		- },
98		- {
99		- imgSrc1: "client/resources/img/img49_s.png",
100		- imgSrc2: "client/resources/img/img50_s.png",
101		- imgSrc: "client/resources/img/img74_41s.png",
102		- isSecondImageVisible: false,
103		- title: "mountain",
104		- },
105		- ],
	76	+ // items: [
	77	+ // {
	78	+ // imgSrc1: "client/resources/img/img49_s.png",
	79	+ // imgSrc2: "client/resources/img/img50_s.png",
	80	+ // imgSrc: "client/resources/img/img77_41s.png",
	81	+ // isSecondImageVisible: false,
	82	+ // title: "america",
	83	+ // },
	84	+ // {
	85	+ // imgSrc1: "client/resources/img/img49_s.png",
	86	+ // imgSrc2: "client/resources/img/img50_s.png",
	87	+ // imgSrc: "client/resources/img/img47_s.png",
	88	+ // isSecondImageVisible: false,
	89	+ // title: "airplane",
	90	+ // },
	91	+ // {
	92	+ // imgSrc1: "client/resources/img/img49_s.png",
	93	+ // imgSrc2: "client/resources/img/img50_s.png",
	94	+ // imgSrc: "client/resources/img/img75_41s.png",
	95	+ // isSecondImageVisible: false,
	96	+ // title: "cat",
	97	+ // },
	98	+ // {
	99	+ // imgSrc1: "client/resources/img/img49_s.png",
	100	+ // imgSrc2: "client/resources/img/img50_s.png",
	101	+ // imgSrc: "client/resources/img/img74_41s.png",
	102	+ // isSecondImageVisible: false,
	103	+ // title: "mountain",
	104	+ // },
	105	+ // ],
	106	+ items: [],
106	107	timer: 0,
107	108	intervalId: null,
108	109	currentIndex: 0,
...	...	@@ -118,14 +119,44 @@
118	119	this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex; // 현재 단어장 인덱스
119	120	this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트
120	121	this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id
	122	+ console.log(this.wdBookId);
121	123
122		- // this.fetchWordList();
	124	+ this.fetchWordList();
123	125	},
124	126
125	127	async fetchWordList() {
126		- console.log("현재 단어장 콘텐츠 인덱스: ", this.$store.getters.getCurrentWdBkIndex);
127		- this.currentWdBkIndex = this.$store.getters.getCurrentWdBkIndex;
128		- console.log("현재 단어장 콘텐츠 인덱스에 대한 단어장 id: ", this.$store.getters.getWdBookIdList[this.currentWdBkIndex]);
	128	+ try {
	129	+ const response = await axios.post('/word/getWordsByBookId.json', {
	130	+ wdBookId: this.wdBookId,
	131	+ });
	132	+
	133	+ const wordList = response.data;
	134	+
	135	+ // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리
	136	+ const requests = wordList.map(async (word) => {
	137	+ const fileResponse = await axios.post("/file/find.json", {
	138	+ file_mng_id: word.fileMngId,
	139	+ });
	140	+
	141	+ const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null;
	142	+ console.log("각 단어의 fileRpath: ", fileRpath);
	143	+
	144	+ // items 배열에 새로운 항목 추가
	145	+ this.items.push({
	146	+ imgSrc1: "client/resources/img/img49_s.png",
	147	+ imgSrc2: "client/resources/img/img50_s.png",
	148	+ imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정
	149	+ isSecondImageVisible: false,
	150	+ title: word.wdNm,
	151	+ });
	152	+ });
	153	+
	154	+ // 모든 요청이 완료될 때까지 대기
	155	+ await Promise.all(requests);
	156	+
	157	+ } catch (error) {
	158	+ console.error('단어 목록을 불러오는 중 오류 발생:', error);
	159	+ }
129	160	},
130	161
131	162	async goToPrevPage() {

Delete comment