教你如何用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元件整合，並啟動了我們的應用程式。希望這篇文章對您有所幫助！

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