Developing Web applications with Vue.js and Spring Boot

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 as front-end

Start by creating a new project which includes the web dependencies:

$  spring init -dweb,thymeleaf demo-vue

The following dependencies will be included:

<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>

Our basic REST Application composed of the following components:

An application 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);
  }
}

A Controller Class:

package com.example.testrest;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
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 Repository 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 POJO:

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;
  }
}

And this is our index.html pages, which is placed under resources/templates and creates dynamically a Table from the JSON Data of our Spring Boot Service:

<div id="app">
	<div v-html="userTable"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script> // register the grid component new Vue({   el: '#app',   data: {     users: []   },   computed: {     userTable() {       // actually inserting the HTML in the template       return this.createTable(this.users)     }   },   methods: {     getUsers() {       // getting JSON data from API       return new Promise((resolve, reject) => {         const users = fetch('http://localhost:8080/list')           .then(response => response.json())           .then(json => {             resolve(json)           })       })     },     userRowHtml(user) {       // creating a single table row of user data       if (user) {         let html = ''         Object.entries(user).forEach(e => {             html += `
	<td>${e[1]}</td>`         })         return html       }       return ''     },     userRows(users) {       // creating the table rows for user data       if (users && users.length) {         let html = ''         users.forEach(e => {           html += `
	<tr>${this.userRowHtml(e)}</tr>`         })         return html       }       return ''     },     createTable(users) {       // creating the table to insert       if (users && users.length) {         const headers = Object.keys(this.users[0])         let html = ''         html += '
	<table class="blueTable">
		<thead>
			<tr>'         headers.forEach(e => {           html += `
				<th>${e}</th>`         })         html += '
			</tr>
		</thead>'         html += '
		<tbody>'         html += this.userRows(users)         html += '</tbody>
	</table>'         return html       }       return ''     }   },   async mounted() {     this.users = await this.getUsers()   } })  
</script>undefined</body>

Build and run the application with: