Open kucherenko opened 1 year ago
feature/15-add-axios
To implement the task of adding axios tool to the frontend, I would first need to install axios as a dependency. Based on the provided 'frontend/package.json', I would add 'axios' under 'dependencies'. The updated 'package.json' would look like this:
{
"name": "blog-frontend",
"version": "1.0.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.11",
"axios": "^0.21.1"
}
}
After adding the axios dependency, the next step is to run npm install
in the 'frontend' directory to download and install the axios library.
Commit Message: Added axios to frontend dependencies
go:
add service to call backend and render data on the app
feature/15-add-axios
To add the axios tool to the frontend, we need to update the frontend/package.json
file by adding axios
as a dependency. Here is the updated content:
{
"name": "blog-frontend",
"version": "1.0.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.11",
"axios": "^0.21.1"
}
}
Next, we need to modify the frontend/src/App.vue
file to import and use axios. Here is the updated content:
<template>
<div id="app">
<h1>My Blog</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'App',
mounted() {
// Use axios to call the backend and render data on the app
axios.get('/api/data')
.then(response => {
// Handle response data
})
.catch(error => {
// Handle error
});
}
}
</script>
<style>
/* Add any custom styles here */
</style>
Finally, we need to update the frontend/src/main.js
file to import axios. Here is the updated content:
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
Vue.prototype.$axios = axios;
new Vue({
render: h => h(App)
}).$mount('#app');
Add axios tool to
frontend/
.