JSON 서버를 사용하여 Vue 프로젝트에서 모의 ​​데이터 구현

Vue 프로젝트 개발에 있어서 모의 데이터는 필수적인 부분입니다. 모의 데이터는 서버에서 반환되는 데이터를 시뮬레이션할 수 있으므로 개발 초기 단계나 서버가 없을 때 개발 프로세스를 중단하지 않고 빠른 반복을 달성할 수 있습니다. 이 기사에서는 JSON 서버를 사용하여 Vue 프로젝트에서 모의 ​​데이터를 구현하는 방법을 소개합니다.

1. JSON 서버 소개

JSON 서버는 RESTful API를 빠르게 구축하는 데 사용되는 도구입니다. 이 도구는 JSON 파일을 기반으로 API를 자동으로 생성할 수 있습니다. JSON Server 설치는 비교적 간단합니다. 아래와 같이 npm을 사용하여 설치할 수 있습니다.

npm install -g json-server

설치가 완료된 후 프로젝트 루트 디렉터리에 db.json 파일을 만들고 해당 파일에 우리가 원하는 내용을 쓸 수 있습니다. 데이터를 시뮬레이션해야 합니다. db.json 파일의 형식은 다음과 같습니다.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "Vue.js", "author": "Evan You" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 },
    { "id": 2, "body": "some other comment", "postId": 2 }
  ]
}

이 예에서는 POST 및 GET 요청에 사용할 수 있는 게시물과 댓글의 두 개체를 정의했습니다.

2. Vue 프로젝트에서 JSON 서버 사용

Vue 프로젝트에서 JSON 서버를 사용하는 것은 매우 간단합니다. package.json에 json-server를 시작하는 스크립트를 추가할 수 있습니다. 아래와 같이

"scripts": {
  "json-server": "json-server --watch db.json"
},

그런 다음 터미널에서 다음 명령을 사용하여 json-server를 시작합니다.

npm run json-server

http://localhost:3000/posts를 방문하면 모의 데이터를 얻을 수 있습니다.

3. Vue 프로젝트에서 API 사용

Axios 라이브러리를 통해 JSON 서버에서 제공하는 API 요청을 시작할 수 있습니다. 아래와 같이 프로젝트에 Axios 라이브러리를 설치해야 합니다.

npm install axios --save

Axios를 사용하여 요청을 보내는 코드 예제는 다음과 같습니다.

import axios from 'axios';

const BASE_URL = 'http://localhost:3000/';

axios.defaults.baseURL = BASE_URL;

export function getPosts() {
  return axios.get('posts').then((res) => {
    return res.data;
  });
}

export function getPostById(id) {
  return axios.get(`posts/${id}`).then((res) => {
    return res.data;
  });
}

export function addPost(post) {
  return axios.post('posts', post).then((res) => {
    return res.data;
  });
}

export function updatePost(id, post) {
  return axios.put(`posts/${id}`, post).then((res) => {
    return res.data;
  });
}

export function deletePost(id) {
  return axios.delete(`posts/${id}`).then((res) => {
    return res.data;
  });
}

이 예제에서는 모든 기사 가져오기 및 가져오기를 포함하여 많은 API 기능을 노출합니다. 단일 기사 기사 가져오기, 기사 작성, 기사 업데이트, 기사 삭제 등 필요에 따라 이러한 API를 정의할 수 있습니다.

Vue 구성 요소에서 이러한 API를 사용하기 위한 코드 예제는 다음과 같습니다.

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

<script>
import { getPosts } from '@/api';

export default {
  data() {
    return {
      posts: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getPosts().then((data) => {
        this.posts = data;
      });
    },
  },
};
</script>

이 예제에서는 구성 요소가 생성될 때 트리거되는 생성된 메서드에 모든 기사를 가져오기 위한 API를 바인딩합니다. 메소드에서 API를 호출하여 데이터를 얻은 다음, 마지막으로 해당 데이터를 구성 요소의 템플릿에서 렌더링할 수 있도록 Posts 속성에 바인딩합니다.

지금까지 우리는 JSON Server를 사용하여 Vue 프로젝트에서 Mock 데이터를 구현하고 Axios를 사용하여 JSON Server에서 제공하는 API 요청을 보내는 데 성공했습니다. 이를 통해 프로젝트를 독립적으로 개발하고 테스트할 수 있어 개발 효율성이 더욱 높아집니다.

위 내용은 JSON 서버를 사용하여 Vue 프로젝트에서 모의 ​​데이터 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!