[FrontEnd] Vue Component, Header 생성

ss0510s·2022년 6월 21일
0

졸업프로젝트

목록 보기
4/9

1. Component

  • component : 화면을 구성하는 블록들, 일반적으로 header, content, footer로 구성

  • component 등록방법

  1. 전역 컴포넌트: 특정 인스턴스에서만 사용 가능
	Vue.component('컴포넌트 이름',{
		//컴포넌트 이름
	});
  1. 지역 컴포넌트 : 여러 인스턴스에서 공통으로 사용
	new Vue({
      components: {
      	'컴포넌트 이름' : 컴포넌트 내용
      }
	});
  • vue 구성
    <template>
      //html 내용
    </template>

    <script>
      //vue 내용
      //객체 export
      export default{
			...
		}
    </script>

    <style>
      //css 내용
    </style>
  • export default 구조
    1. name : component 객체 이름
    2. data : vue 객체 내부적으로 사용하는 변수 선언
    3. methods: method 정의
    4. computed: 종속된 대상의 data에 변화가 감지될 경우, 정의한 함수 실행, 함수 실행 결과를 캐싱하여 저장하여 data의 변화가 없으면 재호출되어도 함수를 다시 등록하지 않음.
    5. watch:지정한 대상의 data에 변화가 감지될 경우, 정의한 함수 실행

2. 뷰 헤더

  • components/common/ClassHeader.vue
    : 헤더를 구현할 vue 파일 생성
  1. script 내용
	<script>
      // 다른 모듈 import
      //axios -> 백엔드 통신
    import axios from 'axios'

	//객체를 내보냄
    export default{
      	//name - vue 객체 이름
        name: 'ClassHeader',
    
      	// data - vue 객체 내부적으로 사용하는 변수 선언
        data : function() {
            return {
                name: '',
                classList: []
            }
        },
      // method 정의
        methods: {
            getClassList() {
              // 백엔드와 통신 - Http get 메서드로 요청
              // get: 백엔드의 정보 저장
                axios.get("http://localhost:8080/classes/" + this.$route.query.user_id // path + query
               ).then((res)=>{ 
                  // 통신 성공시 실행
                this.classList = res.data // 데이터를 받아 변수에 저장
                console.log(this.classList)
              }).catch((err) => {
                  // 통신 실패시 실행
                console.log(err);
              });
            },
            CheckPage(classItem) {
              // URL 이동, 히스토리 스택에 push하므로 뒤로가기 버튼 클릭시 이전 URL로 이동
              // query : 해당 component로 값 전달 -> 경로 노출
              // params : 해당 component로 값 전달 -> 경로 노출 x
                this.$router.push({path : '/checks/', query : {user_id: this.$route.query.user_id, classIdx : classItem.classIdx, className: classItem.className}} );
            },
            ClassMain() {
              this.$router.push({path: '/classes', query : {user_id:this.$route.query.user_id}});
            }, UserPage() {
                this.$router.push({path: '/user', query : {user_id:this.$route.query.user_id}});
            }
        },
      
      // vue 인스턴스가 dom에 마운트된 직후 생성
        mounted() {
          // 이전 URL에서 전달받은 query를 변수에 저장
            this.name = this.$route.query.user_id
            this.getClassList()
        }
    }
    </script>
  • method 호출 순서

    • created : 인스턴스가 작성된 후 동기적으로 호출, mounted보다 먼저 호출
    • mounted : 인스턴스가 마운트된 직후 호출
  • this.$router.push({path: '이동할 URL', query: {data: data}, params: {data: data}}

    • URL 이동할 때 사용하며 히스토리 스택에 쌓여 뒤로가기 버튼 클릭시 이전 URL로 이동
    • path : 이동할 URL
    • query: 전달할 데이터, 경로에 노출됨
    • params: 전달할 데이터, 경로에 노출되지 않음
    • this.$route.query.data : 이전 component에서 위의 메소드를 통해 넘겨받은 query에 접근
  1. template 내용
<template>
    <div class="head">
        <header>
            <div class ="head_lan">
              <!-- 사이드바 구현 -->
            	<div class = main-nav-left> 
                	<img id="menu_img" src="../../icons/menu_color.svg" alt="menu">
                	<div class = "sub-menu">
                  		<div class ="class_menu">
                        	<h3 style="cursor:default">출석부</h3>
                        	<tr v-for="(classItem, classindex) in classList" v-bind:key="classItem.classIdx">
                              
                              <!-- v if문 : 조건이 true일 시 실행-->
                              <div v-if="classItem.status == 'active'" class = "class_list">
                                <!-- vue data에서 선언한 변수에 접근 가능-->
                                  <td style="cursor:pointer" @click="CheckPage(classItem)" id ="class_name">({{classindex + 1}}) {{classItem.className}}</td>
                              </div>
            				</tr>
            			</div>
            		</div>
            		</div>
              <!-- 웹페이지 타이틀 -->
            		<img style="cursor:pointer" @click="ClassMain()" id="title_img" src="../../icons/title_color.svg" alt="title">
            	</div>
          		<!-- 웹페이지 우측 상단 메뉴 -->
            	<ul class="menu">
                  	<!-- router-link : 라우터로 등록된 해당 URL로 이동-->
                	<li><router-link to='/login'><img id="logout_img" src="../../icons/logout_color.svg" alt="logout"></router-link></li>
                	<li style="cursor:default" id="mypage">{{ name }}</li>
                	<li id ="icon">
                	<img style="cursor:pointer" @click="UserPage()" id="user_img" src="../../icons/user_color.svg" alt="user">
                	</li>
            	</ul>
        </header>
    </div> 
</template>
  1. style 내용
/*
scoped -> 해당 component에만 적용하도록 하는 옵션
scoped이 없을 경우 다른 compoent의 동일한 이름에 똑같이 적용되는 문제가 발생함
*/
<style scoped>
/*
	생략	...
*/

/*
	사이드바 - 숨겼다가 마우스가 아이콘 위로 올라갈 시 나오게함
*/
    .sub-menu{
        z-index: 1;
        width: 0;
        height: 100%;
        overflow: hidden;
        background-color: rgba(73, 73, 232, 0.8);
        transition-duration: 0.5s;
    }
    .main-nav-left:hover > .sub-menu{
        height: 100%;
        width: 300px;
        overflow: hidden
    }

/*
	생략...
*/

</style>

3. 뷰 헤더를 사용할 Component

  • component/ClassMain.vue
    : 헤더를 다른 component에 적용
  1. script: Header를 component로 등록
<script>
  import axios from 'axios'
// Header를 import함
  import ClassHeader from './common/ClassHeader.vue'

  export default {
    name: 'ClassMain',
    data : function(){
      return {
        classList : [],
      };
    },
    // component로 ClassHeader 등록
    components: {
      ClassHeader
    },    
    methods: {
        getClassList() {
            axios.get('백엔드 경로'
           ).then((res)=>{
            this.classList = res.data
            console.log(this.classList)
          }).catch((err) => {
            console.log(err);
          });
        }
    }
  }
</script>
  1. template : 헤더 출력
<template>
  <div id="all">
  	<ClassHeader />
  </div>
</template>
profile
개발자가 되기 위해 성장하는 중입니다.

0개의 댓글