Sl_ 고급예제 (1)

20240404

1. fileDb 메뉴달기/ 화면출력 확인

(1) fileDbList.vue 작성 후
(2) 라우터 -> index.js 에서 메뉴달아주기

2. 데이터바인딩 속성정의
   (1) 전체조회

-FileDbList.vue

// FileDbList.vue // vueInit
<template>
  <!--  여기 -->
  <div>
    <div class="col-md-8">
      <!-- {/* 검색어 start */} -->
      <div class="input-group mb-3">
        <input
          type="text"
          class="form-control"
          placeholder="제목 검색"
          v-model="searchTitle"
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-secondary"
            type="button"
            @click="retrieveFileDb"
          >
            Search
          </button>
        </div>
      </div>
      <!-- {/* 검색어 end */} -->
    </div>

    <div class="col-md-12 mt-3">
      <h4>FileDb List</h4>
      <!-- {/* page start */} -->
      <div class="mb-3">
        1페이지당 개수:
        <select v-model="pageSize" @change="pageSizeChange">
          <option v-for="(data, index) in pageSizes" :key="index" :value="data">
            {{ data }}
          </option>
        </select>
      </div>

      <!-- b-pagination : 부트스트랩 - 페이지 번호 컨트롤 -->
      <!-- total-rows : 전체 데이터 개수 -->
      <!-- per-page : 1페이지 당 개수 -->
      <!-- click : retrieveFileDb(), 페이지 번호 변경 시 실행되는 이벤트 -->
      <b-pagination
        class="col-12 mb-3"
        v-model="page"
        :total-rows="count"
        :per-page="pageSize"
        @click="retrieveFileDb"
      ></b-pagination>
      <!-- {/* page end */} -->

      <!-- {/* 쇼핑카트 이미지 start */} -->
      <div class="row">
        <!-- TODO: v-for 반복문 실행 -->
        <div v-for="(data, index) in fileDb" :key="index" class="col-sm-6">
          <div class="card">
            <!-- 카드 이미지(data.fileUrl) -->
            <img :src="data.fileUrl" class="card-img-top" alt="강의" />
            <!-- 본문 : 제목 + 내용 -->
            <div class="card-body">
              <!-- 제목 -->
              <h5 class="card-title">{{ data.fileTitle }}</h5>
              <!-- 내용 -->
              <p class="card-text">{{ data.fileContent }}</p>
              <router-link :to="'/fileDb/' + data.uuid">
                <span class="badge bg-warning">수정</span>
              </router-link>
              <a
                style="
                   {
                    color: inherit;
                  }
                "
                class="ms-2"
                @click="deleteFileDb(data.uuid)"
              >
                <span class="badge bg-danger">삭제</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- {/* 쇼핑카트 이미지 end */} -->
    </div>
  </div>
</template>
<script>
export default {
  // TODO: 데이터바인딩 속성 정의
  data() {
    return {
      fileDb: [], // spring 전송 파일 배열
      searchTitle: "", // 제목 검색 변수(input 태그)

      // 공통 속성(페이징)
      page: 1, // 현재페이지번호
      count: 0, // 전체데이터개수
      pageSize: 3, // 1페이지당개수(select태그)

      pageSizes: [3, 6, 9], //1페이지당개수 배열(select태그-option)
    };
  },
  //   TODO: 함수 정의
  methods: {
    // TODO: 파일 전체 조회 함수
    retrieveFileDb() {
        // TODO: getAll
    },
    // TODO: 삭제 함수
    deleteFileDb(uuid) {},
    // TODO: 공통함수(페이징)
    // TODO: select 박스 변경시 실행될 함수
    // TODO: select 태그 연결
    pageSizeChange() {
      this.page = 1; // 2) 현재 페이지번호 초기화(1)
      this.retrieveFileDb(); // 3) 재조회 요청
    },
  },
  //   TODO: 화면이 뜰때 자동 실행 함수
  mounted() {
    //   TODO: 화면이 뜰때 전체조회
    this.retrieveFileDb();
  },
};
</script>
<style></style>

3. 전체조회 : getAll()

-FileDbService.js

// FileDbService.js
// 공통 CRUD 함수 : spring 통신
import http from "@/utils/http-common";

class FileDbService {
    // 속성, 생성자, 함수(o)
    // TODO: 전체 조회(select) : get 방식 -> @GetMapping
    getAll(fileTitle, page, size) {
        return http.get(`/advanced/fileDb?fileTitle=${fileTitle}&page=${page}&size=${size}`);
    }
}

export default new FileDbService();

---

▷ 백엔드

-전체조회

-FileController

@Slf4j
@RestController
@RequestMapping("/api/advanced")
public class FileDbController {

    @Autowired
    FileDbService fileDbService; // DI

    //    TODO: 전체 조회 함수
    @GetMapping("/fileDb")
    public ResponseEntity<Object> findAll(
            @RequestParam(defaultValue = "") String fileTitle,
            @RequestParam(defaultValue = "0") int page,
            @RequestParam(defaultValue = "3") int size
    ) {
        try {
//            매개변수(page, size) 페이징 변수에 저장
//             page : 현재페이지번호, size : 1페이지당개수
            Pageable pageable = PageRequest.of(page, size);

//            전체 조회 서비스 함수 실행
            Page<FileDb> pageList
                    = fileDbService.findAllByFileTitleContaining(fileTitle, pageable);

//            vue 로 json 데이터를 전송 : jsp (model == Map(키,값))
            Map<String, Object> response = new HashMap<>();
            response.put("fileDb", pageList.getContent());           // fileDb 배열
            response.put("currentPage", pageList.getNumber());       // 현재페이지 번호(x)
            response.put("totalItems", pageList.getTotalElements()); // 전체데이터개수
            response.put("totalPages", pageList.getTotalPages());    // 전체페이지수(x)

//            TODO: 1) pageList 값이 없으면 : DB 테이블 없음 => NO_CONTENT(203)
//                  2) pageList 값이 있으면 : 성공 => OK(200)
            if (pageList.isEmpty() == true) {
//                1) pageList 값이 없으면 : DB 테이블 없음 => NO_CONTENT(203)
                return new ResponseEntity<>(HttpStatus.NO_CONTENT);
            } else {
                return new ResponseEntity<>(response, HttpStatus.OK);
            }

        } catch (Exception e) {
//            TODO: INTERNAL_SERVER_ERROR(500) : 벡엔드 서버 에러
//               아래 코드는 프론트로(웹브라우저) 신호를(500) 보냄
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

}

-데이터확인

-화면출력

---

---

---

-addFileDb.vue