This tutorial will walk you through the steps of creating a RESTful API web service example with Spring Boot, JPA, Hibernate, HSQL and Lombok, Unit Test with MockMVC and UI Integration with VueJS
If you are looking for a full CRUD integration of RESTful APIs and web app using Spring Boot and VueJS, try below tutorials: - Spring Boot CRUD Example with RESTful APIs, VueJS - Spring Boot CRUD Example with TodoMVC, REST APIs, VueJS
What you'll need
- JDK 8+ or OpenJDK 8+
- Maven 3+
Stack
- Spring Boot
- MockMVC
- VueJS
Init project structure and dependencies
Project structure
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── hellokoding
│ │ │ └── springboot
│ │ │ └── restful
│ │ │ ├── Application.java
│ │ │ ├── Stock.java
│ │ │ ├── StockAPI.java
│ │ │ ├── StockController.java
│ │ │ ├── StockRepository.java
│ │ │ └── StockService.java
│ │ └── resources
│ │ ├── static
│ │ │ ├── stocklist.css
│ │ │ └── stocklist.js
│ │ ├── templates
│ │ │ └── stocklist.html
│ │ └── application.properties
│ └── test
│ └── java
│ └── com
│ └── hellokoding
│ └── springboot
│ └── restful
│ └── StockAPITest.java
└── pom.xml
Project dependencies
Define JPA Entity and Repository
StockRepository extends Spring Data JPA's JpaRepository to provide CRUD functions to the underlying database such as findAll, findById, saveAll, save, deleteById
Define Service, RESTful API and Controller
@RestController is a shorthand for @Controller and @ResponseBody. @Controller indicates the class will define handlers of HTTP requests. @ResponseBody indicates handler methods return value will be serialized as JSON and bind to the web response body
@RequestMapping class annotation maps HTTP requests with end point /api/v1/stocks to all handler methods in StockAPI class
@GetMapping, @PostMapping, @PatchMapping, and @DeleteMapping indicate HTTP GET, POST, PATCH and DELETE request handlers respectively
@PathVariable maps the handler parameter with the URI variable. @RequestBody indicates HTTP request body will be converted as JSON and bind to the handler parameter
Consume the REST API with VueJS
Config and Test
Application configurations
Define Unit tests with @WebMvcTest and MockMvc
Run the unit tests and launch the application with JDK/OpenJDK and Maven
Type the below command at the project root directory
mvn clean test spring-boot:run
Integration test with cURL
Create a new stock
curl -H "Content-Type: application/json" -X POST -d '{"name":"Stock 1","price":"1"}' http://localhost:8080/api/v1/stocks
Get all stocks
curl http://localhost:8080/api/v1/stocks
Get stock id 1
curl http://localhost:8080/api/v1/stocks/1
Update price of stock 1
curl -i -X PATCH -H "Content-Type:application/json" -d "{\"name\" : \"Stock 1 Updated\"}" http://localhost:8080/api/v1/stocks/1
Access to localhost:8080 to see the updated data on UI
If you are looking for a full CRUD integration of RESTful APIs and web app using Spring Boot and VueJS, try below tutorials: - Spring Boot CRUD Example with RESTful APIs, VueJS - Spring Boot CRUD Example with TodoMVC, REST APIs, VueJS