Commit @feb23e1ed6f62dc00734bc4219fdd564f8099de8

woals 2024-08-13

240813 권민수 학생 정보 받아오기 기능 구현(테스트)

@feb23e1ed6f62dc00734bc4219fdd564f8099de8

de44dd5

feb23e1

client/views/layout/Side.vue

--- client/views/layout/Side.vue

+++ client/views/layout/Side.vue


             <div class="flex align-start">
                 <img src="../../resources/img/img16_s.png" alt="">
                 <div class="ml25" >
-                    <p class="name mb10">학생이름</p>
-                    <p class="mb5">xx중학교 3학년 x반</p>
+                    <p class="name mb10">{{ studentInfo.studentName }}</p>
+                    <p class="mb5">{{ studentInfo.institutionName }} {{ studentInfo.grade }}학년 {{ studentInfo.className }}</p>
                     <progress-bar :progress="progress"></progress-bar>
                     <span @click="increaseProgress">오늘의 공부</span>
                     <span class="brown ml10">{{ progress }}%</span>

             <hr>
             <p class="title2 mb25">최근 학습 히스토리</p>
             <ul class="flex justify-between ml30 mb30">
-                <li>자학사 3학년 2학기</li>
-                <li>자학사 3학년 2학기</li>
+                <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
+                    {{ historyItem.bookName }} {{ historyItem.unitName }}
+                </li>
             </ul>
         </div>
         <div class="ask mb30">

  
 <script>
 import ProgressBar from '../component/ProgressBar.vue';
+import axios from 'axios';
 
 export default {
     data () {
         return {
             buttonText: '오답노트',
-            progress: 20
+            progress: 20,
+            studentInfo: {
+                studentName: '',
+                institutionName: '',
+                grade: '',
+                className: '',
+                studentQuestion: '',
+                history: []
+            },
+            userId: '1' // userId 임시 설정
         }
     },
     methods: {
+
+        // 학생 정보를 가져오는 메서드
+        fetchStudentInfo() {
+            axios.post('/studentInfo/getInfo.json', { userId: this.userId })
+            .then(response => {
+                console.log(response.data);
+                this.studentInfo = response.data;
+            })
+            .catch(error => {
+                console.error('학생 정보 가져오기 실패:', error);
+            });
+        },
+
         handleClick() {
             this.toggleText();
             this.goToPage('PreviewNote');
         },
+
         handleClick() {
             this.toggleTextAndNavigate();
         },
+
         toggleTextAndNavigate() {
             if (this.buttonText === '오답노트') {
                 this.buttonText = '학습 코스';

                  // 버튼 텍스트가 '오답노트'일 때 이동할 경로
             }
         },
+
         goToPage(page) {
             this.$router.push({ name: page });
         },
+
         increaseProgress() {
-      if (this.progress < 100) {
-        this.progress += 10;
-      }
-    }
+            if (this.progress < 100) {
+                this.progress += 10;
+            }
+        }
 
     },
     watch: {

 
     },
     components: {
-    ProgressBar
+        ProgressBar
   },
     mounted() {
-        console.log('Menu mounted');
+        console.log('Side mounted');
+        this.fetchStudentInfo(); 
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -7,8 +7,8 @@
7	7	<div class="flex align-start">
8	8	<img src="../../resources/img/img16_s.png" alt="">
9	9	<div class="ml25" >
10		- <p class="name mb10">학생이름</p>
11		- <p class="mb5">xx중학교 3학년 x반</p>
	10	+ <p class="name mb10">{{ studentInfo.studentName }}</p>
	11	+ <p class="mb5">{{ studentInfo.institutionName }} {{ studentInfo.grade }}학년 {{ studentInfo.className }}</p>
12	12	<progress-bar :progress="progress"></progress-bar>
13	13	<span @click="increaseProgress">오늘의 공부</span>
14	14	<span class="brown ml10">{{ progress }}%</span>
...	...	@@ -17,8 +17,9 @@
17	17	<hr>
18	18	<p class="title2 mb25">최근 학습 히스토리</p>
19	19	<ul class="flex justify-between ml30 mb30">
20		- <li>자학사 3학년 2학기</li>
21		- <li>자학사 3학년 2학기</li>
	20	+ <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
	21	+ {{ historyItem.bookName }} {{ historyItem.unitName }}
	22	+ </li>
22	23	</ul>
23	24	</div>
24	25	<div class="ask mb30">
...	...	@@ -40,22 +41,47 @@
40	41
41	42	<script>
42	43	import ProgressBar from '../component/ProgressBar.vue';
	44	+import axios from 'axios';
43	45
44	46	export default {
45	47	data () {
46	48	return {
47	49	buttonText: '오답노트',
48		- progress: 20
	50	+ progress: 20,
	51	+ studentInfo: {
	52	+ studentName: '',
	53	+ institutionName: '',
	54	+ grade: '',
	55	+ className: '',
	56	+ studentQuestion: '',
	57	+ history: []
	58	+ },
	59	+ userId: '1' // userId 임시 설정
49	60	}
50	61	},
51	62	methods: {
	63	+
	64	+ // 학생 정보를 가져오는 메서드
	65	+ fetchStudentInfo() {
	66	+ axios.post('/studentInfo/getInfo.json', { userId: this.userId })
	67	+ .then(response => {
	68	+ console.log(response.data);
	69	+ this.studentInfo = response.data;
	70	+ })
	71	+ .catch(error => {
	72	+ console.error('학생 정보 가져오기 실패:', error);
	73	+ });
	74	+ },
	75	+
52	76	handleClick() {
53	77	this.toggleText();
54	78	this.goToPage('PreviewNote');
55	79	},
	80	+
56	81	handleClick() {
57	82	this.toggleTextAndNavigate();
58	83	},
	84	+
59	85	toggleTextAndNavigate() {
60	86	if (this.buttonText === '오답노트') {
61	87	this.buttonText = '학습 코스';
...	...	@@ -67,14 +93,16 @@
67	93	// 버튼 텍스트가 '오답노트'일 때 이동할 경로
68	94	}
69	95	},
	96	+
70	97	goToPage(page) {
71	98	this.$router.push({ name: page });
72	99	},
	100	+
73	101	increaseProgress() {
74		- if (this.progress < 100) {
75		- this.progress += 10;
76		- }
77		- }
	102	+ if (this.progress < 100) {
	103	+ this.progress += 10;
	104	+ }
	105	+ }
78	106
79	107	},
80	108	watch: {
...	...	@@ -84,10 +112,11 @@
84	112
85	113	},
86	114	components: {
87		- ProgressBar
	115	+ ProgressBar
88	116	},
89	117	mounted() {
90		- console.log('Menu mounted');
	118	+ console.log('Side mounted');
	119	+ this.fetchStudentInfo();
91	120	}
92	121	}
93	122	</script> (파일 끝에 줄바꿈 문자 없음)

Delete comment