[项目实训博客-TravelMind途灵]1.在React前端的基础上构建Spring Boot后端并接入DeepSeek API

本周我的任务是将队友构建好的前端框架加上后端，并且接入DeepSeek API

在React前端的基础上构建Spring Boot后端

构建Spring Boot项目时需要使用 Spring Initializr 创建一个新的 Spring Boot 项目，但是我的IDEA没有Spring Boot的初始化构建插件，所以需要从网上下载Spring Boot模板，可以通过这一行代码在Power Sheel里直接下载：

Invoke-WebRequest -Uri "https://start.spring.io/starter.zip" -Method Post -Body "dependencies=web&name=backend&packageName=com.example.backend&javaVersion=17" -ContentType "application/x-www-form-urlencoded" -OutFile backend.zip

再将下载好的backend.zip进行解压

unzip backend.zip -d backend

创建一个示例控制器

package com.example.backend.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/api/hello")
    public String hello() {
        return "Hello from Spring Boot!";
    }
}

需要在 src/main/resources/application.properties 文件中添加以下内容，以允许前端访问后端 API：

spring.mvc.cors.allowed-origins=*
spring.mvc.cors.allowed-methods=*

在React前端的App.js文件中加入调用后端API的示例

  useEffect(() => {
    fetch('/api/hello')
      .then(response => response.text())
      .then(data => setMessage(data));
  }, []);

接入DeepSeek API

由于DeepSeek提供兼容OpenAI格式的API调用接口，所以在Springboot中接入OpenAI API并且把url和API-key改为DeepSeek的即可
首先需要在 pom.xml 文件中添加 spring-boot-starter-web 和 spring-boot-starter-json 依赖项

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-json</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-webflux</artifactId>
    </dependency>

创建一个 OpenAIService，用于与 OpenAI API 进行交互

package com.example.backend.service;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.reactive.function.client.WebClient;
import reactor.core.publisher.Mono;

@Service
public class OpenAIService {

    @Value("${openai.api.key}")
    private String apiKey;

    private final WebClient webClient;

    public OpenAIService(WebClient.Builder webClientBuilder) {
        this.webClient = webClientBuilder.baseUrl("https://api.openai.com/v1").build();
    }

    public Mono<String> getResponse(String prompt) {
        return webClient.post()
                .uri("/completions")
                .header("Authorization", "Bearer " + apiKey)
                .bodyValue(new OpenAIRequest(prompt))
                .retrieve()
                .bodyToMono(String.class);
    }

    private static class OpenAIRequest {
        private final String model = "text-davinci-003";
        private final String prompt;
        private final int max_tokens = 100;

        public OpenAIRequest(String prompt) {
            this.prompt = prompt;
        }

        public String getModel() {
            return model;
        }

        public String getPrompt() {
            return prompt;
        }

        public int getMax_tokens() {
            return max_tokens;
        }
    }
}

在控制器中添加一个新的端点来调用 OpenAI API

 @GetMapping("/api/openai")
    public Mono<String> getOpenAIResponse(@RequestParam String prompt) {
        return openAIService.getResponse(prompt);
    }