[Vue] 게시판 만들기(3)[sort/bootstrap/map/filter]

✅ sort 메서드로 게시판 목록 내림차순으로 만들기

• 게시판 목록은 내림차순으로 정렬되어야하기 때문에 sort 메서드로 새로 업데이트 되는 목록들이 위쪽으로 차곡차곡 쌓이도록 설정해준다.

<template>
  <div>
    <h1>게시판</h1>
    <b-table striped hover :items="sortedData" :fields="fields"></b-table>
  </div>
</template>

<script>
import data from '@/data'
  export default {
    name:"Board",
    data() {
      return {
        fields:[
            {
                key:'content_id',
                label:'글번호'
            },
            {
                key:'title',
                label:'제목'
            },
            {
                key:'created_at',
                label:'작성일'
            },
        ],
      }
    },
    computed:{
        sortedData(){
            return data.Content.sort((a,b) => {return b.content_id - a.content_id});
        }
    }
  }
</script>

sort 메서드 - 배열 내림차순, 오름차순 정렬

• 기본 사용 방법

// 문자 정렬
var fruites = ['orange', 'apple', 'banana'];

fruites.sort(); //(3) ['apple', 'banana', 'orange']

//숫자 정렬
var score = [4,1,6,8,3];

//오름차순
score.sort(function(a,b){
	return a-b;//[1,3,4,6,8]
}) 

//내림차순
score.sort(function(a,b){
	return b-a;//[8,6,4,3,1]
})

• 응용 포인트
  배열 안 요소 중에서 특정 프로퍼티 키의 index로 배열 재정렬을 하고 싶다면??

0: {content_id: 3, user_id: 2, title: 'css library 뭐가 제일 좋나요?', context: 'ㅈㄱㄴ', created_at: '2019-03-29 13:11:42', …}
1: {content_id: 2, user_id: 3, title: 'react 공부하고싶어요', context: 'react 궁금해요오오', created_at: '2019-01-02 13:11:42', …}
2: {content_id: 1, user_id: 1, title: '안녕하세요', context: '하하하하핳', created_at: '2019-01-01 13:11:42', …}

위는 data의 배열 요소들이며 content_id의 index로 배열을 재정렬하고 싶다면 아래와 같이 원하는 프로퍼티 키로 반환해주면 된다.

data.sort(function(a,b){
	return b.content_id - a.content_id;
})

✅✅ 데이터베이스에서 게시물 아이디와 일치하는 user의 name 데이터 들고오기

<template>
  <div>
    <h1>게시판</h1>
    <b-table striped hover :items="getData" :fields="fields" @row-clicked="rowClick"></b-table>
    <b-button @click="create">작성하기</b-button>
  </div>
</template>

<script>
import data from '@/data';

  export default {
    name:"Board",
    data() {
      return {
        fields:[
            {
                key:'content_id',
                label:'글번호'
            },
            {
                key:'title',
                label:'제목'
            },
            {
                key:'created_at',
                label:'작성일'
            },
            {
                key:'user_name',
                label:'글쓴이'
            },
        ],
      }
    },
    computed:{
        getData(){
            let items = data.Content.sort((a,b)=>{return b.content_id - a.content_id})
            items = items.map(contentItem => {
              return {...contentItem, user_name:data.User.filter(userItem => userItem.user_id === contentItem.user_id)[0].name}
            })
            return items;
        }
    },
    methods:{
        rowClick(item, index, e){
            this.$router.push({
              name:'Detail',
              params:{contentId : item.content_id}
            })
        },
        create(){
          this.$router.push({
            name:"Create"
          })
        }
    }

  }
</script>

• map과 filter를 자유자재로 사용할 줄 알아야 원하는 데이터를 들고오기 쉬울거 같다는 생각이 든다. 다시 췍
  
  

✅ bootstrap table에서 클릭한 row 데이터 추출

• <b-table>태그로 테이블이 생성되기 때문에 각 row에 대한 click 이벤트를 어디에 줘야할지 난감했다. 해결 방법은 @row-clicked, 각 row에 대한 데이터와 Index, event까지 자동으로 가져와준다.
• 부트스트랩 없이 해당 index를 들고올 때는 테이블의 데이터를 반복문으로 뽑아줬기 때문에 클릭했을 때 반복문의 index를 클릭 이벤트의 인수로 들고와 params의 파라미터로 보내줬었다.
• bootstrap 은 자동으로 이 클릭한 row데이터를 들고와 간편하다.

row-clicked 이벤트

인자

• item : 클릭한 row 데이터
• index : 클릭한 row index
• event : event

<template>
  <div>
    <h1>게시판</h1>
    <b-table striped hover :items="getData" :fields="fields" @row-clicked="rowClick"></b-table>
  </div>
</template>

