마이페이지에 DB값 불러와서 출력하기

마이페이지 심리검사 결과

문제는 Vue.js 코드에서 axios 요청을 보낼 때, 반환되는 데이터 형식과 Vue.js 코드에서 사용하는 데이터 형식이 일치하지 않기 때문입니다. 백엔드에서 반환되는 데이터는 TestResult 객체 하나이지만, Vue.js 코드에서는 testResult를 배열로 처리하고 있습니다.

 

정말 자주 겪었던 데이터 형식 문제.

 

<template>
  <div>
    <MySidebar />
    <div v-if="testResult">
      <h2>테스트 결과</h2>
      <ul>
        <li>
          <p>테스트 번호: {{ testResult.tno }}</p>
          <p>SID: {{ testResult.sid }}</p>
          <p>QID: {{ testResult.qid }}</p>
          <p>답변: {{ testResult.tanswer }}</p>
          <p>총 점수: {{ testResult.totalScore }}</p>
          <p>회원 ID: {{ testResult.memberId }}</p>
          <p>날짜: {{ formatDate(testResult.tdate) }}</p>
        </li>
      </ul>
    </div>
    <div v-else>
      <p>테스트 결과를 불러오는 중...</p>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import MySidebar from '@/components/MySidebar.vue';
import { useStore } from 'vuex';

export default {
  name: 'MySimri',
  components: {
    MySidebar,
  },

  setup() {
    const testResult = ref([]);

    const loadTestResult = () => {
      axios.get('http://localhost:3000/api/mysimri', { withCredentials: true })
        .then(response => {
          testResult.value = response.data;
        })
        .catch(error => {
          console.error('Error fetching test result:', error);
        });
    };

    const formatDate = (dateString) => {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
      return new Date(dateString).toLocaleDateString('en-US', options);
    };

    const store = useStore();

    onMounted(() => {
      loadTestResult();
    });

    return {
      testResult,
      formatDate,
      store,
    };
  },
};
</script>


<style scoped>
.container-fluid {
  padding-top: 56px; /* Adjust based on the height of HeaderMenu */
}
.result-container {
  margin-top: 20px;
}
.action-buttons {
  margin-top: 20px;
}
</style>

@RestController
public class MySimriController {

    @Autowired
    private TestResultRepository testResultRepository;

    @Autowired
    private JwtService jwtService;

    @GetMapping("/api/mysimri")
    public ResponseEntity<TestResult> getTestResultsForQid(
            @CookieValue(value = "token", required = false) String token ) {

        System.out.println("심리결과 토큰 확인: " + token);

        if (!jwtService.isValid(token)) {
            System.out.println("유효한가요?");
            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED);
        }

        int memberId = jwtService.getId(token);
        List<TestResult> testResults = testResultRepository.findByMemberIdAndQidOrderByTdateDesc(memberId, 10);

        System.out.println("list 출력"+testResults);

        // 조회된 TestResult가 없을 경우
        if (testResults.isEmpty()) {
            System.out.println("조회된 TestResult가 없음");
            return ResponseEntity.notFound().build();
        }

        // 여기서는 가장 최근의 TestResult를 반환하도록 함
        TestResult latestTestResult = testResults.get(0);
        return ResponseEntity.ok(latestTestResult);
    }
}

public interface TestResultRepository extends JpaRepository<TestResult, Integer> {

    void save(List<TestResult> testResults);
    List<TestResult> findByMemberId(int memberId);

    //  qid가 10인 최근의 테스트 결과를 반환하는 메서드
    //List<TestResult> findByMemberIdAndQidOrderByTdateDesc();
    List<TestResult> findByMemberIdAndQidOrderByTdateDesc(int memberId, int qid);
}

 

확인

마이페이지에서 불러와진다.