React + Spring Framework + MongoDBでアプリ作成③

この記事は以下の記事の続きです。

今回はMongoDBの接続手順などを中心に共有していきます。

以下の記事で紹介したデータを画面上に表示させる設定を行なっていきますので、ハンズオンを進める場合はこちらの記事も参考にしてください。

バックエンドとMongoDBの接続

application.propertiesでDBとの接続設定を行なっていきます。
接続設定のdemoの部分は自身のプロジェクト名を入れてください。

application.properties

# MongoDB接続設定
spring.data.mongodb.uri=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/demo

# 既存の設定
server.port=8080
spring.web.cors.allowed-origins=http://localhost:5173
spring.web.cors.allowed-methods=GET,POST,PUT,DELETE
spring.web.cors.allowed-headers=*

MongoDBから取得するデータのモデルクラスを作成します。

User.java

// src/main/java/com/example/demo/model/User.java

package com.example.demo.model;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

@Document(collection = "users")
public class User {
    @Id
    private String id;
    private String name;
    private String email;

    // getter/setter
    public String getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

Repositoryを作成します。

UserRepository.java

package com.example.demo.repository;

import com.example.demo.model.User;
import org.springframework.data.mongodb.repository.MongoRepository;

public interface UserRepository extends MongoRepository<User, String> {
}

Controllerを作成します。

UserController.java

import com.example.demo.model.User;
import com.example.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/users")
@CrossOrigin(origins = "http://localhost:5173")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }
}

ここまで完了したら以下のコマンドでバックエンドを起動します。

./mvnw spring-boot:run

http://localhost:8080/api/usersにアクセスして以下のように画面上にデータが表示されたらバックエンドとの接続は完了です。

おわりに

次回はこのシリーズ最後のフロントエンドにMongoDBのデータを表示させていきます。
皆様の参考になれば幸いです！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