first books request using axios and vuex

Author: kafousis

package-lock.json

@@ -8,6 +8,7 @@
  "lint": "vue-cli-service lint"
  },
  "dependencies": {
+ "axios": "^0.27.2",
  "core-js": "^3.8.3",
  "primeflex": "^3.2.1",
  "primeicons": "^5.0.0",

package.json

@@ -2,7 +2,7 @@
  <Toolbar class="flex align-items-center">
  <template #start>
  <img alt="Logo" src="../assets/logo.png" width="40" height="40" />
- <div class="text-primary text-3xl font-bold ml-5">
+ <div class="text-primary text-2xl font-bold ml-5">
  SPRING - VUEJS CRUD
  </div>
  </template>

src/components/header.vue

@@ -5,6 +5,11 @@ import 'primevue/resources/primevue.min.css' //core css
 import 'primeicons/primeicons.css' //icons
 import 'primeflex/primeflex.css'; // primeflex
 
+import axios from 'axios';
+// becase of CORS error we need to have the same origin
+// requests are sent to backend server (see vue.config.js)
+axios.defaults.baseURL = 'http://localhost:3000';
+
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -13,6 +18,7 @@ import store from './store'
 import PrimeVue from 'primevue/config';
 import Toolbar from 'primevue/toolbar';
 import Button from 'primevue/button';
+import Card from 'primevue/card';
 
 const app = createApp(App);
 
@@ -25,6 +31,7 @@ app.use(PrimeVue, { ripple: true })
 
 app.component('Toolbar', Toolbar);
 app.component('Button', Button);
+app.component('Card', Card);
 
 
 app.mount('#app');

src/main.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+class BookService {
+ getBooks() { return axios.get('/api/books?size=200&projection=bookDetail&sort=title,asc') }
+}
+
+export default new BookService();

src/services/book-service.js

@@ -1,13 +1,51 @@
 import { createStore } from 'vuex'
+import BookService from '../services/book-service';
 
 export default createStore({
+
+ // data
+
  state: {
+ books: []
  },
+
+ // computed properties for stores
+
  getters: {
  },
+
+ // methods that can change state data, only sychronous code
+ // mutations expect two arguments: state and payload
+ // commit a mutation
+
  mutations: {
+ getBooks(state, books) {
+ state.books = books;
+ }
  },
+
+ // methods that cannot change state data, asychronous code (e.g. api calls)
+ // receive a context object which contains mutations, state, getters, actions
+ // dispach an action
+
  actions: {
+ getBooks({ commit }) {
+ console.log('action -> getBooks')
+
+ return new Promise((resolve, reject) => {
+
+ BookService.getBooks()
+ .then(response => {
+ console.log('success')
+ commit('getBooks', response.data)
+ resolve();
+ })
+ .catch(error => {
+ console.log('error')
+ reject(error);
+ })
+ })
+ }
  },
  modules: {
  }

src/store/index.js

@@ -1,5 +1,47 @@
 <template>
- <div class="home">
- <h1>This is the books page</h1>
+ <div class="text-color-secondary text-3xl font-semibold m-5">
+ Books
+ <Button
+ icon="pi pi-plus"
+ class="p-button-rounded p-button-secondary p-button-outlined ml-5"
+ />
  </div>
-</template>
+
+ <Card>
+ <template #title>My wonderful book</template>
+ <template #subtitle>Giannis Kafousis, Vaso Kountouri</template>
+ <template #footer>
+ <Button
+ icon="pi pi-pencil"
+ label="Edit"
+ class="p-button-primary"
+ style="width: 180px"
+ />
+ <Button
+ icon="pi pi-trash"
+ label="Delete"
+ class="p-button-secondary ml-6"
+ style="width: 180px"
+ />
+ </template>
+ </Card>
+</template>
+
+<script>
+export default {
+ mounted() {
+ this.$store.dispatch("getBooks").then(
+ (response) => {
+ console.log("Got some data");
+ console.log(response);
+ },
+ (error) => {
+ console.error(
+ "Got nothing from server. Prompt user to check internet connection and try again"
+ );
+ console.log(error);
+ }
+ );
+ },
+};
+</script>

src/views/BookListView.vue

@@ -1,4 +1,9 @@
 const { defineConfig } = require('@vue/cli-service')
+
 module.exports = defineConfig({
- transpileDependencies: true
+ transpileDependencies: true,
+ devServer: {
+ // proxy any unknown requests to tomcat
+ proxy: 'http://localhost:8080',
+ }
 })