[078] Spring+Vue: 게시판 프론트엔드 마무리

 

2024.09.02(월)
 
Spring+Vue 5일차

 

해당 내용을 배우면서 나만의 프로젝트도 시작하는게

하나의 목표! 수업 내용에 충실하자

 

 

---

 

Spring + Vue

 

 

프로젝트 준비

• CH01.1 프로젝트 준비-백엔드
• CH01.2 프로젝트 준비-프론트엔드

회원관리

• CH02.1 회원관리-회원가입
• CH02.2 회원관리-로그인,로그아웃
• CH02.3 회원관리-정보 수정
• CH02.4 회원관리-비밀번호 변경

게시판

• CH03.1 게시판-백엔드
• CH03.2 게시판-프론트엔드
• CH03.3 인증 가드
• CH03.4 게시판-페이지네이션

 

---

CH03.2 게시판 - 프론트엔드

 

게시판 - 목록보기

4가지 board 페이지를 통해 목록보기 구성

 

 

 

boardApi.js

• @/api: 인터셉터 적용된 axios
• params: /api/board?page=10&amount=10을 의미
• data: 날짜파트 확인

import api from '@/api';
const BASE_URL = '/api/board';
export default {
async getList(params) {
const { data } = await api.get(BASE_URL, { params });
console.log('BOARD GET LIST: ', data);
return data;
},
}

 

 

BoardListPage.vue

• 방금 제작한 api 호출해줌
• 2가지 Router 작업
  • useRouter: 페이지 이동을 위함
  • useRoute: current route라고 불림 / 현재 있는 라우트가 무엇인지
  • 라우트와 라우터 차이를 잘 알고 있어야함

 

• v-for: computed 기능 수행
• router-link :to

<tr v-for="article in articles" :key="article.no">
          <td>{{ article.no }}</td>
          <td>
            <router-link
              :to="{ name: 'board/detail', params: { no: article.no } }"
            >
              {{ article.title }}
            </router-link>
          </td>

 

• flex
• flex-grow-0: 크게 안 늘리고 고정해주겠다

    <div class="my-5 d-flex">
      <div class="flex-grow-1 text-center">페이지 네이션</div>
      <div>
        <router-link :to="{ name: 'board/create' }" class="btn btn-primary">
          <i class="fa-solid fa-pen-to-square"></i> 글 작성</router-link
        >
      </div>
    </div>

 

 

게시판 - 글 작성

• Multipart Resolver를 Security Filter보다 앞에 설정해야 함.
  • WebConfig.java에 설정한 문자 인코딩 필터 제거
  • Filter[] getServletFilters() 메서드 제거

api/board/js

• append: 게시물을 여러 개 추가하기 위해서 (체크박스, select 등)

api/board/js 왜 append일까?

 

 

 

PageCreatePage.vue

• const files = ref(null): DOM 요소에 접근하고 이를 JavaScript 코드에서 쉽게 제어할 수 있도록 참조(Reference)를 만드는 것
  • ref: Vue의 컴포지션 API에서 제공하는 함수로, 반응형 상태(reactive state)를 만들기 위해
  • ref(null)로 선언: files가 DOM 요소를 참조하기 위해 사용될 것을 의미

 

게시판 -  상세보기, 삭제

상세보기

• 수정, 삭제 버튼은 로그인 사용자와 작성자가 일치하는 경우에만 출력
• 첨부파일에 다운로드 처리

BoardDetailPage.vue

• const no = cr.params.no
• params: {no: no} : cr.params.no를 통해 import함

<script setup>
import { useRoute, useRouter } from 'vue-router';
import api from '@/api/boardApi';
import { ref } from 'vue';
import moment from 'moment';
import { useAuthStore } from '@/stores/auth';
import { downloadFile } from '@/util/download';

const auth = useAuthStore();
const router = useRouter();

const no = cr.params.no;
const article = ref({});

const back = () => {
router.push({ name: 'board/list' });
};

const update = () => {
router.push({ name: 'board/update', params: { no: no } });
};

const remove = async () => {
if (!confirm('삭제할까요?')) return;
await api.delete(no);
router.push({ name: 'board/list'});
};

const load = async () => {
article.value = await api.get(no);
};

load();

 

 

게시판 - 수정

 

BoardUpdatePage.vue

• splice(ix, 1): 실제위치, 삭제개수 순으로 넣기
• query: cr.query: 현재 쿼리를 그대로 넘기겠다

 

 

 

---

 

오늘 기본적인 CRUD 완료!

 

내일은 로그인하면 연결되도록 보안 >

페이지네이션까지!