使用springboot接入deepseek 的API 实现电子商务的智能客服前后端代码实现

最新推荐文章于 2025-03-31 22:11:58 发布

置顶慧香一格

最新推荐文章于 2025-03-31 22:11:58 发布

阅读量4.8k

点赞数 36

分类专栏： AI 学习微服务文章标签： spring boot deepseek 前端

本文链接：https://blog.csdn.net/xiaozukun/article/details/145465771

版权

AI 同时被 3 个专栏收录

30 篇文章

订阅专栏

微服务

25 篇文章

订阅专栏

学习

18 篇文章

订阅专栏

文兴一言

在Spring Boot项目中接入DeepSeek API以实现电子商务的智能客服功能，涉及前端和后端的共同协作。以下是一个简化的实现框架，旨在指导你如何开始这个过程。请注意，具体的实现细节可能需要根据DeepSeek的最新API文档和你的项目需求进行调整。

后端实现（Spring Boot）

‌添加依赖‌

在pom.xml中添加必要的依赖，比如Spring Web和任何你可能需要的用于处理HTTP请求的库（如RestTemplate或WebClient）。

xml

<dependencies>
    <!-- Spring Boot Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 其他依赖 -->
</dependencies>

2‌.配置DeepSeek‌

在application.properties或application.yml中配置DeepSeek的API Key和Base URL。

deepseek.api.key=你的API_KEY
deepseek.api.base-url=https://api.deepseek.com/你的端点

‌3.创建服务类‌

创建一个服务类来处理与DeepSeek的通信。

java

@Service
public class DeepSeekService {

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

    @Value("${deepseek.api.base-url}")
    private String baseUrl;

    private final RestTemplate restTemplate;

    @Autowired
    public DeepSeekService(RestTemplateBuilder restTemplateBuilder) {
        this.restTemplate = restTemplateBuilder.build();
    }

    public String askQuestion(String question) {
        // 构建请求体（根据DeepSeek的API文档）
        Map<String, String> requestBody = new HashMap<>();
        requestBody.put("question", question);
        requestBody.put("apiKey", apiKey);

        // 发送请求并获取响应
        ResponseEntity<String> response = restTemplate.postForEntity(baseUrl, requestBody, String.class);

        // 处理响应
        if (response.getStatusCode() == HttpStatus.OK) {
            return response.getBody(); // 返回DeepSeek的回答
        } else {
            throw new RuntimeException("Failed to get response from DeepSeek");
        }
    }
}

4.‌创建控制器‌

创建一个控制器来接收前端的请求并调用DeepSeek服务。

java

@RestController
@RequestMapping("/api/chat")
public class ChatController {

    private final DeepSeekService deepSeekService;

    @Autowired
    public ChatController(DeepSeekService deepSeekService) {
        this.deepSeekService = deepSeekService;
    }

    @PostMapping("/ask")
    public ResponseEntity<String> askQuestion(@RequestBody Map<String, String> request) {
        String question = request.get("question");
        String answer = deepSeekService.askQuestion(question);
        return ResponseEntity.ok(answer);
    }
}

前端实现

前端可以使用任何现代框架（如React、Vue、Angular等）来构建用户界面。以下是一个使用JavaScript和Fetch API的简化示例，它发送一个问题到后端并显示回答。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能客服</title>
</head>
<body>
    <h1>智能客服</h1>
    <input type="text" id="questionInput" placeholder="输入你的问题">
    <button onclick="askQuestion()">提问</button>
    <p id="answer"></p>

    <script>
        async function askQuestion() {
            const questionInput = document.getElementById('questionInput');
            const answerElement = document.getElementById('answer');
            const question = questionInput.value;

            try {
                const response = await fetch('/api/chat/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ question: question })
                });

                if (response.ok) {
                    const answer = await response.text();
                    answerElement.textContent = answer;
                } else {
                    answerElement.textContent = '无法获取回答，请稍后再试。';
                }
            } catch (error) {
                console.error('Error:', error);
                answerElement.textContent = '发生错误，请稍后再试。';
            }
        }
    </script>
</body>
</html>

部署和测试

