From f7760eb2406453a761023e0c30bf20166cc0cf6f Mon Sep 17 00:00:00 2001
From: KimDoHyun <kdh5998@naver.com>
Date: Wed, 4 Dec 2019 01:49:34 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8F=99=EC=95=84=EB=A6=AC=EC=97=90=20?=
=?UTF-8?q?=EB=94=B0=EB=A5=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=91?=
=?UTF-8?q?=EA=B7=BC=20=EA=B5=AC=EB=B3=84=20+=20=EB=8F=99=EC=95=84?=
=?UTF-8?q?=EB=A6=AC=20=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Nav.vue | 3 +-
src/components/NavClub.vue | 25 +++++--
src/components/clubForm.vue | 32 --------
src/components/clubHomePage.vue | 31 --------
src/router/index.js | 105 +++++++++++++++++++-------
src/views/About.vue | 5 --
src/views/Club.vue | 127 ++++++++++++++++++++++----------
src/views/ClubPage.vue | 27 -------
src/views/Home.vue | 3 +-
src/views/JoinedClub.vue | 16 ----
src/views/Login.vue | 4 +-
src/views/Mypage.vue | 12 +--
src/views/club_Calendar.vue | 31 ++++++++
src/views/club_Page.vue | 36 +++++++++
src/views/club_Post.vue | 32 ++++++++
src/views/club_Question.vue | 32 ++++++++
16 files changed, 318 insertions(+), 203 deletions(-)
delete mode 100644 src/components/clubForm.vue
delete mode 100644 src/components/clubHomePage.vue
delete mode 100644 src/views/About.vue
delete mode 100644 src/views/ClubPage.vue
delete mode 100644 src/views/JoinedClub.vue
create mode 100644 src/views/club_Calendar.vue
create mode 100644 src/views/club_Page.vue
create mode 100644 src/views/club_Post.vue
create mode 100644 src/views/club_Question.vue
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 1ed8197..1dfacdb 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 72caf54..3fd0d96 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 447cc18..0000000
--- 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 cb3bcf7..0000000
--- 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 46bbb36..ab25ef9 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 3fa2807..0000000
--- 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 1649e1d..3e49bca 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 ffa2552..0000000
--- 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 fc2e940..ed97169 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 52fc53a..0000000
--- 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 36d0cf6..ed50e76 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 700f7b3..692b7fa 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 0000000..d74a2c0
--- /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 0000000..39a818e
--- /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 0000000..6203226
--- /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 0000000..517dada
--- /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>
--
GitLab