This tutorial will walk you through the steps of creating a RESTful API Example with Spring Boot, Unit Test with MockMVC and UI Integration with VueJS

This tutorial contains some designed exercises for your practices

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

Project structure

Project dependencies


Define JPA Entity and Repository



Try to replace HSQL database with your favour such as MySQL or Postgres

Define Service, RESTful API and Controller



Try to implement your own Delete Stock API

Show a list of stocks on Web UI with VueJS



Try to integrate other REST APIs such as Create, Update, Delete into your Web UI with VueJS

Run the application


  • Type mvn clean spring-boot:run on terminal at the project root directory to run
  • Access to http://localhost:8080

Time for testing

Unit Test REST API with MockMVC


Type mvn test on your terminal at this example root directory to run the unit test

Try to implement your own Unit Test for other REST APIs

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

Source code

https://github.com/hellokoding/hellokoding-courses/tree/master/springboot-examples/springboot-mockmvc-hsql

References

VueJS Grid Component Example