woals
2024-08-23
240823 권민수 단어장 나머지 유형 페이지들 api 데이터 연결
@dc9188c205ae43a5ed655b1f3cd909d29ac9db13
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
... | ... | @@ -47,7 +47,7 @@ |
| 47 | 47 |
/> |
| 48 | 48 |
<div class="textbox"> |
| 49 | 49 |
<div style="height: 80%; line-height: 200px"> |
| 50 |
- <img :src="item.imgSrc" alt="" /> |
|
| 50 |
+ <img :src="item.imgSrc" alt="" style="width: 120px;" /> |
|
| 51 | 51 |
</div> |
| 52 | 52 |
<p class="subtitle3" style="height: 20%">{{ item.title }}</p>
|
| 53 | 53 |
</div> |
... | ... | @@ -82,32 +82,33 @@ |
| 82 | 82 |
export default {
|
| 83 | 83 |
data() {
|
| 84 | 84 |
return {
|
| 85 |
- items: [ |
|
| 86 |
- {
|
|
| 87 |
- imgSrc1: "client/resources/img/img61_36s.png", |
|
| 88 |
- imgSrc2: "client/resources/img/img62_36s.png", |
|
| 89 |
- imgSrc: "client/resources/img/img59_36s.png", |
|
| 90 |
- title: "apple", |
|
| 91 |
- }, |
|
| 92 |
- {
|
|
| 93 |
- imgSrc1: "client/resources/img/img61_36s.png", |
|
| 94 |
- imgSrc2: "client/resources/img/img62_36s.png", |
|
| 95 |
- imgSrc: "client/resources/img/img2_4.png", |
|
| 96 |
- title: "bank", |
|
| 97 |
- }, |
|
| 98 |
- {
|
|
| 99 |
- imgSrc1: "client/resources/img/img61_36s.png", |
|
| 100 |
- imgSrc2: "client/resources/img/img62_36s.png", |
|
| 101 |
- imgSrc: "client/resources/img/img57_36s.png", |
|
| 102 |
- title: "car", |
|
| 103 |
- }, |
|
| 104 |
- {
|
|
| 105 |
- imgSrc1: "client/resources/img/img61_36s.png", |
|
| 106 |
- imgSrc2: "client/resources/img/img62_36s.png", |
|
| 107 |
- imgSrc: "client/resources/img/img56_36s.png", |
|
| 108 |
- title: "guitar", |
|
| 109 |
- }, |
|
| 110 |
- ], |
|
| 85 |
+ // items: [ |
|
| 86 |
+ // {
|
|
| 87 |
+ // imgSrc1: "client/resources/img/img61_36s.png", |
|
| 88 |
+ // imgSrc2: "client/resources/img/img62_36s.png", |
|
| 89 |
+ // imgSrc: "client/resources/img/img59_36s.png", |
|
| 90 |
+ // title: "apple", |
|
| 91 |
+ // }, |
|
| 92 |
+ // {
|
|
| 93 |
+ // imgSrc1: "client/resources/img/img61_36s.png", |
|
| 94 |
+ // imgSrc2: "client/resources/img/img62_36s.png", |
|
| 95 |
+ // imgSrc: "client/resources/img/img2_4.png", |
|
| 96 |
+ // title: "bank", |
|
| 97 |
+ // }, |
|
| 98 |
+ // {
|
|
| 99 |
+ // imgSrc1: "client/resources/img/img61_36s.png", |
|
| 100 |
+ // imgSrc2: "client/resources/img/img62_36s.png", |
|
| 101 |
+ // imgSrc: "client/resources/img/img57_36s.png", |
|
| 102 |
+ // title: "car", |
|
| 103 |
+ // }, |
|
| 104 |
+ // {
|
|
| 105 |
+ // imgSrc1: "client/resources/img/img61_36s.png", |
|
| 106 |
+ // imgSrc2: "client/resources/img/img62_36s.png", |
|
| 107 |
+ // imgSrc: "client/resources/img/img56_36s.png", |
|
| 108 |
+ // title: "guitar", |
|
| 109 |
+ // }, |
|
| 110 |
+ // ], |
|
| 111 |
+ items: [], |
|
| 111 | 112 |
selectedIndex: 0, |
| 112 | 113 |
|
| 113 | 114 |
wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트 |
... | ... | @@ -123,11 +124,41 @@ |
| 123 | 124 |
this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트 |
| 124 | 125 |
this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id |
| 125 | 126 |
|
| 126 |
- // this.fetchWordList(); |
|
| 127 |
+ this.fetchWordList(); |
|
| 127 | 128 |
}, |
| 128 | 129 |
|
| 129 | 130 |
async fetchWordList() {
|
| 131 |
+ try {
|
|
| 132 |
+ const response = await axios.post('/word/getWordsByBookId.json', {
|
|
| 133 |
+ wdBookId: this.wdBookId, |
|
| 134 |
+ }); |
|
| 130 | 135 |
|
| 136 |
+ const wordList = response.data; |
|
| 137 |
+ |
|
| 138 |
+ // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리 |
|
| 139 |
+ const requests = wordList.map(async (word) => {
|
|
| 140 |
+ const fileResponse = await axios.post("/file/find.json", {
|
|
| 141 |
+ file_mng_id: word.fileMngId, |
|
| 142 |
+ }); |
|
| 143 |
+ |
|
| 144 |
+ const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null; |
|
| 145 |
+ console.log("각 단어의 fileRpath: ", fileRpath);
|
|
| 146 |
+ |
|
| 147 |
+ // items 배열에 새로운 항목 추가 |
|
| 148 |
+ this.items.push({
|
|
| 149 |
+ imgSrc1: "client/resources/img/img61_36s.png", |
|
| 150 |
+ imgSrc2: "client/resources/img/img62_36s.png", |
|
| 151 |
+ imgSrc: "http://165.229.169.113:9080/" + fileRpath, // 받아온 fileRpath로 이미지 설정 |
|
| 152 |
+ title: word.wdNm, |
|
| 153 |
+ }); |
|
| 154 |
+ }); |
|
| 155 |
+ |
|
| 156 |
+ // 모든 요청이 완료될 때까지 대기 |
|
| 157 |
+ await Promise.all(requests); |
|
| 158 |
+ |
|
| 159 |
+ } catch (error) {
|
|
| 160 |
+ console.error('단어 목록을 불러오는 중 오류 발생:', error);
|
|
| 161 |
+ } |
|
| 131 | 162 |
}, |
| 132 | 163 |
|
| 133 | 164 |
async goToPrevPage() {
|
--- client/views/pages/main/Chapter/Chapter2_9.vue
+++ client/views/pages/main/Chapter/Chapter2_9.vue
... | ... | @@ -44,73 +44,25 @@ |
| 44 | 44 |
style="width: 93%" |
| 45 | 45 |
/> |
| 46 | 46 |
<div class="vocaGroup"> |
| 47 |
- <div class="flex justify-between mb80"> |
|
| 47 |
+ <div |
|
| 48 |
+ v-for="(word) in wordList" |
|
| 49 |
+ :key="word.wdId" |
|
| 50 |
+ class="flex justify-between mb80 word-item" |
|
| 51 |
+ > |
|
| 48 | 52 |
<article class="flex align-center"> |
| 49 | 53 |
<div class="imgGroup mr30"> |
| 50 | 54 |
<img |
| 51 |
- src="../../../../resources/img/img74_41s.png" |
|
| 55 |
+ :src= word.fileRpath |
|
| 52 | 56 |
data-num="1" |
| 53 | 57 |
class="ink" |
| 58 |
+ style="width: 150px" |
|
| 54 | 59 |
/> |
| 55 | 60 |
</div> |
| 56 | 61 |
<div class="flex align-start"> |
| 57 | 62 |
<div> |
| 58 |
- <h3>mountain</h3> |
|
| 63 |
+ <h3>{{ word.wdNm }}</h3>
|
|
| 59 | 64 |
<div class="flex align-center mt10"> |
| 60 |
- <span class="title1">산</span> |
|
| 61 |
- </div> |
|
| 62 |
- </div> |
|
| 63 |
- </div> |
|
| 64 |
- </article> |
|
| 65 |
- <article class="flex align-center"> |
|
| 66 |
- <div class="imgGroup mr30"> |
|
| 67 |
- <img |
|
| 68 |
- src="../../../../resources/img/img75_41s.png" |
|
| 69 |
- data-num="2" |
|
| 70 |
- class="ink" |
|
| 71 |
- /> |
|
| 72 |
- </div> |
|
| 73 |
- <div class="flex align-start"> |
|
| 74 |
- <div> |
|
| 75 |
- <h3>cat</h3> |
|
| 76 |
- <div class="flex align-center mt10"> |
|
| 77 |
- <span class="title1">고양이</span> |
|
| 78 |
- </div> |
|
| 79 |
- </div> |
|
| 80 |
- </div> |
|
| 81 |
- </article> |
|
| 82 |
- </div> |
|
| 83 |
- <div class="flex justify-between"> |
|
| 84 |
- <article class="flex align-center"> |
|
| 85 |
- <div class="imgGroup mr30"> |
|
| 86 |
- <img |
|
| 87 |
- src="../../../../resources/img/img76_41s.png" |
|
| 88 |
- data-num="3" |
|
| 89 |
- class="ink" |
|
| 90 |
- /> |
|
| 91 |
- </div> |
|
| 92 |
- <div class="flex align-start"> |
|
| 93 |
- <div> |
|
| 94 |
- <h3>watermelon</h3> |
|
| 95 |
- <div class="flex align-center mt10"> |
|
| 96 |
- <span class="title1">수박</span> |
|
| 97 |
- </div> |
|
| 98 |
- </div> |
|
| 99 |
- </div> |
|
| 100 |
- </article> |
|
| 101 |
- <article class="flex align-center"> |
|
| 102 |
- <div class="imgGroup mr30"> |
|
| 103 |
- <img |
|
| 104 |
- src="../../../../resources/img/img77_41s.png" |
|
| 105 |
- data-num="4" |
|
| 106 |
- class="ink" |
|
| 107 |
- /> |
|
| 108 |
- </div> |
|
| 109 |
- <div class="flex align-start"> |
|
| 110 |
- <div> |
|
| 111 |
- <h3>america</h3> |
|
| 112 |
- <div class="flex align-center mt10"> |
|
| 113 |
- <span class="title1">보도</span> |
|
| 65 |
+ <span class="title1">{{ word.wdMnng }}</span>
|
|
| 114 | 66 |
</div> |
| 115 | 67 |
</div> |
| 116 | 68 |
</div> |
... | ... | @@ -178,6 +130,7 @@ |
| 178 | 130 |
data() {
|
| 179 | 131 |
return {
|
| 180 | 132 |
draggedElementId: null, // 드래그한 요소의 ID를 저장 |
| 133 |
+ wordList: [], |
|
| 181 | 134 |
|
| 182 | 135 |
wdBookIdList: [], // 단어 컨텐츠의 단어장 id 리스트 |
| 183 | 136 |
wdBookId: "", // 현재 단어장 id |
... | ... | @@ -192,12 +145,40 @@ |
| 192 | 145 |
this.wdBookIdList = this.$store.getters.getWdBookIdList; // 단어컨텐츠의 단어장 id 리스트 |
| 193 | 146 |
this.wdBookId = this.$store.getters.getWdBookIdList[this.currentWdBkIndex] // 현재 단어장 콘텐츠 인덱스에 대한 단어장 id |
| 194 | 147 |
|
| 195 |
- // this.fetchWordList(); |
|
| 148 |
+ this.fetchWordList(); |
|
| 196 | 149 |
}, |
| 197 | 150 |
|
| 198 | 151 |
async fetchWordList() {
|
| 152 |
+ try {
|
|
| 153 |
+ const response = await axios.post("/word/getWordsByBookId.json", {
|
|
| 154 |
+ wdBookId: this.wdBookId, |
|
| 155 |
+ }); |
|
| 199 | 156 |
|
| 157 |
+ const wordList = response.data; |
|
| 158 |
+ |
|
| 159 |
+ // 각 word 객체에 대해 fileRpath를 받아오는 요청 처리 |
|
| 160 |
+ const requests = wordList.map(async (word) => {
|
|
| 161 |
+ const fileResponse = await axios.post("/file/find.json", {
|
|
| 162 |
+ file_mng_id: word.fileMngId, |
|
| 163 |
+ }); |
|
| 164 |
+ |
|
| 165 |
+ const fileRpath = fileResponse.data.list.length > 0 ? fileResponse.data.list[0].fileRpath : null; |
|
| 166 |
+ console.log("각 단어의 fileRpath: ", fileRpath);
|
|
| 167 |
+ |
|
| 168 |
+ word.fileRpath = "http://165.229.169.113:9080/" + fileRpath; // fileRpath 값을 해당 객체에 추가 |
|
| 169 |
+ }); |
|
| 170 |
+ |
|
| 171 |
+ // 모든 요청이 완료될 때까지 대기 |
|
| 172 |
+ await Promise.all(requests); |
|
| 173 |
+ |
|
| 174 |
+ // 최종적으로 wordList를 설정 |
|
| 175 |
+ this.wordList = wordList; |
|
| 176 |
+ console.log("단어 리스트 -> ", this.wordList);
|
|
| 177 |
+ } catch (error) {
|
|
| 178 |
+ console.error("단어 목록을 불러오는 중 오류 발생:", error);
|
|
| 179 |
+ } |
|
| 200 | 180 |
}, |
| 181 |
+ |
|
| 201 | 182 |
|
| 202 | 183 |
async goToPrevPage() {
|
| 203 | 184 |
if (this.currentWdBkIndex - 1 < 0) {
|
... | ... | @@ -338,6 +319,12 @@ |
| 338 | 319 |
position: absolute; |
| 339 | 320 |
top: 90px; |
| 340 | 321 |
left: 120px; |
| 322 |
+ display: flex; |
|
| 323 |
+ flex-wrap: wrap; |
|
| 324 |
+} |
|
| 325 |
+ |
|
| 326 |
+.word-item {
|
|
| 327 |
+ width: 49%; |
|
| 341 | 328 |
} |
| 342 | 329 |
|
| 343 | 330 |
.ink {
|
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?