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:

mvn install spring-boot:run

And here's our Vue.js and Axios front-end in action:

Vue.js axios spring boot tutorial

That's it. Enjoy your Spring Boot + Vue.js + Axios application!

Source code for this tutorial: https://github.com/fmarchioni/masterspringboot/tree/master/front-ends/vue

FREE WildFly Application Server - JBoss - Quarkus - Drools Tutorials