Kotlin Spring Boot + Angular 6 CRUD HttpClient + MySQL example | Spring Data JPA + REST APIs example

Tags: kotlin, angular, crud, mysql
Published: 2021-04-12 18:34:09

https://grokonez.com/frontend/angular/angular-6/kotlin-spring-boot-angular-6-crud-httpclient-mysql-example-spring-data-jpa-rest-apis-example

Kotlin Spring Boot + Angular 6 CRUD HttpClient + MySQL example | Spring Data JPA + REST APIs example

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with MySQL and Angular 6 as a front-end technology to make request and receive response.

Related Posts:
- <a href="https://grokonez.com/spring-framework/spring-boot/use-spring-jpa-mysql-spring-boot">How to use Spring JPA MySQL | Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-jpa-mysql-angularjs-example-spring-boot">Spring JPA + MySQL + AngularJS example | Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-data/spring-jpa-many-to-many">Spring JPA Hibernate Many to Many – SpringBoot + PostgreSQL</a>
- <a href="https://grokonez.com/spring-framework/spring-data/configure-spring-jpa-one-to-many-relationship-springboot">Spring JPA Hibernate One to Many Relationship – SpringBoot + MySQL</a>
- <a href="https://grokonez.com/spring-framework/spring-data-rest/spring-boot-react-redux-mysql-crud-example">Spring Boot + React Redux + MySQL CRUD example</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-jpa-mysql-saveretrieve-filesimages-lob-annotation">Kotlin + SpringBoot JPA + MySQL- Save/retrieve Files/Images with @Lob annotation</a>
- <a href="https://grokonez.com/spring-framework/spring-security/use-spring-security-jdbc-authentication-mysql-spring-boot">Spring Security – JDBC Authentication – SpringBoot + MySQL + Bootstrap</a>

Related pages:
<ul>
<li><strong><a href="https://grokonez.com/kotlin-tutorial">Kotlin</a></strong></li>
<li><a href="https://grokonez.com/angular-tutorial">Angular</a></li>
<li><a href="https://grokonez.com/spring-framework-tutorial/spring-boot">SpringBoot</a></li>
</ul>

<!--more-->
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.3.RELEASE
– Angular 6
- RxJS 6
<h2>II. Overview</h2>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa-angular-http-service-architecture.png" alt="kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + angular-http-service-architecture" width="570" height="542" class="alignnone size-full wp-image-14254" />
<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa-spring-server-architecture.png" alt="kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + spring-server-architecture" width="701" height="325" class="alignnone size-full wp-image-14255" />
<h3>2. Angular 6 Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa-angular-client-architecture.png" alt="kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + angular-client-architecture" width="696" height="462" class="alignnone size-full wp-image-14256" />
<h2>III. Practice</h2>
<h3>1. Project Structure</h3>
<h4>1.1 Spring Boot Server</h4>
<img src="https://grokonez.com/wp-content/uploads/2018/08/Angular-6-Crud-HttpClient-Kotlin-SpringBoot-MySQL-CRUD-Spring-JPA-Kotlin-SpringBoot-project.png" alt="Angular-6-Crud-HttpClient-Kotlin-SpringBoot-MySQL-CRUD-Spring-JPA +Kotlin-SpringBoot-project" width="352" height="363" class="alignnone size-full wp-image-14257" />

- <strong>Customer</strong> class corresponds to entity and table <strong>customer</strong>.
- <strong>CustomerRepository</strong> is an interface extends <strong>CrudRepository</strong>, will be autowired in <strong>CustomerController</strong> for implementing repository methods and custom finder methods.
- <strong>CustomerController</strong> is a REST Controller which has request mapping methods for RESTful requests such as: <code>getAllCustomers</code>, <code>postCustomer</code>, <code>deleteCustomer</code>, <code>deleteAllCustomers</code>, <code>findByAge</code>, <code>updateCustomer</code>.
- Configuration for Spring Datasource and Spring JPA properties in <strong>application.properties</strong>
- <strong>Dependencies</strong> for <strong>Spring Boot</strong> and <strong>MySQL</strong> in <strong>pom.xml</strong>
<h3>1.2 Angular 6 Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa-angular-client-structure.png" alt="kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + angular-client-structure" width="251" height="547" class="alignnone size-full wp-image-14258" />

More at: https://grokonez.com/frontend/angular/angular-6/kotlin-spring-boot-angular-6-crud-httpclient-mysql-example-spring-data-jpa-rest-apis-example