E-commerce Website - Online Book Store - Create Book Admin Module - Part 2
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 had created in the previous tutorial. In the controller class add a method for saving the Book. In another tutorial we had created an application for selecting an image using Angular8 UI. This image will then be sent to the Spring Boot back end by making REST call. Later this image will be stored in MySQL database. We will be adding two methods - one for getting the book details to save and the other for getting the image bytes for the book.
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.GetMapping;
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 {
private byte[] bytes;
@Autowired
private BookRepository bookRepository;
@GetMapping("/get")
public List<Book> getBooks() {
return bookRepository.findAll();
}
@PostMapping("/upload")
public void uploadImage(@RequestParam("imageFile") MultipartFile file) throws IOException {
this.bytes = file.getBytes();
}
@PostMapping("/add")
public void createBook(@RequestBody Book book) throws IOException {
book.setPicByte(this.bytes);
bookRepository.save(book);
this.bytes = null;
}
}
Angular Code
The page Structure for the Book-Admin Page is as follows-
The Books Component will be having two child components - Add Book Component and View Book Component.
In this tutorial we will be implementing the add book component. Create a new component named add book.
ng generate component admin/books/addbook
We want the add book page to be displayed on the same page as the list users page. What we want is based on the url parameter either the add book page should get displayed or the list books page. So whenever we will load the books component we will also be checking the url component
- if the url has action=add then the adduser page will be displayed to add new book.
- If the url has the action=view then the view book page will be displayed.
- In the constructor add the activatedRoute and router.
- ActivatedRoute - Gives us access to the current route instance.
- Router - using this we can navigate to another page.
- In the ngOnInit function we will be using the ActivatedRoute to check the current route parameters. Check if it contains the action parameter
- Implement the addBook function. In this function using the Router we will be again navigating to the same page - /admin/books, but with additional parameters of action=add.
import { Component, OnInit } from '@angular/core';
import { Book } from '../../model/Book';
import { HttpClientService } from '../../service/http-client.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
books: Array<Book>;
selectedBook: Book;
action: string;
constructor(private httpClientService: HttpClientService,
private activedRoute: ActivatedRoute,
private router: Router) { }
ngOnInit() {
this.httpClientService.getBooks().subscribe(
response => this.handleSuccessfulResponse(response)
);
this.activedRoute.queryParams.subscribe(
(params) => {
this.action = params['action'];
}
);
}
handleSuccessfulResponse(response) {
this.books = response;
}
addBook() {
this.selectedBook = new Book();
this.router.navigate(['admin', 'books'], { queryParams: { action: 'add' } });
}
}
