1. Spring Boot で REST API を構築する
まずはバックエンド側の Spring Boot で、簡単な REST API を作成します。このAPIは、ユーザーのリストを返すエンドポイントを提供します。
Spring Boot の準備
Spring Initializr を使って、新しい Spring Boot プロジェクトを作成します。Web依存関係を追加しておきましょう。
コントローラーの作成
次に、UserController というコントローラーを作成し、ユーザー情報を返すエンドポイントを定義します。
@RestController
@RequestMapping("/api")
public class UserController {
@GetMapping("/users")
public List<User> getUsers() {
// ユーザーリストを返す
return List.of(new User(1, "Alice"), new User(2, "Bob"));
}
}
/api/users にGETリクエストを送ると、以下のようなJSON形式のデータが返されます。
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]
2. Vue.js プロジェクトを作成する
次に、Vue.js を使ってフロントエンドのプロジェクトを作成し、Spring Boot のAPIと通信します。
Vue CLI を使ったプロジェクト作成
まず、Vue CLI を使って新しいプロジェクトを作成します。
vue create my-project
cd my-project
npm install axios
Axios を使った API 呼び出し
App.vue や任意のコンポーネントで、Axios を使って Spring Boot のAPIを呼び出します。
<template>
<div>
<h1>User List</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: []
};
},
mounted() {
this.fetchUsers();
},
methods: {
async fetchUsers() {
try {
const response = await axios.get('http://localhost:8080/api/users');
this.users = response.data;
} catch (error) {
console.error("There was an error fetching the users!", error);
}
}
}
};
</script>
CORS（クロスオリジン）の設定
開発中に、Vue.js と Spring Boot が異なるポートで動作している場合、CORSの問題が発生することがあります。この問題を解決するために、Spring Boot 側で CORS を設定します。
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:8080") // Vue.jsの開発サーバーのURL
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true);
}
}