Skip to content
Snippets Groups Projects
Commit f7760eb2 authored by KimDoHyun's avatar KimDoHyun
Browse files

동아리에 따른 페이지 접근 구별 + 동아리 검색 기능

parent b31bf074
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 318 additions and 176 deletions
src/components/Nav.vue
+ 1
− 2
View file @ f7760eb2
<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">
......
src/components/NavClub.vue
+ 17
− 8
View file @ f7760eb2
<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>
......
src/components/clubForm.vue deleted 100644 → 0
+ 0
− 32
View file @ b31bf074
<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
src/components/clubHomePage.vue deleted 100644 → 0
+ 0
− 31
View file @ b31bf074
<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
src/router/index.js
+ 79
− 26
View file @ f7760eb2
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")
}
]
......
src/views/About.vue deleted 100644 → 0
+ 0
− 5
View file @ b31bf074
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Club.vue
+ 87
− 40
View file @ f7760eb2
<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 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(){
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
src/views/Home.vue
+ 1
− 2
View file @ f7760eb2
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<h1>*동아리 관리*</h1>
</div>
</template>
......
src/views/JoinedClub.vue deleted 100644 → 0
+ 0
− 16
View file @ b31bf074
<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
src/views/Login.vue
+ 1
− 3
View file @ f7760eb2
......@@ -20,11 +20,9 @@ export default {
name: 'login',
data() {
return {
id: '',
uid: '',
password: '',
message: '',
data: []
message: ''
}
},
methods: {
......
src/views/Mypage.vue
+ 1
− 11
View file @ f7760eb2
......@@ -23,17 +23,7 @@ export default {
},
computed: {
...mapState(['userInfo'])
},
// created() {
// eventBus.$on('userWasModified',(date) => {
// this.editDate = data
// })
// },
// methods: {
// parents(){
// console.log("부모 받음")
// }
// }
}
}
</script>
......
src/views/ClubPage.vue → src/views/club_Calendar.vue
+ 31
− 0
View file @ f7760eb2
<template>
<div class="clubView">
<NavClub id="navClub">가나다</NavClub>
<h1>클럽 페이지 입니다.</h1>
<h2>{{club[0].name}}의 캘린더를 적어보자</h2>
<div id="clubMain">
<router-view/>
</div>
......@@ -10,18 +10,22 @@
<script>
import NavClub from '@/components/NavClub.vue'
import clubHomePage from '@/components/clubHomePage.vue'
export default {
name: 'clubpage',
name: 'club_calendar',
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
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>
src/views/club_Page.vue 0 → 100644
+ 36
− 0
View file @ f7760eb2
<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>
src/views/club_Post.vue 0 → 100644
+ 32
− 0
View file @ f7760eb2
<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>
src/views/club_Question.vue 0 → 100644
+ 32
− 0
View file @ f7760eb2
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr