diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 1ed8197e5028d0b96d9566e0c9c7be4fa3157241..1dfacdb0088a56e56699d19d61e0a1bb19b2d775 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -1,7 +1,6 @@
<template>
<div class="nav">
<div class="profile">
- <img src="../assets/logo.png" alt="">
<div v-if="isLogin === false">
<h4>Hi</h4>
</div>
@@ -17,7 +16,7 @@
<router-link to='/'>Home</router-link><br>
<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>
+ <router-link to='/club' 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">
diff --git a/src/components/NavClub.vue b/src/components/NavClub.vue
index 72caf54bca551e1395b94f632a69f5d28304c20e..3fd0d960753323869c5b49266261068d738b52d2 100644
--- a/src/components/NavClub.vue
+++ b/src/components/NavClub.vue
@@ -1,19 +1,28 @@
<template>
<div class="navClub">
<div id="clubMenu">
- <router-link to='/clubHomePage'>프롤로그 </router-link> |
- <router-link to='/'>공지사항 </router-link> |
- <router-link to='/'>활동일지 </router-link> |
- <router-link to='/'>자유게시판 </router-link> |
- <router-link to='/'>캘린더 </router-link> |
- <router-link to='/'>자주묻는질문 </router-link> |
- <router-link to='/'>가입신청</router-link> |
+ <router-link :to="{path:`/club_page/${club[0].id}`}">홈페이지</router-link> |
+ <router-link :to="{path:`/club_post/${club[0].id}`}">활동일지 </router-link> |
+ <router-link :to="{path:`/club_calendar/${club[0].id}`}">캘린더 </router-link> |
+ <router-link :to="{path:`/club_question/${club[0].id}`}">자주묻는질문 </router-link> |
+ <router-link :to="{path:`/club_join/${club[0].id}`}">가입신청</router-link> |
</div>
</div>
</template>
<script>
-
+export default {
+ data(){
+ return {
+ club:[]
+ }
+ },
+ async created() {
+ let id = this.$route.params.clubId;
+ const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
+ this.club = res.data.result
+ }
+}
</script>
<style>
diff --git a/src/components/clubForm.vue b/src/components/clubForm.vue
deleted file mode 100644
index 447cc18853cf01b1c6217a4a6ffc56e215635cb7..0000000000000000000000000000000000000000
--- a/src/components/clubForm.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
- <div class="clubForm">
- {{name}} <br>
- {{address}} <br>
- </div>
-</template>
-
-<script>
-export default {
- async created() {
- let id = req.params.id;
- const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
- if(res.data.success == true) {
- this.data = res.data.result[0]
- }
- },
- data() {
- return {
- name: '',
- address: ''
- }
- }
-}
-</script>
-
-<style>
-.clubForm {
- width: 300px;
- height: 200px;
- border: 2px solid black;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/clubHomePage.vue b/src/components/clubHomePage.vue
deleted file mode 100644
index cb3bcf74149a4d7811a6555d28ac7666b3597723..0000000000000000000000000000000000000000
--- a/src/components/clubHomePage.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
- <div class="clubHone">
- 클럽 페이지 메인입니다.
- </div>
-</template>
-
-<script>
-export default {
- async created() {
- let id = req.params.id;
- const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
- if(res.data.success == true) {
- this.data = res.data.result[0]
- }
- },
- data() {
- return {
- name: '',
- address: ''
- }
- }
-}
-</script>
-
-<style>
-.clubForm {
- width: 300px;
- height: 200px;
- border: 2px solid black;
-}
-</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 46bbb363edc7fe5388b055348ad3bc2b82f68809..ab25ef95b0f484c75c6c47b73a844c8ae2afe08c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,38 +1,45 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-import Login from '../views/Login.vue'
-import SignUp from '../views/SignUp.vue'
-import Club from '../views/Club.vue'
-import ClubPage from '../views/ClubPage.vue'
-Vue.use(VueRouter)
+Vue.use(VueRouter)
+const rejectAuthUser = (to, from, next) =>{
+ if(store.state.isLogin === true){
+ //이미 로그인 된 유저니까 막아야한다.
+ alert('이미 로그인을 하였습니다.')
+ next('/') //home으로 간다.
+ } else{
+ next()
+ }
+}
+//로그인을 안한 상태에서 마이페이지 못들어가도록
+const onlyAuthUser = (to, from, next) =>{
+ if(store.state.isLogin === false){
+ //아직 로그인 안된 유저니까 막아야한다.
+ alert('로그인이 필요한 기능입니다.')
+ next('/') //home으로 간다.
+ } else{
+ next()
+ }
+}
const routes = [
{
path: '/',
name: 'home',
- component: Home
- },
- {
- path: '/about',
- name: 'about',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: function () {
- return import(/* webpackChunkName: "about" */ '../views/About.vue')
- }
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/Home.vue")
},
{
path: '/login',
name: 'login',
- component: Login
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/Login.vue")
},
{
path: '/signup',
name: 'signup',
- component: SignUp
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/SignUp.vue")
},
{
path: "/mypage",
@@ -42,13 +49,59 @@ const routes = [
import(/* webpackChunkName: "about" */ "../views/Mypage.vue")
},
{
- path: '/club',
- name: 'club',
- component: Club
- },{
- path: '/clubpage',
- name: 'clubpage',
- component: ClubPage
+ path: "/club",
+ name: "club",
+ // beforeEnter: onlyAuthUser,
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/club.vue")
+ },
+ // {
+ // path: "/club_post",
+ // name: "club_post",
+ // component: () =>
+ // import(/* webpackChunkName: "about" */ "../views/club_Post.vue")
+ // },
+ // {
+ // path: "/club_calendar",
+ // name: "club_calendar",
+ // component: () =>
+ // import(/* webpackChunkName: "about" */ "../views/club_Calendar.vue")
+ // },
+ {
+ path: "/modify_profile",
+ name: "modify_profile",
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/Modify_profile.vue")
+ },
+ {
+ path: "/club_calendar/:clubId",
+ name: "club_calendar",
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/club_Calendar.vue")
+ },
+ {
+ path: "/club_post/:clubId",
+ name: "club_post",
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/club_Post.vue")
+ },
+ {
+ path: "/club_page/:clubId",
+ name: "club_page",
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/club_Page.vue")
+ },
+ // {
+ // path: "/club_page",
+ // name: "club_page",
+ // component: () =>
+ // import(/* webpackChunkName: "about" */ "../views/club_Page.vue")
+ // },
+ {
+ path: "/club_question/:clubId",
+ name: "club_question",
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/club_Question.vue")
}
]
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa28070de24f2055171ca2e20543881cb7fdf1c..0000000000000000000000000000000000000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
- <div class="about">
- <h1>This is an about page</h1>
- </div>
-</template>
diff --git a/src/views/Club.vue b/src/views/Club.vue
index 1649e1db13ffd2f656bcd75389e75f385f929e81..3e49bca6db79b18dfa77a0a52833711e83b41d8d 100644
--- a/src/views/Club.vue
+++ b/src/views/Club.vue
@@ -1,59 +1,106 @@
<template>
- <div class="clubView">
- <h1>Club List</h1>
- <input type="text" id="searchClub" placeholder="Search"> <br>
- <hr>
- <div class="clubList">
- <div class="club" v-for="club in data" :key="club" v-on:click="testClick" >
-
- {{club.name}}<br/>
- 회장: {{club.manager}}<br/>
- {{club.picture}}><br/>
- {{club.detail}}<br/>
-
- </div>
+ <div class="club">
+ <div class ="content">
+ <span><b>Filter · ·</b></span>
+ <br><br>
+ <h4 style="display:inline">그룹:</h4>
+ <input type="checkbox" name="club" value="소학회">소학회
+ <input type="checkbox" name="club" value="동아리">동아리
+ <br><br>
+ <h4 style="display:inline">분야:</h4>
+ <input type="checkbox" name="club" value="운동">운동
+ <input type="checkbox" name="club" value="음악">음악
+ <input type="checkbox" name="club" value="토론">토론
+ <input type="checkbox" name="club" value="영어">영어
+ <br><br>
+
+ <h4 style="display:inline">동아리 검색:</h4>
+ <select v-model="selected">
+ <option value="name">클럽 이름</option>
+ <option value="content">클럽 내용</option>
+ </select>
+ <input type="text" placeholder="검색" v-model="search">
+
+ <hr/>
+ </div>
+ <div class="clublist">
+ <div v-for = "club in searching" class="clubImage">
+ <h3>{{club.name}}({{club.category}})</h3>
+ <p>{{club.detail}}</p>
+ <router-link :to="{path:`/club_page/${club.id}`,params:{clubId:club.id}}">Join in!</router-link>
+ </div>
</div>
</div>
</template>
<script>
-import clubForm from '@/components/clubForm.vue'
+import axios from "axios"
export default {
- name: 'club',
- components: {
- clubForm
- },
- async created() {
- const res = await this.$http.get('http://jnhonlinux.ddns.net:3000/club')
- if(res.data.success == true) {
- this.data = res.data.result
- }
- },
- data() {
+ data(){
return {
- data: [],
- name: '',
-
+ clublist:[],
+ selected:'',
+ search:''
}
},
- methods:{
- testClick(){
- return this.$router.push('/clubpage');
+ computed:{
+ searching(){
+ if(this.selected == 'name' && this.search != ''){
+ return this.clublist.filter((ele)=>{
+ return ele.name.match(this.search)
+ })
+ }
+ if(this.selected == 'content' && this.search != ''){
+ return this.clublist.filter((ele)=>{
+ return ele.detail.match(this.search)
+ })
+ }
+ if(this.search == ''){
+ return this.clublist
+ }
}
+ },
+
+ created(){
+ axios
+ .get('http://jnhonlinux.ddns.net:3000/club')
+ .then(res=>{
+ this.clublist = res.data.result
+ })
+ .catch(err=>{
+ console.log(err)
+ })
+ .then(()=>{
+
+ })
}
}
</script>
-<style>
-.club {
- width: 300px;
- height: 250px;
- border: 2px solid black;
- float: left;
- margin: 20px 10px;
+<style scoped>
+.content input {
+ margin-left: 15px;
}
-#searchClub {
+
+.clublist{
+
+}
+.clublist .clubImage{
+ display:inline-block;
+ width:30%;
+ height: auto;
+ border: 1px solid #000;
+ margin: 20px 5px 10px 20px;
float: left;
- margin-left: 20px;
+}
+/*.clublist .clubImage img{
+ width: 100%;
+ height: 100%;
+}*/
+.clublist .clubImage button{
+ width: 100%;
+}
+select {
+ margin-left: 10px;
}
</style>
\ No newline at end of file
diff --git a/src/views/ClubPage.vue b/src/views/ClubPage.vue
deleted file mode 100644
index ffa255228a59283bfa23c3ddbe0043c37ce99c27..0000000000000000000000000000000000000000
--- a/src/views/ClubPage.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
- <div class="clubView">
- <NavClub id="navClub">가나다</NavClub>
- <h1>클럽 페이지 입니다.</h1>
- <div id="clubMain">
- <router-view/>
- </div>
- </div>
-</template>
-
-<script>
-import NavClub from '@/components/NavClub.vue'
-import clubHomePage from '@/components/clubHomePage.vue'
-
-export default {
- name: 'clubpage',
- components: {
- 'NavClub': NavClub
- },
- async created() {
- const res = await this.$http.get('http://jnhonlinux.ddns.net:3000/club')
- if(res.data.success == true) {
- this.data = res.data.result
- }
- },
-}
-</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fc2e9402a0fbec85a9dd7f273084bfd2196aaa22..ed971694841dedd656d5fc674ee645970cac5943 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,6 @@
<template>
<div class="home">
- <img alt="Vue logo" src="../assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <h1>*동아리 관리*</h1>
</div>
</template>
diff --git a/src/views/JoinedClub.vue b/src/views/JoinedClub.vue
deleted file mode 100644
index 52fc53a8ae170dc90d70456d2e56ba69a75237a1..0000000000000000000000000000000000000000
--- a/src/views/JoinedClub.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
- <div class="joinedClub">
- <NavOfClub></NavOfClub>
- <h1>This is joinedClub Page</h1>
- </div>
-</template>
-
-<script>
-import NavOfClub from '@/components/NavOfClub.vue'
-export default {
- name: 'joinedClub',
- components: {
- NavOfClub
- }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 36d0cf6677ab168c47b5c899ba0322ba0eb71d7c..ed50e76bb2e1d94e17fe7c72f0f99b4b50e5de96 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -20,11 +20,9 @@ export default {
name: 'login',
data() {
return {
- id: '',
uid: '',
password: '',
- message: '',
- data: []
+ message: ''
}
},
methods: {
diff --git a/src/views/Mypage.vue b/src/views/Mypage.vue
index 700f7b361b5442ac96e7678ecf0de48f4d988966..692b7faf2ae31885063bb8d151ba1dc68ca31368 100644
--- a/src/views/Mypage.vue
+++ b/src/views/Mypage.vue
@@ -23,17 +23,7 @@ export default {
},
computed: {
...mapState(['userInfo'])
- },
- // created() {
- // eventBus.$on('userWasModified',(date) => {
- // this.editDate = data
- // })
- // },
- // methods: {
- // parents(){
- // console.log("부모 받음")
- // }
- // }
+ }
}
</script>
diff --git a/src/views/club_Calendar.vue b/src/views/club_Calendar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d74a2c06c5b2ccf867b9e7514d30ad3ed63cc90e
--- /dev/null
+++ b/src/views/club_Calendar.vue
@@ -0,0 +1,31 @@
+<template>
+ <div class="clubView">
+ <NavClub id="navClub">가나다</NavClub>
+ <h2>{{club[0].name}}의 캘린더를 적어보자</h2>
+ <div id="clubMain">
+ <router-view/>
+ </div>
+ </div>
+</template>
+
+<script>
+import NavClub from '@/components/NavClub.vue'
+
+export default {
+ name: 'club_calendar',
+ components: {
+ 'NavClub': NavClub
+ },
+ data(){
+ return {
+ club:{}
+ }
+ },
+ async created() {
+ let id = this.$route.params.clubId;
+ const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
+ console.log(res.data.result)
+ this.club = res.data.result
+ },
+}
+</script>
diff --git a/src/views/club_Page.vue b/src/views/club_Page.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39a818ee25a9946d97ffddb760954f4499bceaf7
--- /dev/null
+++ b/src/views/club_Page.vue
@@ -0,0 +1,36 @@
+<template>
+ <div class="clubView">
+ <NavClub id="navClub">가나다</NavClub>
+ <h1>{{club[0].name}}</h1>
+ {{club[0].logo}}
+ <hr/>
+ 소개
+ <hr/>
+ 공지사항
+ <div id="clubMain">
+ <router-view/>
+ </div>
+ </div>
+</template>
+
+<script>
+import NavClub from '@/components/NavClub.vue'
+
+
+export default {
+ name: 'club_page',
+ components: {
+ 'NavClub': NavClub
+ },
+ data(){
+ return {
+ club:{}
+ }
+ },
+ async created() {
+ let id = this.$route.params.clubId;
+ const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
+ this.club = res.data.result
+ },
+}
+</script>
diff --git a/src/views/club_Post.vue b/src/views/club_Post.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6203226cff709f99261be0539a39f4d743ad2321
--- /dev/null
+++ b/src/views/club_Post.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="clubView">
+ <NavClub id="navClub">가나다</NavClub>
+ <h2>{{club[0].name}}의 활동일지를 적어보자</h2>
+ <div id="clubMain">
+ <router-view/>
+ </div>
+ </div>
+</template>
+
+<script>
+import NavClub from '@/components/NavClub.vue'
+
+
+export default {
+ name: 'club_post',
+ components: {
+ 'NavClub': NavClub
+ },
+ data(){
+ return {
+ club:{}
+ }
+ },
+ async created() {
+ let id = this.$route.params.clubId;
+ const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
+ console.log(res.data.result)
+ this.club = res.data.result
+ },
+}
+</script>
diff --git a/src/views/club_Question.vue b/src/views/club_Question.vue
new file mode 100644
index 0000000000000000000000000000000000000000..517dada486740501509a9f8a7759bfb7ca0f859e
--- /dev/null
+++ b/src/views/club_Question.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="clubView">
+ <NavClub id="navClub">가나다</NavClub>
+ <h2>{{club[0].name}}의 질문들을 적어보자</h2>
+ <div id="clubMain">
+ <router-view/>
+ </div>
+ </div>
+</template>
+
+<script>
+import NavClub from '@/components/NavClub.vue'
+
+
+export default {
+ name: 'club_question',
+ components: {
+ 'NavClub': NavClub
+ },
+ data(){
+ return {
+ club:{}
+ }
+ },
+ async created() {
+ let id = this.$route.params.clubId;
+ const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
+ console.log(res.data.result)
+ this.club = res.data.result
+ },
+}
+</script>