E-commerce Website - Online Book Store - Create Book Admin Module - Part 1
E-commerce Website - Online Book Store using Angular 8 + Spring Boot
E-commerce Website - Online Book Store using Angular 8 + Spring Boot Introduction E-commerce Website - Online Book Store - Create Menu Module E-commerce Website - Online Book Store - Create User Admin Module - Part 1 E-commerce Website - Online Book Store - Create User Admin Module - Part 2 E-commerce Website - Online Book Store - Create User Admin Module - Part 3 E-commerce Website - Online Book Store - Create Book Admin Module - Part 1 E-commerce Website - Online Book Store - Create Book Admin Module - Part 2 E-commerce Website - Online Book Store - Create Book Admin Module - Part 3 E-commerce Website - Online Book Store - Create Book Admin Module - Part 4 Ecommerce Website - Online Book Store - Create Book Shopping Module
Video
This tutorial is explained in the below Youtube Video.Spring Boot Application
We will be modifying the Spring Boot Application we created in previous tutorial to expose a REST end point to return a list of books.Create the Book model class with the jpa annotations for mapping java object to database table. We will be creating a table named book for storing book details.
package com.javainuse.model;
import javax.persistence.*;
@Entity
@Table(name = "book")
public class Book {
@Id
@Column(name = "id")
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "name")
private String name;
@Column(name = "author")
private String author;
@Column(name = "price")
private String price;
@Column(name = "picByte", length = 1000)
private byte[] picByte;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public byte[] getPicByte() {
return picByte;
}
public void setPicByte(byte[] picByte) {
this.picByte = picByte;
}
}
package com.javainuse.db;
import org.springframework.data.jpa.repository.JpaRepository;
import com.javainuse.model.Book;
public interface BookRepository extends JpaRepository<Book, Long> {
}
@RequestMapping maps /get request to return a list of books.
Also here we are using CrossOrigin annotation to specify that calls will be made to this
controller from different domains. In our case we have specified that a call can be made from localhost:4200.
package com.javainuse.controller;
import java.io.IOException;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.javainuse.db.BookRepository;
import com.javainuse.model.Book;
@RestController
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(path = "books")
public class BookController {
@Autowired
private BookRepository bookRepository;
@GetMapping("/get")
public List<Book> getBooks() {
return bookRepository.findAll();
}
}
Go to localhost:8080/books/get
Currently no records are present in users table. Insert a record in book table and again make the REST call
insert into book(id,name,author,price)values(1,'book1','author1',10);
Go to localhost:8080/users/get
Angular Code
We will be modifying the angular code we had developed in the previous tutorial. The page Structure for the Book-Admin Page is as follows-
We will be displaying the list of existing books. We can then select an existing book to view details. Also we will be able to add/edit a book.
- Books Component - List the existing books.
- Book Detail Component - Select existing book to get the book details. Using this component we can also delete the existing book
- Add/Edit Book Component - Add new book/Edit existing book
Create a component named books as follows-
ng generate component admin/books
