BoardList.vue 에서 가장먼저 실행되는 부분은 함수부분
mounted 부분이 먼저 실행되면서
하단의 board(pageNo)가 실행 => paging(totalcount)가 실행
쌤이 주신 파일 다시 넣었다.
페이징부분은 다시 살펴보자
pdf_5차 참고
p12 ~ Vuex 설치하기
[ Vuex ]
> npm install --save vuex
> npm install --save vuex-persistedstate
설치가 완료됐다면 아래처럼 package.json에서 확인할 수 있다.
src 아래 store 폴더 생성 > 내부에 store.js 파일생성
pdf에 있는 코드 붙여넣어주고 (로그인&로그아웃을 위해 필요)
* mutaion : Vuex 스토어에서 상태(state)를 변경하는 일련의 함수들을 정의하는 곳.
위의 경우 두개의 mutaion 정의,
setUser에서는 state 객체 내의 m_name 및 m_id 속성을 userInfo 객체의 값으로 업데이트.
logout에서는 state 객체 내의 m_name 및 m_id 를 null로 재설정.
mutaions 은 일반적으로 컴포넌트에서 호출되며, commit 메서드를 사용하여 호출
main.js에 store 추가
이제 LoginPage.vue 로 가서 input창과 로그인 버튼 만들어준다.
<template>
<div class="login">
<h1>login</h1>
<input v-model="userId" type="text">
<input v-model="userPassword" type="password">
<button class="btn" @click="loginSubmit">로그인</button>
</div>
</template>
data설정은 아래처럼
store에서 가져와 m_name, m_id를 다시 같은 변수로 선언해준다.
<script>
export default{
data(){
return{
userId: null,
userPassword: null,
userInfo: {
m_name : this.$store.getters.getUserName,
m_id : this.$store.getters.getUserId,
},
};
},
};
</script>
로그인 버튼을 눌렀을 때 실행될 loginSumit() 함수를 만들어준다.
<script>
export default{
data(){
return{
userId: null,
userPassword: null,
userInfo: {
m_name : this.$store.getters.getUserName,
m_id : this.$store.getters.getUserId,
},
};
},
methods: {
loginSubmit(){
alert(this.userId + ":" + this.userPassword);
}
},
};
</script>
입력창에 값들을 넣고 alert로 실행시켜보면 입력값은 잘 잡아온다.
입력값들을 서버로 보내준다.
methods: {
loginSubmit(){
//alert(this.userId + ":" + this.userPassword);
let login = {};
login.userId = this.userId,
login.userPassword = this.userPassword;
try {
this.$axios
.post(this.$server+"/login", JSON.stringify(login), {
headers: { "Content-Type": `application/json` },
})
.then((res) => {
if (res.status === 200) {
if (res.data.count == 1) {
this.userInfo.m_name = res.data.m_name,
this.userInfo.m_id = login.userId,
this.$store.commit("setUser", this.userInfo);
this.$router.push("/boardList");
}else{this.error = '올바른 아이디와 암호를 입력하세요.';}
}
});
} catch (error) {console.error(error);}
},
},
서버에서 map으로 잡아와 출력해보면
잘 잡아온다.
그런데 pw가 암호화 되어있어서 mapper를 수정해줘야 한다.
입력값들을 가지고가서 db와 비교후에 결과를 출력해보면
아래처럼 일치하는 결과값을 잘 가져와 출력한다.
아래 로직에 따라
.then((res) => {
if (res.status === 200) {
if (res.data.count == 1) {
this.userInfo.m_name = res.data.m_name,
this.userInfo.m_id = login.userId,
this.$store.commit("setUser", this.userInfo);
this.$router.push("/boardList");
}else{this.error = '올바른 아이디와 암호를 입력하세요.';}
}
});
* commit : mutaion 을 호출하는 메서드
로그인 성공하면(count값이 1이라면) boardList 페이지로 이동
이제 로그인했다면 아래처럼 boardList 페이지에 표시되도록 해준다.
store의 저장된 값을 불러온건데
import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";
.......
plugins: [createPersistedState()], // f5눌렀을때 local에서 가져오기
=> Vuex 스토어의 상태를 로컬 스토리지에 저장, 이를 통해 페이지를 새로 고치거나 다시 열 때도 상태를 검색할 수 있다.
( vue에서의 session역할 )
pdf_p18 참고
로그인한 사용자에게만 글쓰기 버튼이 보이도록 설정해준다. (BoardList.vue)
<button v-if="this.$store.getters.getUserId != null" @click="write">글쓰기</button>
data에 userInfo (m_name, m_id) 추가해준다.
data() {
return {
list: [],
//this.$router = 라우터 객체
//this.$route = 라우터 상태를 관리하는 객체
requestBody: this.$route.query,
pageNo: this.$route.query.pageNo,
totalcount: null,
totalPage: null,
startPage: null,
endPage: null,
pageList: [],
userInfo: {
m_name: this.$store.getters.getUserName,
m_id: this.$store.getters.getUSerId,
}
};
},
이렇게 설정해주면 이제 m_name으로 불러올 수 있다.
<h1>board : {{ this.userInfo.m_name }}</h1>
포트번호 80으로 변경
mapper 앞에 static 빼줬다.
위의 경로에 맞춰서 mapper 폴더도 static 밖으로 빼줬다.
pdf 6차 참고 _ vue.config.js 설정하기 (p.3)
> spring boot + vue 프로젝트 합치기
전자정부 서버 연결해준다.
경로가 너무 길어서 바꿔줄건데
properties에서 아래 클릭해서 나온 경로를 넣어준다. (static까지의 경로**)
위처럼 경로에서 마지막에 static 빼먹으면 mapper파일이 날아간다.
이제 연결해줬으니 이클립스만 연결해주면 되는데
위의 경로설정때문에 mapper파일 외 다른 파일들도 함께 날아간듯 하다.
필요한 파일들 다시 넣어주고
main.js에서도 포트번호 80으로 수정
> npm run build 실행시키면
스프링부트만 구동해도 vs코드에서 npm run serve를 사용한 것 처럼 구동이 된다.
이제 jar로 만들어서 바로 실행이 가능하도록 해보자.
아래 경로로 이동후
> gradlew build
C:\eGovFrameDev-4.1.0-64bit\workspace\sep19\build\libs
파일 두개 확인하고
위의 0.0.1버전이 아니라
0.0.5 로 버전 변경해보자.
다시 cmd에
> gradlew build
해주면 아래처럼 jar 파일이 생긴다.
cmd에서 build의 libs까지 이동한 후에
> java -jar sep19-0.0.5.jar 실행시키면
이클립스에서 실행하지 않아도 서버 구동이 되면서
localhost 주소로 들어가보면 잘 실행된다.
또 다른 방법은 window - show view - others - gradle Tasks
0.0.6 버전 생성된거 확인할 수 있다.
여기까지의 단계를 개발이 끝났다고 하고
이걸 서버로 보내서 실행이 되는 것까지 확인하면 그 단계가 배포.
다시 원래대로 실행시키고 글쓰기 버튼 부분도 m_name 의 null값 여부에 따라 보이도록 해줬다.
<button v-if="this.userInfo.m_name != null" @click="write">글쓰기</button>
이제 메뉴바도 수정해주자. (로그아웃 만들자) _ ( MenuPage.vue )
<template>
<header>
<nav class="nav">
<ul>
<li><router-link to="/">index</router-link></li>
<li><router-link to="/main">main</router-link></li>
<li><router-link to="/boardList">게시판</router-link></li>
<li class="lir" v-if="this.$store.getters.getUserId == null">
<router-link to="/join">join</router-link>
</li>
<li class="lir" v-if="this.$store.getters.getUserId == null">
<router-link to="/login">login</router-link>
</li>
<li class="lir" v-if="this.$store.getters.getUserId != null">
<router-link to="/logout">logout</router-link>
</li>
<li class="lir" v-if="this.$store.getters.getUserId != null">
<router-link to="/myInfo">myInfo</router-link>
</li>
</ul>
</nav>
</header>
</template>
store에 저장해둔 userId가 null 이라면 (로그아웃상태) => join과 login이 보이게
store에 저장해둔 userId가 null 이 아니라면 (로그인상태) => myInfo와 logout이 보이게
이제 아래쪽에 로그아웃 method 만들어준다.
<script>
export default {
name: "MenuPage",
methods:{
logout(){
if(confirm('로그아웃 하시겠습니까?')){
this.$store.commit("logout"); //로그아웃 작업
this.$router.push("/login"); // 페이지 이동
}
}
}
};
</script>
로그아웃 메뉴 누르면 사용자 정보를 null값으로 처리. (store.js의 logout이 실행된다.)
router-link는 빼버리고 아래처럼 click 기능으로 logout 함수가 실행되도록 넣어준다.
<li @click="logout" class="lir" v-if="this.$store.getters.getUserId != null">logout</li>
로그아웃을 누르면 confirm창이 뜨면서 login페이지로 이동한다.
