Libfary10 : Axios CommonJS SPA Web Spring Boot Project - AlbertProfe/cifojava2022-5 GitHub Wiki
Welcome to the cifojava2022-5 wiki!
-
Base project:
- @Entity
book
fromLibrary5
- POM
- ThymeLeaf dependency
- Library5
- DataBase H2:
Library10
-
First-time CREATE DDL : First-time CREATE DDL option (after that
UPDATE
) inapplication.properties
-
First-time CREATE DDL : First-time CREATE DDL option (after that
- Application.properties
- @Service, @CrudRepository JPA 2.0, @Component
- @Test JUnit Jupiter
- @Entity
-
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 onasync
- SPA : Single-page application, readings:
- Axios: CommonJS usage, to fetch
- 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>
- Using jsDelivr CDN:
- Dependencies:
- 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.
-
version 1.0 : very basic project from
library5
withaxios.get
, then parse them intostring
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) -
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 thecreate New Book form
. - Fill in the form and then
submit
will callaxios.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.
- After loading books at table (
-
-
version 4.0 : evolving project with all:
-
the to-dos (
delete
andupdate
)- JS axios done, it is need to do the HTML job and some little work in js
-
and a better version for
table
-