1. package.json
설정파일이다
Spring의 pom.xml과 유사하다
2. index.html
기본적인 html파일
App.vue가 들어갈 장소를 명시해놓는 뼈대
보통 수정x
<body>
<div id="app"></div>
</body>
이부분이 App.vue가 들어가는 장소
3. main.js
App.vue의 템플릿 내의 <div id="app">을 마운트 한다.
여기서 import한 파일들은 나머지 뷰에서 잘 동작한다.
import Vue from 'vue'
import App from '~/App'
import router from '~/router';
import axios from 'axios';
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import '~/resources/css/common.css';
import Fragment from 'vue-fragment'
import VueCookie from 'vue-cookie';
import {store} from '~/vuex';
import Vue2TouchEvents from 'vue2-touch-events';
import i18n from '~/i18n'
import VueCryptojs from 'vue-cryptojs';
/*
생략
*/
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
});4. App.vue
가장 먼저 마운팅되는 vue 파일
router-link는 html태그로 변환되면 a태그로 렌더링되고
router-view는 현재 라우터가 제공하는 컴포넌트가 렌더링 된다.
<template>
<div id="app" >
<transition name="fade">
<router-view></router-view>
</transition>
<spinner :loading="loadingStatus"></spinner>
<alert></alert>
<confirm-timer></confirm-timer>
</div>
</template>5. router/index.js
Server나 Controller처럼 주소를 할당해주는 부분
Vue.use(Router);
const routes = address.concat(board,login,mail,main,sanc,schedule,setting,review,eqm,ws);
console.log("index.js");
export default new Router({
//mode: 'history',
routes,
// 라우터 이동 시 스크롤 위치 조정
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
});6. 나머지 vue 파일들
라우터 경로에 포함된 vue 파일들이다
실제 프로젝트 로그인 동작 과정 메모
1. 로그인 페이지로 이동
2. 아이디, 비밀번호 입력 후 로그인 버튼 클릭
3. Login.vue 파일의 methods의 onSubmit 함수 호출
4. onSubmit 함수에서 마찬가지로 Login.vue의 methods중 하나인 idsave_checkbox_changed 함수 호출
(아이디 저장 체크박스 체크 여부 확인)
5. 이후 새 URLSearchParams 객체(params) 생성하고 여기 인코딩한 아이디, 비밀번호 및 각종 정보 담음
6. params를 이용해서 Vuex Store의 login 안의 action인 CHECK_AUTHENTICATION 호출
this.$store.dispatch('login/CHECK_AUTHENTICATION',params);
action 호출할땐 dispatch 사용
7. CHECK_AUTHENTICATION action에서 api 호출해서 데이터 받아옴
8. 그 결과값으로 mutation의 CHECK_AUTHENTICATION 호출
CHECK_AUTHENTICATION(context,user){
LoginService.checkAuthentication(user)
.then(res=>context.commit("CHECK_AUTHENTICATION",res))
.catch(err=>console.log(err));
}
LoginService.checkAuthentication(user)가 user 를 패러미터로 api 호출하는 함수고
그 결과(res)로 mutation 호출하는데, 이땐 commit 사용
9. 이후 mutation에서 결과 확인 후 결과에 따라 이동
CHECK_AUTHENTICATION(state,res){
if (res != null && res.data != null) {
switch(res.data){
case "success":
router.replace({name : 'main'});
break;
case "duplicate":
router.replace({name : 'duplicateLogin'});
break;
case "block":
store.commit("common/ON_OPEN_ALERT", i18n.t("MM0229"));
break;
default:
}
}
}'Vue' 카테고리의 다른 글
| Vue 프로젝트 경로의 @ (0) | 2024.05.07 |
|---|---|
| emit으로 자식 -> 부모 데이터 전달 (0) | 2024.05.03 |
| Props vs EventBus vs Vuex (0) | 2024.05.02 |
| Vue 객체의 속성 및 라이프사이클 정리 (0) | 2024.05.02 |
| <fragment> 태그 (0) | 2024.03.29 |
