Libfary10 : Axios CommonJS SPA Web Spring Boot Project

Welcome to the cifojava2022-5 wiki!

Axios CommonJS SPA Web Spring Boot Project

Base project

• Base project:

  • @Entity book from Library5
  • POM
  • ThymeLeaf dependency
  • Library5
  • DataBase H2: Library10
    • First-time CREATE DDL : First-time CREATE DDL option (after that UPDATE) in application.properties
  • Application.properties
  • @Service, @CrudRepository JPA 2.0, @Component
  • @Test JUnit Jupiter

• To work from base-project

  • Axios: CommonJS usage, to fetch sync data from API REST endpoint in this exercise, but later on we will work on async
  • SPA : Single-page application, readings:
    • What is a Single Page Application?
    • Single-page application vs. multiple-page application

New tools

• Axios : Axios is a promise-based HTTP Client for node.js and the browser.
  • Dependencies:
    • Using jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    • Using unpkg CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• SPA : We should diffrenciate SPA (single page application) from Multi-Page Applications (MPA).
  • An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest
  • and Fetch when different content is to be shown.

Versions

• version 1.0 : very basic project from library5 with axios.get, then parse them into string and send to HTML view

  • FETCH books to load TABLE: axios.get

    const fetchBooks = () => {
        axios.get('http://localhost:8080/api/getBooks')
            .then(response => {
            //const books = response;
             const books = response.data;
             console.log(`GET all books list`, books);
             bookListInner.innerHTML = JSON.stringify(books);
         })
        .catch(error => console.error(error));
     };
    

• version 2.0 : evolving project with fetchBooksAndPrintTable (create Table at JS)

  • Images create table from JS

• version 3.0 : evolving project with axios.post and toggle show/hide FORM

  • The mechanics will be the follow;

    • After loading books at table (axios.get), the toggle button will show the create New Book form.
    • Fill in the form and then submit will call axios.post
    • Previosuly to axios.post, sendToController js will create the JSON-object Book.
    • After that (once the back-end saved the book at BD-H2) the table will be updated and the form hidden without leave out the URL.

    

• version 4.0 : evolving project with all:

  • the to-dos (delete and update)

    • JS axios done, it is need to do the HTML job and some little work in js

  • and a better version for table