http통신 연습(vue)

라이프 사이클 연습 아님

post, get 단순 버튼 사용 식 연습

api는 https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

//App.vue

<script>
import CreatePost from "./components/CreatePost.vue";
import PostList from "./components/PostList.vue";

export default {
  name: "app",
  components: { PostList, CreatePost },
};
</script>

<template>
  <div>
    <post-list />
    <create-post />
  </div>
</template>

 

 

[get]

//PostList.vue

<template>
  <div>
    <button @click="getPosts">Load Posts</button>
    <h1 v-if="errMessage">{{ errMessage }}</h1>
    <div v-for="post in posts" :key="post.id">
      {{ post.id }}
      <p>{{ post.title }}</p>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "post-list",
  data() {
    return {
      posts: [],
      errMessage: "",
    };
  },
  methods: {
    getPosts() {
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((response) => {
          console.log(response.data);
          this.posts = response.data;
        })
        .catch((err) => {
          console.log(err);
          this.errMessage = "error data";
        });
    },
  },
};
</script>

 

 

[post]

//CreatePost.vue

<template>
  <form @submit.prevent="createPost">
    <label for="userId">userId</label>
    <input type="text" id="userId" v-model="formData.userid" />
    <br />
    <label for="title">title</label>
    <input type="text" id="title" v-model="formData.title" />
    <br />
    <label for="formBody">formBody</label>
    <input type="text" id="formBody" v-model="formData.body" />
    <button>create post</button>
  </form>
</template>

<script>
import axios from "axios";
export default {
  name: "create-post",
  data() {
    return {
      formData: {
        userid: "",
        title: "",
        body: "",
      },
    };
  },
  methods: {
    createPost() {
      axios
        .post("https://jsonplaceholder.typicode.com/posts", this.formData)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>