Spring Boot 是一個十分流行的輕量級 Java Web 框架，許多開發者也熱衷于用其作為后端框架。Vue.js 是一個快速且簡單的前端框架，很多前端開發者都非常喜歡使用它來構建交互式 UI。

由于前后端需要進行數據傳輸，同時又要保持代碼的整潔、易于維護，因此，Spring Boot 和 Vue.js 的結合也變得越來越流行。下面我們就來簡單介紹一下如何使用 Spring Boot 和 Vue.js 相互配合。

后端配置

spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/db_example?createDatabaseIfNotExist=true&serverTimezone=UTC
spring.datasource.username=springuser
spring.datasource.password=ThePassword
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jackson.serialization.fail-on-empty-beans=false

這里我們使用的是 MySQL 數據庫并配置了一些相關的參數。如果您想要使用其他類型的數據庫，可以將這些參數改成相應的值。

前端代碼

<template>
<div id="app">
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: []
}
},
created() {
this.getItems()
},
methods: {
async getItems() {
const { data } = await axios.get('/api/items')
this.items = data
}
}
}
</script>

在 Vue.js 中，我們需要向后端發出請求來獲取數據并渲染 UI。在這里，我們使用了 axios 來發出 HTTP 請求并獲取數據。

將后端和前端結合起來

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class ItemController {
@Autowired
private ItemRepository itemRepository;
@GetMapping("/items")
public List<Item> getItems() {
return itemRepository.findAll();
}
@PostMapping("/items")
public void addItem(@RequestBody Item item) {
itemRepository.save(item);
}
}

在 Spring Boot 中，我們需要創建一個 Controller 類來處理數據請求。這里我們使用了 @CrossOrigin 注解來允許跨域請求，然后分別定義了獲取數據和添加數據的方法。

在前端的代碼中，我們使用了地址 /api/items 來獲取數據。因此，在后端的 ItemController 中，我們需要使用 @RequestMapping 注解來指定對應的路徑。

以上就是使用 Spring Boot 和 Vue.js 開發單頁應用程序的基本流程。當然，這只是一個簡單的示例。如果您想要實現更加復雜的功能，還需要深入了解相關文檔和知識。