8. vue 화면 생성 하기 (with axios)

이전 7 까지의 test는 모두 UI 가 존재 하지 않아서 Postman을 통해 

 

UI 에서 RESTFul을 발송한 것처럼 처리 했다.

 

이제 Postman 대신 실제 vue 로 만든 UI 를 사용할 것이다.

해당 UI 는 단순 버튼 하나만 존재하고 버튼을 누를시 

http://localhost:9090/api/user/all 로 server 에 요청을 하고

요청한 결과를 화면에 뿌릴 것이다.

---

1. vue 로 project 를 만든다. 

(node 는 설치가 됐다는 가정이다. node가 설치 안되어 있을 경우 아래 명령어가 실행 안 된다.)

vue create vue-axios-example

 

실제 위 명령으를 실행 하면 아래처럼 고르라는 항목이 나온다. 

선택 되어 있는걸 그대로 쓰면 된다. 

(실제 화면 켭처와는 틀리게 d:\private\study 에서 vue create vue-axios-example 을 수행함.)

 

아래 처럼 먼가 설치를 막 하고 다 설치가 되면 아래처럼 나온다.

 

---

2. axios 를 위해 library 를 설치 한다.

    설치를 위해 project 가 생성된 directory 로 이동 한다.

    그리고 아래 명령어를 수행 한다.

npm install axios

 

 

---

3. axios 가 잘 설치 되었는지 확인 해 본다.

---

 

4. "나만의 프로젝트 만들기" 에서 먼저 backend 를 만들었고 backend 는 8080 port 로 구동 하기 때문에

     frontend는 "9090"으로 떠야 port 출동이 없다.

    "9090" 으로 구동하기 위해서는 아래 설정이 필요 하다.
    프로젝트 root 디렉토리에 vue.config.js 파일을 아래 처럼 수정한다( 파일이 없을시 생성하면 된다.)

module.exports = {
  devServer: {
    port: 9090, // 원하는 포트 번호
  },
};

     

나 같은 경우 빈 파일이 아니고 이미 내용이 들어가 있어서 port 정보만 더 추가 했다.

---

5. frontend 구동일 시킨다.

    9090으로 뜬건지 확인 한다.

 npm run serve

구동 확인

---

6.  webstorm 에서 app.vue 를 아래 처럼 바꾼다.

<template>
  <div id="app">
    <h1>Axios 통신 예제</h1>
    <button @click="fetchUsers">사용자 목록 가져오기</button>
    <ul v-if="users.length">
      <li v-for="(user, index) in users" :key="index">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else>데이터가 없습니다.</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [], // 사용자 데이터 저장
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get("http://localhost:8080/api/user/all");
        this.users = response.data; // API 응답 데이터를 users 배열에 저장
      } catch (error) {
        console.error("Error fetching users:", error);
        alert("데이터를 가져오는 중 오류가 발생했습니다.");
      }
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 40px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 5px 0;
  font-size: 18px;
}
</style>

---

7. 브라우저에서 아래 처럼 화면이 refresh 된다.

---

 

오늘도 읽어 주셔서 감사합니다.