Building a front-end with Vue.js and Axios for Spring Boot REST Applications

In this tutorial we will learn how to create a basic front-end with Vue.js and Axios to access a Spring Boot REST Service.

Vue.js is one of the most widely used JavaScript frames for creating web interfaces and single page applications. This guide covers a basic example of a Spring Boot application which uses Vue.js and Axios as front-end

First of all, we need a Spring Boot project which has the following dependencies:

  <parent>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-parent</artifactId>     <version>2.1.9.RELEASE</version>     <relativePath/> <!-- lookup parent from repository -->   </parent>   <groupId>com.example</groupId>   <artifactId>demo-vue</artifactId>   <version>0.0.1-SNAPSHOT</version>   <name>demo</name>   <description>Demo project for Spring Boot</description>    <properties>     <java.version>1.8</java.version>   </properties>    <dependencies>     <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-starter-web</artifactId>     </dependency>      <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-starter-test</artifactId>       <scope>test</scope>     </dependency>     <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-test</artifactId>     </dependency>     <dependency>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-starter-thymeleaf</artifactId>     </dependency>     <dependency>       <groupId>io.rest-assured</groupId>       <artifactId>rest-assured</artifactId>       <version>3.0.7</version>       <scope>test</scope>     </dependency>   </dependencies>

Then, we will add the following Classes to our Project:

A Customer.java Class:

package com.example.testrest;

public class Customer {
  private int id;
  private String name;
  private String surname;

  public String getSurname() {
    return surname;
  }

  public void setSurname(String surname) {
    this.surname = surname;
  }

  public Customer(int id, String name, String surname) {
    super();
    this.id = id;
    this.name = name;
    this.surname = surname;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getId() {
    return id;
  }

  public void setId(int id) {
    this.id = id;
  }
}

A CustomerController.java Class:

package com.example.testrest;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CustomerController {
  @Autowired CustomerRepository repository;

  @RequestMapping("/list")
  public List<Customer> findAll() {
    return repository.getData();
  }

  @RequestMapping("/one/{id}")
  public Customer findOne(@PathVariable int id) {
    return repository.getData().get(id);
  }
}

A CustomerRepository.java Class:

package com.example.testrest;

import org.springframework.stereotype.Component;
import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.List;

@Component
public class CustomerRepository {
  List<Customer> customerList = new ArrayList<Customer>();

  @PostConstruct
  public void init() {
    customerList.add(new Customer(1, "Fred", "Flinstone"));
    customerList.add(new Customer(2, "Barney", "Rubble"));
    customerList.add(new Customer(2, "Wilma", "Flinstone"));
    customerList.add(new Customer(2, "Bettey", "Rubble"));
    customerList.add(new Customer(2, "Bamm", "Bamm"));
  }

  public List<Customer> getData() {
    return customerList;
  }
}

And a DemoApplication.java Class:

package com.example.testrest;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
  public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
  }
}

Within the resources/templates folder, we will add the following index.html page which uses a combination of Vue.js and Axios to iterate over the list of Customer:

<body>
	<div id="app">
		<table class="blueTable">
			<thead >
				<tr>
					<th>#</th>
					<th>Name</th>
					<th>Surname</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="user in users" :key="user.id">
					<td>{{user.id}}</td>
					<td>{{user.name}}</td>
					<td>{{user.surname}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
	<script> new Vue({   el: "#app",   data() {     return {       users: []     }   },   mounted: function() {       axios         .get('http://localhost:8080/list')         .then(response => {           this.users = response.data         })         .catch(function (error) {           console.log(error);         })     } }) </script>

Run the Application with: