当前位置：首页 > news >正文

新纪实网站建设淮安网站seo

news 2025/9/27 9:00:43

新纪实网站建设,淮安网站seo,国内erp系统排名,网页设计与网站开发试题答案在上一篇文章中，我们使用 DeepSeek 生成了一个 Java 版的 AI 问答机器人，并在终端与 AI 进行交互。但如果想要让更多人使用它，我们需要搭建一个 API 接口，让网页也能调用 AI 机器人。今天，我们就来学习如何用 AI 生成…

在上一篇文章中，我们使用 DeepSeek 生成了一个 Java 版的 AI 问答机器人，并在终端与 AI 进行交互。但如果想要让更多人使用它，我们需要 搭建一个 API 接口，让网页也能调用 AI 机器人。今天，我们就来学习如何用 AI 生成 Spring Boot API，并在网页中调用它！

一、用 DeepSeek 生成 Spring Boot API

💬 示例指令：

“请用 Java + Spring Boot 编写一个简单的 API，它可以接收用户输入的问题，并调用 DeepSeek API 返回 AI 生成的回答。”

DeepSeek 可能会返回如下代码：

import com.google.gson.Gson;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import okhttp3.*;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.List;@RestController
@RequestMapping("/api/chat")
public class ChatController {private static final String API_URL = "http://localhost:11434/v1/chat/completions";private static final OkHttpClient client = new OkHttpClient();@PostMappingpublic String chat(@org.springframework.web.bind.annotation.RequestBody ChatRequest request) {return getAIResponse(request.getMessage());}// 调用 DeepSeek APIpublic static String getAIResponse(String question) {// 构造 JSON 请求体String json = String.format("{"+ "\"model\": \"deepseek-r1:1.5b\","+ "\"messages\": [{\"role\": \"user\", \"content\": \"%s\"}]"+ "}", question);// 创建请求体RequestBody body = RequestBody.create(json, MediaType.parse("application/json"));// 构建 HTTP 请求Request request = new Request.Builder().url(API_URL).post(body).build();// 发送请求并获取响应try (Response response = client.newCall(request).execute()) {if (response.isSuccessful() && response.body() != null) {Gson gson = new Gson();ChatBotDeepSeek.DeepSeekResponse deepSeekResponse = gson.fromJson(response.body().string(), ChatBotDeepSeek.DeepSeekResponse.class);return deepSeekResponse.getChoices().get(0).getMessage().getContent();}return "AI 机器人出错了，请稍后再试！";} catch (IOException e) {return "AI 机器人出错了，请稍后再试！";}}@Data@NoArgsConstructor@AllArgsConstructorpublic static class DeepSeekResponse {private String id;private String object;private long created;private String model;private String systemFingerprint;private List<ChatBotDeepSeek.DeepSeekResponse.Choice> choices;private ChatBotDeepSeek.DeepSeekResponse.Usage usage;@Data@NoArgsConstructor@AllArgsConstructorpublic static class Choice {private int index;private ChatBotDeepSeek.DeepSeekResponse.Message message;private String finishReason;}@Data@NoArgsConstructor@AllArgsConstructorpublic static class Message {private String role;private String content;}@Data@NoArgsConstructor@AllArgsConstructorpublic static class Usage {private int promptTokens;private int completionTokens;private int totalTokens;}}
}// 数据传输对象（DTO）
class ChatRequest {private String message;public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}
}

🔹 代码解析：
✅ @RestController 创建一个 API 控制器
✅ @RequestMapping("/api/chat") 定义 API 访问路径
✅ @PostMapping 处理 POST 请求，接收用户输入
✅ OkHttp 发送 HTTP 请求到 DeepSeek API ，获取 AI 生成的回答

二、运行 Spring Boot 并测试 API

1️⃣ 添加 Maven 依赖

<!-- 如果你没加 OkHttp -->
<dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.12.0</version>
</dependency><!-- 如果你没加 web-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

2️⃣ 运行 Spring Boot 项目：
在 IDE 里启动 ChatController，或者在命令行执行：

mvn spring-boot:run

3️⃣ 测试 API（用 Postman 或 curl）：

curl -X POST http://localhost:8080/api/chat -H "Content-Type: application/json" -d '{"message":"你好，AI"}'

如果一切正常，你会看到 AI 返回的回答。🎉

三、前端调用 API，实现网页对话

我们已经有了后端 API，接下来创建一个 简单的 HTML + JavaScript 网页，让用户能在网页上和 AI 机器人聊天！

1. 让 DeepSeek 生成 HTML 页面

💬 示例指令：

“请用 HTML + JavaScript 创建一个简单的聊天页面，它可以调用后端 API（http://localhost:8080/api/chat），并显示 AI 生成的回答。”

DeepSeek 可能会返回如下代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI 机器人聊天</title><style>body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }#chatBox { width: 80%; height: 300px; border: 1px solid #ddd; overflow-y: auto; padding: 10px; }#userInput { width: 70%; padding: 10px; }button { padding: 10px 20px; margin-left: 10px; }</style>
</head>
<body><h2>AI 机器人聊天</h2><div id="chatBox"></div><input type="text" id="userInput" placeholder="输入你的问题..." /><button onclick="sendMessage()">发送</button><script>async function sendMessage() {let userInput = document.getElementById("userInput").value;if (!userInput) return;let chatBox = document.getElementById("chatBox");chatBox.innerHTML += "<p><strong>你：</strong> " + userInput + "</p>";let response = await fetch("http://localhost:8080/api/chat", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({ message: userInput })});let result = await response.text();chatBox.innerHTML += "<p><strong>AI：</strong> " + result + "</p>";document.getElementById("userInput").value = "";}</script></body>
</html>

🔹 代码解析：
✅ input 输入框，用户输入问题
✅ button 发送按钮，触发 sendMessage()
✅ fetch() 发送 API 请求到后端
✅ chatBox 显示 AI 机器人回复