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

點擊關注，第一時間了解華為云新鮮技術~

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/556354.html

標籤：架構設計

上一篇：如何成為架構師？

下一篇：返回列表