blog19 : 글 리스트 화면 만들기

홈 화면에 리스트 보이기

1. 테스트

<!--HomeView.vue-->
<script setup lang="ts">
const posts = [
  {id: 1, title: "제목1", content: "내용1"},
  {id: 2, title: "제목2", content: "내용2"},
  {id: 3, title: "제목3", content: "내용3"},
  {id: 4, title: "제목4", content: "내용4"},
]

</script>

<template>
  <ul>
    <!-- 반복문 사용 vue2.2.0이상부터는 v-for에 key 사용 필수-->
    <li v-for="post in posts" :key="post.id">
      <div>
        {{post.title}}
      </div>

      <div>
        {{post.content}}
      </div>
    </li>
  </ul>
</template>

<style scoped>
li {
  margin-bottom: 1rem;
}

li:last-child{
  margin-bottom: 0;
}
</style>

 

 

 

 

2. 서버를 통해 DB의 값 가져오기

 

axios를 사용한다.

<!--HomeView.vue-->
<script setup lang="ts">
import axios from "axios";
import {ref} from "vue";

// const posts = [] 반응형 데이터가 아니면 안나옴
const posts = ref([])

//페이지, 사이즈도 넘겨야 함
axios.get("/api/posts?page=1&size=5").then((response) => {
  // console.log(response)
  response.data.forEach((r : any) => {
    // posts.push(r) 반응형 데이터는 value로 접근해야 함
    posts.value.push(r)
  });
});


</script>

<template>
  <ul>
    <!-- 반복문 사용 vue2.2.0이상부터는 v-for에 key 사용 필수-->
    <li v-for="post in posts" :key="post.id">
      <div>
        {{post.title}}
      </div>

      <div>
        {{post.content}}
      </div>
    </li>
  </ul>
</template>

<style scoped>
li {
  margin-bottom: 1rem;
}

li:last-child{
  margin-bottom: 0;
}
</style>

 

 

3. 글 작성 후 홈화면으로 이동하도록 수정&&홈화면으로 이동한 뒤 뒤로가기 못하게 수정

router 사용

<!-- WriteView.vue -->
<script setup lang="ts">
import {ref} from "vue"; //ref를 사용하기 위해 import

// const axios = require('axios').default; 오류발생 :CommonJS형태가 아니기 때문.
import axios from 'axios'
import {useRouter} from "vue-router"; //###Router 추가
// 따라서 이렇게 import

const title = ref("") //입력받은 값을 저장할 변수 선언
const content = ref("") //입력받은 값을 저장할 변수 선언

//###Router 추가
const router = useRouter();

//WriteView.vue
const write = function() {
  // axios.post("http://localhost:8080/posts",
  // axios.post("/posts", //전체 도메인이 아니라 path에 대한 것만 적어야 vite.config.ts에서 프록시 처리 가능.
  // axios.post("/api/posts", //앞에 /api만 붙여주면 개별 api에 대한 처리를 vite.config.ts에서 해줄 필요 없다.
  //     //RequestBody
  //     {
  //       title: title.value,
  //       content: content.value
  //     });

  axios.post("/api/posts",
      //RequestBody
      {
        title: title.value,
        content: content.value
      })
      .then(() => { //###Router 사용: 글 작성완료하면 홈으로 이동
        // router.push({name: "home"}); //라우터 index.ts에 적힌 이름.
        //그런데 push로 하면 뒤로 돌아갔을 때 작성화면으로 돌아감.
        //이를 방지하고 싶어서 push대신 replace 사용
        router.replace({name: "home"}); //라우터 index.ts에 적힌 이름.
      });
}

</script>

<template>
  <div class="mt-2">
<!--    선언한 title, content 변수를 아래 v-model 태그에 넣는다.-->
    <el-input v-model="title" placeholder="제목을 입력해 주세요"/>
  </div>

  <div class="mt-2">
     <el-input v-model="content" type="textarea" rows="15"></el-input>
  </div>

  <div class="mt-2">
    <el-button type="primary" @click="write()">글 작성 완료</el-button> <!--눌렀을 때 write() 함수 호출 -->
  </div>

</template>

<style>
</style>

 

뒤로 가기를 한 번 눌렀을 때는 돌아가지 않는다. 두 번 이상 누르니까 돌아간다.