<script>
import data from '@/data';

  export default {
    name:"Board",
    data() {
      return {
        fields:[
            {
                key:'content_id',
                label:'글번호'
            },
            {
                key:'title',
                label:'제목'
            },
            {
                key:'created_at',
                label:'작성일'
            },
            {
                key:'user_name',
                label:'글쓴이'
            },
        ],
      }
    },
    computed:{
        getData(){
            let items = data.Content.sort((a,b)=>{return b.content_id - a.content_id})
            items = items.map(contentItem => {return {...contentItem, user_name:data.User.filter(userItem => userItem.user_id === contentItem.user_id)[0].name}})
            return items;
        }
    },
    methods:{
        rowClick(item, index, e){
            this.$router.push({
              name:'Detail',
              params:{contentId : item.content_id}
            })
        }
    }

  }
</script>

✅ 부트스트랩 상세페이지 구현

• 클릭한 게시글의 contentId를 라우터 파라미터로 보내 해당 게시글의 정보를 불러온다.

<template>
  <div>
    <b-card>
      <div class="content-detail-content-info">
        <div class="content-detail-content-info-left">
          <div class="content-detail-content-info-left-number">
            {{contentId}}
          </div>
          <div class="content-detail-content-info-left-subject">
            {{title}}
          </div>
        </div>
        <div class="content-detail-content-info-right">
          <div class="content-detail-content-info-right-user">
            글쓴이: {{user}}
          </div>
          <div class="content-detail-content-info-right-created">
            등록일: {{created}}
          </div>
        </div>
      </div>
      <div class="content-detail-content">
        {{context}}
      </div>
      <div class="content-detail-button">
        <!-- <b-button variant="primary" @click="updateData">수정</b-button> -->
        <b-button variant="success" @click="deleteData">삭제</b-button>
      </div>
      <div class="content-detail-comment">
        덧글
      </div>
    </b-card>
  </div>
</template>

<script>
import data from "@/data";

export default {
  name: "ContentDetail",
  data() {
    //[1] 해당 라우터의 파라미터에서 contentId를 추출.
    const contentId = Number(this.$route.params.contentId);
    //[2] 데이터베이스에서 해당 contentId와 일치하는 데이터를 filter 메서드를 통해 들고온다. filter로 데이터를 들고오면 array 형태기 때문에 첫번째 뎁스까지 들어가줘야한다.
    const contentData = data.Content.filter(item => item.content_id === contentId)[0]
    return {
      contentId: contentId,
      title: contentData.title,
      context: contentData.context,
      user: data.User.filter(item => item.user_id === contentData.user_id)[0]
        .name,
      created: contentData.created_at
    };
  },
};
</script>

✅ 게시판 목록 삭제하기(findIndex/splice)

• 데이터베이스에서 해당 contentId를 포함하는 리스트의 index를 알아내야한다.
• 이때 findIndex 메서드가 유용 !

     deleteData(){
          const deleteDataId = data.Content.findIndex(item => item.content_id === this.contentId);
          data.Content.splice(deleteDataId,1);
          this.$router.push({
              path:"/board/free"
          })

      }

✅ 게시판 글쓰기

• 양방향 데이터 바인딩 v-model로 사용자 입력값 들고오기(짱편함)
• 글번호 -> contentsId를 내림차순으로 세웠을 때 가장 큰 값에 + 1
• 작성일 -> Date 생성자 함수에서 년,월,일,시간,분,초를 가져와 입력.

<template>
    <div>
        <b-input v-model="subject" placeholder="제목을 입력해 주세요"></b-input>
        <b-textarea
            v-model="context"
            placeholder="내용을 입력해 주세요"
            rows="3"
            max-rows="6"
        ></b-textarea>
        <b-button @click="uploadContent">저장</b-button>
        <b-button @click="cancle">취소</b-button>
    </div>
</template>
<script>
import data from "@/data"

export default {
    name:"Create",
    data(){
        const contentId = this.$route.params.contentId;
        const contentData = data.Content.filter(item => item.content_Id === contentId);
        return{
            contentId:contentId,
            contentData:contentData,
            subject: '',
            context:'',
            userId:1,
            created_at:'2022-11-22 11:33:22',
            updated_at :null
        }
    },
    methods:{
        cancle(){
            this.$router.push({
                name:'Board'
            })
        },
        uploadContent(){
            let items = data.Content.sort((a,b) => {return b.content_id - a.content_id});
            const content_id = items[0].content_id +1;

            data.Content.push(
                {
                    content_id: content_id,
                    user_id: this.userId,
                    title: this.subject,
                    context: this.context,
                    created_at: this.getCreatedAt(),
                    updated_at: null,
                }
            )
            this.$router.push({
                name:'Board'
            })
        },
        getCreatedAt(){
            const today = new Date();
            const year = today.getFullYear();
            const month = today.getMonth() + 1;
            const date = today.getDate();
            const hour = today.getHours();
            const minute = today.getMinutes();
            const second = today.getSeconds();

            return `${year}-${month}-${date} ${hour}:${minute}:${second}`
        }
    },
}
</script>

Reference

https://dudmy.net/javascript/2015/11/16/javascript-sort/
https://www.youtube.com/watch?v=sUFlKau4ELk&list=PLyjjOwsFAe8ITIDUNsU_x4XNbPJeOvs-b&index=7