Home > Article > Web Front-end > Learn Vue and Axios from scratch to realize front-end and back-end data transmission
Learn Vue and Axios from scratch to realize front-end and back-end data transmission
Vue.js is a popular JavaScript framework that allows us to build interactive web interfaces. Axios is a powerful HTTP client that can easily communicate with backend APIs. This article will introduce how to learn Vue and Axios from scratch, and show how to use them to implement front-end and back-end data transmission.
First, we need to install Vue and Axios. They can be installed using npm (Node package manager) or yarn. Open a command line window and run the following command in the root directory of the project:
npm install vue axios
or
yarn add vue axios
After the installation is completed, we can continue to the next step.
Next, we need to create a Vue instance. In the root directory of the project, create a file named app.js
and write the following code in it:
import Vue from 'vue'; new Vue({ el: '#app', data: { message: '' } });
Now, we need to create Vue templates and components to display data in the page. In the root directory, create a file called index.html
and paste the following code into it:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue and Axios Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="Enter a message"> <button @click="sendMessage">Send</button> <p>{{ message }}</p> </div> <script src="app.js"></script> </body> </html>
Now , let us use Axios to send HTTP requests to interact with the backend. In the app.js
file, add the following code:
import axios from 'axios'; new Vue({ el: '#app', data: { message: '' }, methods: { sendMessage: function() { axios.post('/api/send', { message: this.message }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); } } });
In the above code, we use the post
method of Axios to /api/send
A POST request was sent, passing an object containing the message. Please make sure that the corresponding API route is set up in the backend.
Now, we need to start a development server locally in order to view our application in the browser. You can use vue-cli
to quickly create a Vue project and use its built-in development server.
If vue-cli
has not been installed, you can use the following command to install it:
npm install -g @vue/cli
After the installation is complete, run the following command in the root directory of the project to start development Server:
vue serve index.html
Now, we can test our application by visiting localhost:8080
in the browser. When we enter some text in the input box and click the "Send" button, the text is sent to the backend through Axios and the response is displayed in the console.
By learning Vue and Axios, we can easily implement front-end and back-end data transmission. In this article, we first installed Vue and Axios and created a Vue instance. We then wrote an HTML file containing the Vue template and components and sent the HTTP request using Axios. Finally, we started the development server and tested our application in the browser.
I hope the sample code in this article can help you get started quickly and use Vue and Axios to implement front-end and back-end data transmission. I wish you success!
The above is the detailed content of Learn Vue and Axios from scratch to realize front-end and back-end data transmission. For more information, please follow other related articles on the PHP Chinese website!