초보자에게 필수: Vue 및 Axios를 사용하여 프런트엔드 및 백엔드 대화형 프로젝트를 구축하는 방법-View.js-php.cn

초보자에게 필수: Vue 및 Axios를 사용하여 프런트엔드 및 백엔드 대화형 프로젝트를 구축하는 방법

PHPz

풀어 주다： 2023-07-17 08:54:07

원래의

1236명이 탐색했습니다.

초보자를 위한 필수 사항: Vue 및 Axios를 사용하여 프런트엔드 및 백엔드 대화형 프로젝트를 구축하는 방법

소개:
현대 웹 개발에서는 프런트엔드와 백엔드 분리 아키텍처가 주류가 되었습니다. 프런트엔드와 백엔드 상호 작용을 달성하려면 HTTP 요청을 보내고 처리하는 몇 가지 도구를 사용해야 합니다. Vue.js는 널리 사용되는 프런트엔드 프레임워크이고 Axios는 Promise 기반 HTTP 라이브러리입니다. 이들의 조합을 통해 프런트엔드와 백엔드 상호 작용을 쉽게 실현할 수 있습니다. 이 기사에서는 초보자에게 Vue 및 Axios를 사용하여 프런트엔드 및 백엔드 대화형 프로젝트를 구축하는 방법을 소개합니다.

1단계: Vue 프로젝트 만들기
먼저 Vue CLI(스캐폴딩 도구)를 설치하여 새 Vue 프로젝트를 만들어야 합니다. 터미널을 열고 다음 명령을 실행합니다.

npm install -g @vue/cli

로그인 후 복사

설치가 완료된 후 다음 명령을 사용하여 새 Vue 프로젝트를 만듭니다.

vue create my-project

로그인 후 복사

다음으로 프로젝트 디렉터리로 이동하여 개발 서버를 시작합니다.

cd my-project
npm run serve

로그인 후 복사

http 열기: // 브라우저 /localhost:8080에서 기본 Vue 페이지를 볼 수 있어야 합니다.

2단계: Axios 설치 및 구성
Vue 프로젝트에서 Axios를 사용하려면 먼저 Axios를 설치해야 합니다. 터미널에서 다음 명령을 실행합니다.

npm install axios

로그인 후 복사

설치가 완료된 후 main.js 파일에서 Axios를 가져옵니다.

import axios from 'axios'

로그인 후 복사

이제 Axios에 대한 기본 전역 요청 URL을 구성해야 합니다. main.js 파일의 import 문 뒤에 다음 코드를 추가합니다.

axios.defaults.baseURL = 'http://localhost:3000/api'

로그인 후 복사

이런 방식으로 Axios에 대한 기본 요청 URL을 지정합니다. 이는 백엔드 서비스 주소에 따라 적절하게 수정할 수 있습니다.

3단계: Axios를 사용하여 요청 보내기
Vue 프로젝트와 Axios 구성을 완료했습니다. 이제 Axios를 사용하여 요청을 보낼 수 있습니다. 예는 다음과 같습니다.

methods: {
  fetchData() {
    axios.get('/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

로그인 후 복사

이 예에서는 Vue 인스턴스의 메서드에서 Axios를 사용하여 GET 요청을 보냅니다. Axios의 get 메소드는 Promise를 반환합니다. then 메소드를 사용하여 성공적인 요청의 콜백을 처리하고 catch 메소드를 사용하여 처리합니다. 실패한 요청의 콜백. response.data에 액세스하면 서버에서 반환한 데이터를 얻을 수 있습니다. get 方法返回一个 Promise，我们使用 then 方法来处理请求成功的回调，并使用 catch 方法来处理请求失败的回调。通过访问 response.data，我们可以获取到服务器返回的数据。

步骤四：处理请求参数
在实际开发中，我们可能需要向后端传递一些请求参数。以下是一个带有查询参数的 GET 请求示例：

methods: {
  search(query) {
    axios.get('/search', { params: { q: query } })
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

로그인 후 복사

在这个示例中，我们向后端传递了一个名为 q 的查询参数。在 Axios 的 get 方法的第二个参数中，我们使用了一个包含查询参数的对象 { params: { q: query } }

4단계: 요청 매개변수 처리

실제 개발에서는 일부 요청 매개변수를 백엔드에 전달해야 할 수도 있습니다. 다음은 쿼리 매개변수가 포함된 GET 요청의 예입니다.

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://localhost:3000/api'

new Vue({
  render: h => h(App),
}).$mount('#app')

로그인 후 복사

이 예에서는 q라는 쿼리 매개변수를 백엔드에 전달합니다. Axios get 메소드의 두 번째 매개변수에서는 쿼리 매개변수가 포함된 { params: { q: query } } 객체를 사용합니다.

요약:

이 글의 소개를 통해 우리는 Vue와 Axios를 사용하여 프런트엔드 및 백엔드 대화형 프로젝트를 구축하는 방법을 배웠습니다. 먼저 Vue 프로젝트를 생성하고 Axios를 설치했습니다. 그런 다음 main.js 파일에 Axios의 전역 요청 URL을 구성했습니다. 마지막으로 Axios를 사용하여 GET 요청을 보내고 요청 매개변수를 처리하는 방법을 배웠습니다.

이것은 Vue 및 Axios 기능의 일부일 뿐이므로 계속해서 더 많은 용도를 배우고 탐색할 수 있습니다. 이 기사가 초보자에게 도움과 지침을 제공하고 프런트엔드 및 백엔드 상호 작용 프로젝트를 성공적으로 구축하는 데 도움이 되기를 바랍니다.

코드 예제는 부록을 참조하세요.

부록: 🎜main.js🎜

<template>
  <div id="app">
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

로그인 후 복사

🎜App.vue🎜rrreee

위 내용은 초보자에게 필수: Vue 및 Axios를 사용하여 프런트엔드 및 백엔드 대화형 프로젝트를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!