‌启动后端‌：运行Spring Boot应用程序。
‌启动前端‌：将前端文件放在Web服务器中或通过开发服务器（如npm start、yarn start等）运行。
‌测试‌：在前端界面中输入问题，查看是否能正确获取DeepSeek的回答。

请确保你已经正确配置了DeepSeek的API Key和端点，并且你的Spring Boot应用程序能够访问DeepSeek的服务。此外，根据你的实际需求和DeepSeek的API文档，你可能需要调整请求和响应的处理逻辑。

通义编码：

下面我将详细展示如何使用Spring Boot作为后端框架，Vue.js作为前端框架，接入DeepSeek的API来实现电子商务的智能客服功能。我们将逐步实现前后端的代码。

后端（Spring Boot）

1. 创建Spring Boot项目

使用Spring Initializr创建一个新的Spring Boot项目，选择以下依赖：

Spring Web
Lombok

2. 配置DeepSeek API

假设DeepSeek提供了一个API来处理聊天请求。我们需要在application.properties中配置DeepSeek的API密钥和URL：

properties

deepseek.api.url=https://api.deepseek.com/v1/chat deepseek.api.key=your-deepseek-api-key

3. 创建配置类

创建一个配置类来读取DeepSeek的API配置：

java

package com.example.ecommerce.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.client.RestTemplate;

@Configuration
public class AppConfig {

    @Value("${deepseek.api.url}")
    private String deepSeekApiUrl;

    @Value("${deepseek.api.key}")
    private String deepSeekApiKey;

    @Bean
    public RestTemplate restTemplate() {
        return new RestTemplate();
    }

    @Bean
    public DeepSeekConfig deepSeekConfig() {
        return new DeepSeekConfig(deepSeekApiUrl, deepSeekApiKey);
    }

    public static class DeepSeekConfig {
        private final String apiUrl;
        private final String apiKey;

        public DeepSeekConfig(String apiUrl, String apiKey) {
            this.apiUrl = apiUrl;
            this.apiKey = apiKey;
        }

        public String getApiUrl() {
            return apiUrl;
        }

        public String getApiKey() {
            return apiKey;
        }
    }
}

4. 创建智能客服Controller

创建一个ChatController来处理聊天请求并调用DeepSeek的API：

java

package com.example.ecommerce.controller;

import com.example.ecommerce.config.AppConfig;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

@RestController
@RequestMapping("/api/chat")
public class ChatController {

    @Autowired
    private RestTemplate restTemplate;

    @Autowired
    private AppConfig.DeepSeekConfig deepSeekConfig;

    @PostMapping
    public String chat(@RequestBody String message) {
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        headers.set("Authorization", "Bearer " + deepSeekConfig.getApiKey());

        String requestBody = "{\"message\": \"" + message + "\"}";

        HttpEntity<String> request = new HttpEntity<>(requestBody, headers);

        String response = restTemplate.postForObject(deepSeekConfig.getApiUrl(), request, String.class);

        return response;
    }
}

前端（Vue.js）

1. 创建Vue.js项目

使用Vue CLI创建一个新的Vue.js项目：

bash

vue create ecommerce-frontend cd ecommerce-frontend

2. 安装Axios

安装Axios来处理HTTP请求：

bash

npm install axios

3. 创建智能客服组件

创建一个Chat.vue组件来实现智能客服功能：

vue

<template>
  <div>
    <h1>Chat with Us</h1>
    <div>
      <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message..." />
      <button @click="sendMessage">Send</button>
    </div>
    <div>
      <p v-for="(msg, index) in chatHistory" :key="index">{
  
  { msg }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
      chatHistory: []
    };
  },
  methods: {
    sendMessage() {
      if (this.message.trim() === '') return;
      this.chatHistory.push('You: ' + this.message);
      axios.post('http://localhost:8080/api/chat', this.message)
        .then(response => {
          this.chatHistory.push('Bot: ' + response.data);
          this.message = '';
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

input {
  width: 80%;
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
}

p {
  margin: 10px 0;
}
</style>

4. 更新App.vue

在App.vue中引入并使用Chat组件：

vue

<template>
  <div id="app">
    <Chat />
  </div>
</template>

<script>
import Chat from './components/Chat.vue';

export default {
  name: 'App',
  components: {
    Chat
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>