diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index b717bc84077fef9860c22e13ead446f32a81524c..1ed8197e5028d0b96d9566e0c9c7be4fa3157241 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -2,36 +2,52 @@
<div class="nav">
<div class="profile">
<img src="../assets/logo.png" alt="">
- <p>{{uid}}</p>
- <p>{{name}}</p>
- <p>{{univ}}</p>
- <p>{{major}}</p>
+ <div v-if="isLogin === false">
+ <h4>Hi</h4>
+ </div>
+ <div v-if="isLogin === true">
+ <p>{{userInfo.name}}</p>
+ <p>{{userInfo.univ}}</p>
+ <p>{{userInfo.department}}</p>
+ <p>{{userInfo.sid}}</p>
+ </div>
<hr>
</div>
<div id="menu">
<router-link to='/'>Home</router-link><br>
- <router-link to='/login'>Login</router-link><br>
- <router-link to='/club'>Club</router-link>
- </div>
- <div id="UserInfo">
- <h3>My Info</h3>
- </div>
- <div id="UserClub">
- <h3>Club Info</h3>
+ <router-link to='/login' v-if="isLogin === false">로그인</router-link><br>
+ <router-link to='/mypage' v-if="isLogin == true">마이 페이지</router-link><br><br>
+ <router-link :to="{name:'club', query:{clubs:clubs}}" v-if="isLogin == true">동아리 구경</router-link><br><br>
+
+ <list v-if="isLogin == true">내 동아리</list><br><br><br><br>
+ <!--<div class="dropdown" v-if="isLogin == true"v-for="(club, index) in clubs" :key="index">
+ <button class="dropbtn">{{club.club}}</button>
+ <div class="dropdown-content">
+ <router-link :to="{name:'club_manage', query:{clubId:club.id,clubName:club.club,clubMember:club.member}}" v-if="isLogin == true">동아리 관리</router-link><br>
+ <router-link :to="{path: `/club_post/${club.id}`,params:{clubId:club.id,clubName:club.club}}" v-if="isLogin == true">게시판</router-link><br>
+ <router-link :to="{path: `/club_calendar/${club.id}`}" v-if="isLogin == true">공용 캘린더</router-link>
+ </div>
+ </div>-->
+
+ <div @click="$store.dispatch('logout')">
+ <router-link to='/' v-if="isLogin == true">로그아웃</router-link><br><br>
+ </div>
</div>
</div>
</template>
<script>
+import {mapState} from "vuex"
export default {
name: 'Nav',
data() {
return {
- uid: 'User ID',
- name: 'User Name',
- univ: 'Univ',
- major: 'Major'
+
}
+ },
+ computed:{
+ ...mapState(['isLogin']),
+ ...mapState(['userInfo'])
}
}
</script>
diff --git a/src/router/index.js b/src/router/index.js
index cfd28f39691cb94a2b7774f9fb810b1a8ba979c1..d54b08eebda9df29c039e180bf918e6c4d04ff82 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -33,6 +33,13 @@ const routes = [
name: 'signup',
component: SignUp
},
+ {
+ path: "/mypage",
+ name: "mypage",
+ // beforeEnter: onlyAuthUser,
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/Mypage.vue")
+ },
{
path: '/club',
name: 'club',
diff --git a/src/store/index.js b/src/store/index.js
index 34ce7b5e5f6f101f3a252ca617349173f8e874ed..102c9c154e5eb5c2196aad0c025f719ccb15315a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,29 +1,56 @@
import Vue from 'vue'
import Vuex from 'vuex'
-
+import router from "../router/index"
+import axios from "axios"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
- HOST_API: 'http://jnhonlinux.ddns.net:3000',
- nowUser: {},
- // id: '',
- // uid: '',
- // password: '',
- // email: '',
- // phone: '',
- // univ: '',
- // department: '',
- // sid: '',
- // ifsuper: '',
+ userInfo:null,
+ isLogin: false,
+ isLoginError: false
},
mutations: {
- setUser(state, payload){
- state.nowUser = payload;
+ loginSuccess(state, payload){
+ state.isLogin = true
+ state.isLoginError = false
+ state.userInfo = payload
+ },
+ loginError(state){
+ state.isLogin = false
+ state.isLoginError = true
+ },
+ logout(state){
+ state.isLogin = false
+ state.isLoginError = false
+ state.userInfo = null
}
},
actions: {
+ login({commit}, loginObj){
+ axios
+ .post("http://jnhonlinux.ddns.net:3000/login",loginObj)
+ .then(res=>{
+ if(res.data.success == true){
+ let userInfo = res.data.result[0]
+ commit('loginSuccess', userInfo)
+ alert("로그인이 되었습니다.")
+ router.push('/mypage')
+ }
+ else{
+ alert("로그인에 실패하였습니다.")
+ commit('loginError')
+ }
+ })
+ .catch(err =>{
+ console.log(err)
+ })
+ },
+ logout({commit}){
+ commit('logout')
+ alert("로그아웃 되었습니다.")
+ router.push('/')
+ }
},
- modules: {
- }
+ modules: {}
})
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 353f4f06aae2f8bea9ebf4802d6e5520ab26fd05..36d0cf6677ab168c47b5c899ba0322ba0eb71d7c 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -8,14 +8,14 @@
<input type="password" v-model="password" placeholder="Enter The password...">
</div>
- <button v-on:click="btnLogin">Login</button><br>
- {{data}} <br>
- {{$store.state.nowUser}}
+ <button @click="login({uid: uid, password: password})">Login</button><br>
<router-link to='/signup'><p>If you are not yet a member ...</p></router-link>
</div>
</template>
<script>
+import {mapState, mapActions} from "vuex"
+import axios from "axios"
export default {
name: 'login',
data() {
@@ -24,21 +24,14 @@ export default {
uid: '',
password: '',
message: '',
- data: [],
+ data: []
}
},
methods: {
- async btnLogin() {
- const res = await this.$http.post('http://jnhonlinux.ddns.net:3000/login', {
- 'uid': this.uid,
- 'password': this.password
- });
- if(res.data.success == true) {
- this.data = res.data.result[0]
- this.$store.commit('setUser', data);
- // this.$router.push("/")
- }
- }
+ ...mapActions(['login'])
+ },
+ computed: {
+ ...mapState(["isLigin","isLoginError"])
}
}
</script>
diff --git a/src/views/Modify_profile.vue b/src/views/Modify_profile.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33fe4cead566b5c33de574c48733d365c4c84b25
--- /dev/null
+++ b/src/views/Modify_profile.vue
@@ -0,0 +1,58 @@
+<template>
+ <div class="modify">
+ <div>
+ <!--placeholder로 기본값 설정해야함 / form 형식?-->
+ 이름: <input type="text" name="name" placeholder="김도현" readonly/>
+ <br>
+ 이메일: <input type="email" v-model="user.email" placeholder="kdh5998@ajou.ac.kr" required>
+ <br>
+ 대학교: <input type="text" v-model="user.university" placeholder="아주대학교" required>
+ <br>
+ 전공: <input type="text" v-model="user.major" placeholder="소프트웨어학과" required>
+ <br>
+ 학번: <input type="text" v-model="user.student_num" placeholder="201720726">
+ <br>
+ 전화번호: <input type="text" v-model="user.phone_num" placeholder="01092495992" pattern="(010)-\d{3,4}-\d{4}">
+ <br><br>
+ <!--아직 못함-->
+ <button @click="submit()">제출하기</button>
+ </div>
+ </div>
+</template>
+
+<script>
+import { eventBus } from '../main'
+import {mapState} from "vuex"
+export default {
+ data(){
+ return {
+ email:'',
+ university:'',
+ major:'',
+ student_num:'',
+ phone_num:'',
+ user:{}
+ }
+ },
+ created(){
+ this.user.email = this.email
+ this.user.university = this.university
+ this.user.major = this.major
+ this.user.student_num = this.student_num
+ this.user.phone_num = this.phone_num
+ },
+ computed: {
+ ...mapState(['userInfo'])
+ },
+ methods: {
+ submit(){
+ console.log(this.user)
+ // eventBus.$emit("userWasModified",new Date())
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Mypage.vue b/src/views/Mypage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..700f7b361b5442ac96e7678ecf0de48f4d988966
--- /dev/null
+++ b/src/views/Mypage.vue
@@ -0,0 +1,45 @@
+<template>
+ <div class="mypage">
+ <div>
+ <pre>학교: {{userInfo.univ}}</pre>
+ <pre>학과: {{userInfo.department}}</pre>
+ <pre>학번: {{userInfo.sid}}</pre>
+ <pre>이메일: {{userInfo.email}}</pre>
+ <pre>전화번호: {{userInfo.phone}}</pre>
+ </div>
+ <router-link to="/modify_profile">수정하기</router-link>
+
+ </div>
+</template>
+
+<script>
+import { eventBus } from "../main"
+import {mapState} from "vuex"
+export default {
+ data() {
+ return {
+ editDate: null
+ }
+ },
+ computed: {
+ ...mapState(['userInfo'])
+ },
+ // created() {
+ // eventBus.$on('userWasModified',(date) => {
+ // this.editDate = data
+ // })
+ // },
+ // methods: {
+ // parents(){
+ // console.log("부모 받음")
+ // }
+ // }
+}
+</script>
+
+<style scoped>
+.mypage pre{
+ font-size: 30px;
+ text-align: center;
+}
+</style>
\ No newline at end of file