Teach you how to use Vue3 with Spring Framework

Yuan Chuanghui, offline restart! July 1, 2023 Shenzhen Station - Basic software technology interview! Free tickets are on sale for a limited time only!

Summary: In this article, we will introduce how to develop with Vue3 and Spring Framework, and create a simple TodoList application.

This article is shared from Huawei Cloud Community " Vue3 with Spring Framework Development [Vue3 Application Combat] ", author: Li Ran.

1. Introduction

Both Vue3 and Spring Framework are among the most popular frameworks for modern web application development.

Vue3 is a popular JavaScript framework that helps us build interactive front-end applications. Spring Framework is a popular Java framework that helps us build high-performance backend applications. In this article, we will introduce how to develop with Vue3 and Spring Framework, and create a simple TodoList application.

2. Create a Vue3 application

First, we need to create a new Vue3 application. We can use Vue CLI to create applications, the specific steps are as follows:

In a terminal, install Vue CLI with the following command:

rubyCopy code
$ npm install -g @vue/cli

Create a new Vue3 application:

luaCopy code
$ vue create vue-spring-todo

Choose the default configuration and wait for Vue CLI to install the required dependencies.
Change into the newly created application directory, and start the development server:

shellCopy code$ cd vue-spring-todo
$ npm run serve

Now, we are ready to use Vue3 to create our TodoList application.

3. Create a TodoList component

Next, we need to create a Vue3 component to display our TodoList. We can create a new component file under the src/components directory with the following command:

shellCopy code$ cd vue-spring-todo
$ touch src/components/TodoList.vue

We can then create our TodoList component with the following code:

htmlCopy code<template>
 <div>
 <h1>Todo List</h1>
 <ul>
 <li v-for="(todo, index) in todos" :key="index">
 {{ todo }}
 </li>
 </ul>
 </div>
</template>
<script>
export default {
 data() {
 return {
 todos: [
 'Learn Vue3',
 'Learn Spring Framework',
 'Build a TodoList App',
 ],
 };
 },
};
</script>

Here, we've used Vue3's data binding capabilities to render our TodoList data as HTML. We use the v-for directive to loop through each TodoList item and use the key attribute to improve performance.

Fourth, create a Spring controller

Now, we need to create a Spring controller to handle our TodoList data. We can create a new Java file under the src/main/java/com/example/demo directory with the following command:

shellCopy code$ cd vue-spring-todo
$ mkdir -p src/main/java/com/example/demo
$ touch src/main/java/com/example/demo/TodoListController.java

We can then create our Spring controller with the following code:

javaCopy codepackage com.example.demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TodoListController {
    @GetMapping("/api/todos")
 public String[] getTodos() {
 return new String[] {
 "Learn Vue3",
 "Learn Spring Framework",
 "Build a TodoList App"
 };
}

Here, we've used Spring Framework's @RestController annotation to mark our controller, and @GetMapping annotation to specify the path of the HTTP GET request. Our getTodos method returns a string array containing the TodoList items.

5. Create a Vue3 service

Next, we need to create a Vue3 service to fetch our TodoList data. We can create a new JavaScript file in the src/services directory with the following command:

$ cd vue-spring-todo
$ mkdir src/services
$ touch src/services/todoService.js

We can then create our Vue3 service with the following code:

import axios from 'axios'; const baseUrl = 'http://localhost:8080/api/todos'; 
const getTodos = async () => {  const response = await axios.get(baseUrl); return response.data; }; 
export default { getTodos };

Here, we have used the Axios library to make HTTP GET requests and fetch TodoList data from our Spring controller. We set baseUrl to the path of our Spring controller.

6. Integrate Vue3 services with components

Now, we are ready to integrate our Vue3 service with our TodoList component. We can update our TodoList.vue component with the following code:

<template>
 <div>
 <h1>Todo List</h1>
 <ul>
 <li v-for="(todo, index) in todos" :key="index">
 {{ todo }}
 </li>
 </ul>
 </div>
</template>
<script>
import todoService from '../services/todoService';
export default {
 data() {
 return {
 todos: [],
    };
  },
 async created() {
 this.todos = await todoService.getTodos();
  },
};
</script>

Here, we import our Vue3 service into our TodoList.vue component, and use the await keyword in the created lifecycle hook to get TodoList data asynchronously.

Seven, start the application

Now, we have completed the development of our Vue3 and Spring Framework application. We can start our application with the following command:

$ cd vue-spring-todo
$ ./mvnw spring-boot:run

We can then visit http://localhost:8080 in a browser to view our TodoList application.

8. Summary

In this article, we covered how to create a simple TodoList application using Vue3 and Spring Framework. We created a new Vue3 application using Vue CLI and created a Vue3 component to display our TodoList. We then created a controller using the Spring Framework to handle our TodoList data and a Vue3 service using the Axios library to fetch the data. Finally, we integrated our Vue3 service with our Vue3 components and started our application. Hope this article helps you!

Click to follow and learn about Huawei Cloud's fresh technologies for the first time~