게시판 기능

src/components/Nav.vue

@@ -18,15 +18,7 @@
             <router-link to='/mypage' 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">
-                <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>-->
+            <li style="list-style:none;" v-if="isLogin == true">내 동아리</li><br><br><br><br>
 
             <div @click="$store.dispatch('logout')">
             <router-link to='/' v-if="isLogin == true">로그아웃</router-link><br><br>

src/components/NavClub.vue

@@ -3,9 +3,11 @@
         <div id="clubMenu">
             <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_free/${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> |
+            <router-link :to="{path:`/club_manage/${club[0].id}`}">회원 관리</router-link> |
+            <router-link :to="{path:`/club_join/${club[0].id}`}">가입신청</router-link>
         </div>
     </div>
 </template>
@@ -14,7 +16,9 @@
 export default {
     data(){
         return {
-            club:[]
+            club:[{
+                id:''
+            }]
         }
     },
     async created() {

src/router/index.js

@@ -55,24 +55,18 @@ const routes = [
     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_page/:clubId",
+    name: "club_page",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/club_Page.vue")
+  },
   {
     path: "/club_calendar/:clubId",
     name: "club_calendar",
@@ -86,23 +80,29 @@ const routes = [
       import(/* webpackChunkName: "about" */ "../views/club_Post.vue")
   },
   {
-    path: "/club_page/:clubId",
-    name: "club_page",
+    path: "/club_free/:clubId",
+    name: "club_free",
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/club_Page.vue")
+      import(/* webpackChunkName: "about" */ "../views/club_Free.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")
-  }
+  },
+  {
+    path: "/club_manage/:clubId",
+    name: "club_manage",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/club_Manage.vue")
+  },
+  {
+    path: "/post/:clubId",
+    name: "post",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/Post.vue")
+  },
 ]
 
 const router = new VueRouter({

src/views/Club.vue

@@ -82,9 +82,6 @@ export default {
     margin-left: 15px;
 }
 
-.clublist{
-    
-}
 .clublist .clubImage{
     display:inline-block;
     width:30%;

src/views/Post.vue

+<template>
+    <div class="posting">
+        <NavClub id="navClub">가나다</NavClub>
+        <div class="board">
+            <h4 style="display:inline">제목:</h4>
+            <input type="text" class="content" v-model="title" required>
+            <h4>내용</h4>
+            <textarea style="resize:none;" cols="60" rows="13" v-model="content" placeholder="게시글을 작성하세요." class="content" required></textarea>
+        </div>  
+        <br>
+        <button @click="post">게시</button>
+    </div>
+</template>
+<script>
+import NavClub from '@/components/NavClub.vue'
+import axios from "axios"
+import {mapState} from "vuex"
+export default {
+    components: {
+        'NavClub': NavClub
+    },
+    data(){
+        return {
+            club:[{
+                id:'',
+            }],
+            title:'',
+            content:'',
+
+        }
+    },
+    methods: {
+        post(){
+            axios.post(`http://jnhonlinux.ddns.net:3000/activityLog`, {
+                title: this.title,
+                contens: this.content,
+                u_id: this.userInfo.id,
+                c_id: this.club[0].id
+            })
+        }  
+    },
+    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
+    },
+    computed:{
+      ...mapState(['userInfo'])
+    }
+}
+</script>
+<style scoped>
+.board {
+    display:inline-block;
+    margin-top: 15px;
+    padding-top: 15px;
+    border: 1px solid #000;
+}
+.content {
+    margin-left: 15px;
+}
+</style>
\ No newline at end of file

src/views/club_Calendar.vue

@@ -2,9 +2,7 @@
     <div class="clubView">
         <NavClub id="navClub">가나다</NavClub>
         <h2>{{club[0].name}}의 캘린더를 적어보자</h2>
-        <div id="clubMain">
-            <router-view/>
-        </div>
+
     </div>
 </template>
 

src/views/club_Free.vue

+<template>
+    <div class="clubView">
+        <NavClub id="navClub"></NavClub>
+        <router-link :to="{path:`/post/${club[0].id}`}">글쓰기</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+import NavClub from '@/components/NavClub.vue'
+import Post from '@/views/Post.vue'
+
+export default {
+  name: 'club_post',
+  components: {
+    'NavClub': NavClub,
+    'Post' : Post
+  },
+  data(){
+      return {
+            club:[{
+                id:'',
+                name:'',
+                univ:'',
+                logo:'',
+                produce:''
+          }]
+      }
+  },
+  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>
+<style scoped>
+#post {
+    margin-top: 30px;
+}
+
+</style>
\ No newline at end of file

src/views/club_Manage.vue

+<template>
+    <div class="manage">
+        <NavClub id="navClub">가나다</NavClub>
+        <h3>{{$route.query.clubName}}</h3>
+        
+        <h3>동아리원 목록</h3>
+        <div class="clubmember">
+            <div v-for="clubmem in club">
+                <h3>이름: {{clubmem.name}}, 학번: {{club.student_num}}, 학과:{{club.major}}</h3>
+            </div>
+        </div>
+        <br><br>
+        <div>
+        </div>
+    </div>
+</template>
+
+<script>
+import NavClub from '@/components/NavClub.vue'
+export default {
+    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>
+
+<style scoped>
+.clubmember {
+    border: solid;
+    height: 300px;
+    overflow: scroll;
+}
+</style>
\ No newline at end of file

src/views/club_Page.vue

@@ -4,11 +4,13 @@
         <h1>{{club[0].name}}</h1>
         {{club[0].logo}}
         <hr/>
-        소개
+        <div>
+        <h1>소개</h1>
+            {{club[0].produce}}
+        </div>
         <hr/>
-        공지사항
-        <div id="clubMain">
-            <router-view/>
+        <div>
+            <h1>공지사항</h1>
         </div>
     </div>
 </template>
@@ -24,7 +26,13 @@ export default {
   },
   data(){
       return {
-          club:{}
+          club:[{
+              id:'',
+              name:'',
+              univ:'',
+              logo:'',
+              produce:''
+          }]
       }
   },
   async created() {

src/views/club_Post.vue

 <template>
     <div class="clubView">
-        <NavClub id="navClub">가나다</NavClub>
-        <h2>{{club[0].name}}의 활동일지를 적어보자</h2>
-        <div id="clubMain">
-            <router-view/>
+        <NavClub id="navClub"></NavClub>
+        <router-link :to="{path:`/post/${club[0].id}`}">글쓰기</router-link>
         </div>
     </div>
 </template>
 
 <script>
 import NavClub from '@/components/NavClub.vue'
-
+import Post from '@/views/Post.vue'
 
 export default {
   name: 'club_post',
   components: {
-    'NavClub': NavClub
+    'NavClub': NavClub,
+    'Post' : Post
   },
   data(){
       return {
-          club:{}
+            club:[{
+                id:'',
+                name:'',
+                univ:'',
+                logo:'',
+                produce:''
+          }]
       }
   },
   async created() {
@@ -27,6 +32,12 @@ export default {
         const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
             console.log(res.data.result)
             this.club = res.data.result
-    },
+    }
 }
 </script>
+<style scoped>
+#post {
+    margin-top: 30px;
+}
+
+</style>
\ No newline at end of file