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 1.8+
  • Maven 3+

Stack

  • Spring Boot
  • MockMVC
  • VueJS

Project structure

Project dependencies


Define JPA Entity and Repository



Exercise for you

Replace HSQL database with your favour such as MySQL or Postgres

Define Service, RESTful API and Controller



Exercise for you

Implement your own Delete Stock API

Show a list of stocks on Web UI with VueJS



Exercise for you

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

Exercise for you

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

And that's it folks! Thanks for joining and have a happy coding. You can find the full source code of this example as below

Source code

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

References

VueJS Grid Component Example