Commit @2643390fde509c07d37e7f2adb6db20219ecef7d

dajeong 2024-08-22

240822 정다정 그림지문 API 연결

@2643390fde509c07d37e7f2adb6db20219ecef7d

c433324

2643390

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

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

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


     <div id="Chapter1" class="content-wrap">
         <div style="margin: 30px 0px 50px; width: 20%">
             <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
             </router-link>
         </div>
-        <div class="title-box mb25 flex align-center mt40" style="
-    justify-content: space-between;
-">
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
             <div>
                 <span class="title mr40">1. Hello WORLD</span>
                 <span class="subtitle">my name is dd</span>
             </div>
-            <button class="completeBtn" @click="complete"> 학습 종료 </button>
+            <button class="completeBtn" @click="complete">학습 종료</button>
         </div>
         <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt="">
-            </div>
+            <div class="pre-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
             <div class="content title-box">
                 <div class="listenGroup">
                     <p class="title mt25 title-bg">step1. Hello WORLD</p>
-                    <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
-                    <div class="textbox">
-                        <p class="title">The Eiffel Tower and the statue of Lierbty</p>
-                        <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built
-                            for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top.
-                            You can walk or take elevators to the top.</p>
-                    </div>
-                    <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img
-                            src="../../../../resources/img/btn09_s.png" data-num="1"></button>
+                    <!--
+                    <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
+                    -->
+                    <img class="bg" :src="img_src" />
                 </div>
             </div>
-            <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="">
-            </div>
+            <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="" /></div>
         </div>
         <TextToImage />
     </div>
 </template>
 
 <script>
-import TextToImage from '../../../component/TextToImage.vue';
+import TextToImage from "../../../component/TextToImage.vue";
+import axios from "axios";
 export default {
     data() {
         return {
-        }
+            text_id: "TEXT_000000000000049",
+            text_data: null,
+            img_src: null,
+        };
     },
     methods: {
         complete() {
             const { unit_id, book_id } = this.$route.query;
-            this.$router.push({ name: 'Dashboard', query: { value: 1, unit_id, book_id } });
+            this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
         },
         goToPage(page) {
             this.$router.push({ name: page });
-        }
+        },
+        // 지문 API
+        async fetchText() {
+            axios({
+                url: "/text/selectOneText.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    textId: this.text_id,
+                },
+            })
+                .then((response) => {
+                    this.text_data = response.data[0];
+                    console.log("지문 데이터 : ", this.text_data);
+                    this.img_src = this.fetchImage(this.text_data.file_rpath);
+                })
+                .catch((err) => {
+                    console.log("지문 에러 : ", err);
+                });
+        },
+        // 이미지 불러오기
+        fetchImage(fileRpath) {
+            return "http://localhost:9080/" + fileRpath;
+        },
     },
-    watch: {
-
-    },
-    computed: {
-
-    },
+    watch: {},
+    computed: {},
     components: {
-        TextToImage: TextToImage
+        TextToImage: TextToImage,
     },
     mounted() {
-    }
-}
+        this.fetchText();
+    },
+};
 </script>
 <style scoped>
 .listenGroup .textbox {
-    width: 900px
+    width: 900px;
 }
 
 .completeBtn {

     padding: 10px 30px;
     border-radius: 10px;
     font-size: 28px;
-    font-family: 'ONEMobilePOPOTF';
+    font-family: "ONEMobilePOPOTF";
 }
-</style>
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,74 +2,91 @@
2	2	<div id="Chapter1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8		- <div class="title-box mb25 flex align-center mt40" style="
9		- justify-content: space-between;
10		-">
	8	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
11	9	<div>
12	10	<span class="title mr40">1. Hello WORLD</span>
13	11	<span class="subtitle">my name is dd</span>
14	12	</div>
15		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	13	+ <button class="completeBtn" @click="complete">학습 종료</button>
16	14	</div>
17	15	<div class="flex justify-between align-center">
18		- <div class="pre-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt="">
19		- </div>
	16	+ <div class="pre-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
20	17	<div class="content title-box">
21	18	<div class="listenGroup">
22	19	<p class="title mt25 title-bg">step1. Hello WORLD</p>
23		- <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
24		- <div class="textbox">
25		- <p class="title">The Eiffel Tower and the statue of Lierbty</p>
26		- <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built
27		- for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top.
28		- You can walk or take elevators to the top.</p>
29		- </div>
30		- <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img
31		- src="../../../../resources/img/btn09_s.png" data-num="1"></button>
	20	+ <!--
	21	+ <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
	22	+ -->
	23	+ <img class="bg" :src="img_src" />
32	24	</div>
33	25	</div>
34		- <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="">
35		- </div>
	26	+ <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="" /></div>
36	27	</div>
37	28	<TextToImage />
38	29	</div>
39	30	</template>
40	31
41	32	<script>
42		-import TextToImage from '../../../component/TextToImage.vue';
	33	+import TextToImage from "../../../component/TextToImage.vue";
	34	+import axios from "axios";
43	35	export default {
44	36	data() {
45	37	return {
46		- }
	38	+ text_id: "TEXT_000000000000049",
	39	+ text_data: null,
	40	+ img_src: null,
	41	+ };
47	42	},
48	43	methods: {
49	44	complete() {
50	45	const { unit_id, book_id } = this.$route.query;
51		- this.$router.push({ name: 'Dashboard', query: { value: 1, unit_id, book_id } });
	46	+ this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
52	47	},
53	48	goToPage(page) {
54	49	this.$router.push({ name: page });
55		- }
	50	+ },
	51	+ // 지문 API
	52	+ async fetchText() {
	53	+ axios({
	54	+ url: "/text/selectOneText.json",
	55	+ method: "post",
	56	+ headers: {
	57	+ "Content-Type": "application/json; charset=UTF-8",
	58	+ },
	59	+ data: {
	60	+ textId: this.text_id,
	61	+ },
	62	+ })
	63	+ .then((response) => {
	64	+ this.text_data = response.data[0];
	65	+ console.log("지문 데이터 : ", this.text_data);
	66	+ this.img_src = this.fetchImage(this.text_data.file_rpath);
	67	+ })
	68	+ .catch((err) => {
	69	+ console.log("지문 에러 : ", err);
	70	+ });
	71	+ },
	72	+ // 이미지 불러오기
	73	+ fetchImage(fileRpath) {
	74	+ return "http://localhost:9080/" + fileRpath;
	75	+ },
56	76	},
57		- watch: {
58		-
59		- },
60		- computed: {
61		-
62		- },
	77	+ watch: {},
	78	+ computed: {},
63	79	components: {
64		- TextToImage: TextToImage
	80	+ TextToImage: TextToImage,
65	81	},
66	82	mounted() {
67		- }
68		-}
	83	+ this.fetchText();
	84	+ },
	85	+};
69	86	</script>
70	87	<style scoped>
71	88	.listenGroup .textbox {
72		- width: 900px
	89	+ width: 900px;
73	90	}
74	91
75	92	.completeBtn {
...	...	@@ -78,6 +95,6 @@
78	95	padding: 10px 30px;
79	96	border-radius: 10px;
80	97	font-size: 28px;
81		- font-family: 'ONEMobilePOPOTF';
	98	+ font-family: "ONEMobilePOPOTF";
82	99	}
83		-</style> (No newline at end of file)
	100	+</style>

Delete comment