教你如何用Vue3搭配Spring Framework

摘要：在本文中，我們將介紹如何使用Vue3和Spring Framework進行開發，並創建一個簡單的TodoList應用程式。

本文分享自華為雲社區《Vue3搭配Spring Framework開發【Vue3應用程式實戰】》，作者：黎燃。

一、介紹

Vue3和Spring Framework都是現代Web應用程式開發中最流行的框架之一。

Vue3是一個流行的JavaScript框架，可以幫助我們構建互動式的前端應用程式。Spring Framework是一個流行的Java框架，可以幫助我們構建高性能的後端應用程式。在本文中，我們將介紹如何使用Vue3和Spring Framework進行開發，並創建一個簡單的TodoList應用程式。

二、創建Vue3應用程式

首先，我們需要創建一個新的Vue3應用程式。我們可以使用Vue CLI來創建應用程式，具體步驟如下：

• 在終端中，使用以下命令安裝Vue CLI：

rubyCopy code
$ npm install -g @vue/cli

• 創建一個新的Vue3應用程式：

luaCopy code
$ vue create vue-spring-todo

• 選擇預設配置，並等待Vue CLI安裝所需的依賴項。
• 進入新創建的應用程式目錄，並啟動開發伺服器：

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

現在，我們已經準備好使用Vue3來創建我們的TodoList應用程式了。

三、創建TodoList組件

接下來，我們需要創建一個Vue3組件來顯示我們的TodoList。我們可以使用以下命令在src/components目錄下創建一個新的組件文件：

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

然後，我們可以使用以下代碼創建我們的TodoList組件：

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>

在這裡，我們使用了Vue3的數據綁定功能來將我們的TodoList數據渲染為HTML。我們使用v-for指令來迴圈渲染每個TodoList項目，並使用key屬性來提高性能。

四、創建Spring控制器

現在，我們需要創建一個Spring控制器來處理我們的TodoList數據。我們可以使用以下命令在src/main/java/com/example/demo目錄下創建一個新的Java文件：

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

然後，我們可以使用以下代碼創建我們的Spring控制器：

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

在這裡，我們使用了Spring Framework的@RestController註解來標記我們的控制器，並使用@GetMapping註解來指定HTTP GET請求的路徑。我們的getTodos方法返回一個包含TodoList項目的字元串數組。

五、創建Vue3服務

接下來，我們需要創建一個Vue3服務來獲取我們的TodoList數據。我們可以使用以下命令在src/services目錄下創建一個新的JavaScript文件：

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

然後，我們可以使用以下代碼創建我們的Vue3服務：

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

在這裡，我們使用了Axios庫來發出HTTP GET請求，並從我們的Spring控制器中獲取TodoList數據。我們將baseUrl設置為我們的Spring控制器的路徑。

六、將Vue3服務與組件集成

現在，我們已經準備好將我們的Vue3服務與我們的TodoList組件集成。我們可以使用以下代碼更新我們的TodoList.vue組件：

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

在這裡，我們將我們的Vue3服務導入我們的TodoList.vue組件，併在created生命周期鉤子中使用await關鍵字來非同步獲取TodoList數據。

七、啟動應用程式

現在，我們已經完成了我們的Vue3和Spring Framework應用程式的開發。我們可以使用以下命令啟動我們的應用程式：

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

然後，我們可以在瀏覽器中訪問http://localhost:8080來查看我們的TodoList應用程式。

八、總結

在本文中，我們介紹瞭如何使用Vue3和Spring Framework創建一個簡單的TodoList應用程式。我們使用Vue CLI創建了一個新的Vue3應用程式，並創建了一個Vue3組件來顯示我們的TodoList。然後，我們使用Spring Framework創建了一個控制器來處理我們的TodoList數據，並使用Axios庫創建了一個Vue3服務來獲取數據。最後，我們將我們的Vue3服務與我們的Vue3組件集成，並啟動了我們的應用程式。希望這篇文章對您有所幫助！

點擊關註，第一時間瞭解華為雲新鮮技術~