Essential for beginners: How to use Vue and Axios to build front-end and back-end interactive projects

Must-have for beginners: How to use Vue and Axios to build a front-end and back-end interaction project

Introduction:
In modern web development, the front-end and back-end separation architecture has become mainstream. In order to achieve front-end and back-end interaction, we need to use some tools to send and process HTTP requests. Vue.js is a popular front-end framework, and Axios is a Promise-based HTTP library. Their combination allows us to easily realize front-end and back-end interaction. This article will introduce beginners to how to use Vue and Axios to build front-end and back-end interactive projects.

Step 1: Create a Vue project
First, we need to install the Vue CLI (scaffolding tool) to create a new Vue project. Open a terminal and run the following command:

npm install -g @vue/cli

After the installation is complete, use the following command to create a new Vue project:

vue create my-project

Next, go to the project directory and start the development server:

cd my-project
npm run serve

Open http://localhost:8080 in the browser, you should be able to see a default Vue page.

Step 2: Install and configure Axios
To use Axios in a Vue project, we need to install Axios first. Run the following command in the terminal:

npm install axios

After the installation is complete, import Axios in the main.js file:

import axios from 'axios'

Now, we need to configure a basic global request URL for Axios. After the import statement in the main.js file, add the following code:

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

In this way, we specify a default request URL for Axios, which you can modify accordingly according to your backend service address.

Step 3: Use Axios to send requests
We have completed the configuration of the Vue project and Axios, and now we can start using Axios to send requests. Here is an example:

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

In this example, we send a GET request using Axios in a method of the Vue instance. The get method of Axios returns a Promise. We use the then method to handle the callback when the request is successful, and the catch method to handle the callback when the request fails. By accessing response.data, we can get the data returned by the server.

Step 4: Processing request parameters
In actual development, we may need to pass some request parameters to the backend. The following is an example of a GET request with query parameters:

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

In this example, we pass a query parameter named q to the backend. In the second parameter of Axios's get method, we use an object { params: { q: query } } that contains the query parameters.

Summary:
Through the introduction of this article, we have learned how to use Vue and Axios to build front-end and back-end interactive projects. First, we created a Vue project and installed Axios. Then, we configured the Axios global request URL in the main.js file. Finally, we sent a GET request using Axios and learned to handle request parameters.

This is just a small part of the functionality of Vue and Axios, you can continue to learn and explore more uses. I hope this article can provide some help and guidance for beginners and help you successfully build a front-end and back-end interaction project.

See the appendix for code examples.

Appendix:
main.js

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')

App.vue

<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>

The above is the detailed content of Essential for beginners: How to use Vue and Axios to build front-end and back-end interactive projects. For more information, please follow other related articles on the PHP Chinese website!