人狗大战 Java新实现，更有趣，Java _Springboot_Spring AI

人狗大战场景介绍

人狗大战最核心的还是用一个具体的例子来表达面向对象编程的能力，在最新的实现里面，我们扩展一下人和狗对战的流程，增加 springboot ，整合spring ai alibaba，实现一个人一边说话，一边跟狗对战的能力，主要想要体现springboot、spring ai 的各种能力

基于SpringBoot集成Spring AI Alibaba

基于Spring Boot集成Spring AI Alibaba，完成一个简单对话模型，并构建支持prompt的流返回接口项目。下面将详细介绍如何实现该功能，包括配置、依赖添加、代码编写等步骤。

1. 准备工作

确保开发环境满足以下要求：

• JDK版本在JDK17（含）以上。

• Spring Boot版本为3.3.x或更高版本。

2. 申请API Key

按照我了解的信息中给出的指引，在阿里云申请通义千问的API Key。完成后，请记录下这个Key值，它将在后续步骤中用于配置。

3. 配置Maven仓库与添加依赖

由于

spring-ai-alibaba-starter

尚未发布到Maven中央仓库，因此需要在项目的pom.xml文件中手动添加Spring的仓库信息以及相关依赖。

<repositories>
    <repository>
        <id>sonatype-snapshots</id>

        <url>https://oss.sonatype.org/content/repositories/snapshots</url>

        <snapshots>
            <enabled>true</enabled>

        </snapshots>

    </repository>

    <repository>
        <id>spring-milestones</id>

        <name>Spring Milestones</name>

        <url>https://repo.spring.io/milestone</url>

        <snapshots>
            <enabled>false</enabled>

        </snapshots>

    </repository>

    <repository>
        <id>spring-snapshots</id>

        <name>Spring Snapshots</name>

        <url>https://repo.spring.io/snapshot</url>

        <releases>
            <enabled>false</enabled>

        </releases>

    </repository>

</repositories>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>3.3.4</version>

    </dependency>

    <dependency>
        <groupId>com.alibaba.cloud.ai</groupId>

        <artifactId>spring-ai-alibaba-starter</artifactId>

        <version>1.0.0-M2</version>

    </dependency>

    <!-- 其他依赖项 -->
</dependencies>

4. 配置API Key

在application.properties或application.yml中配置从阿里云获取到的API Key：

spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}

其中

${AI_DASHSCOPE_API_KEY}

应替换为你实际获得的API Key值。如果是在本地测试环境中，可以考虑直接硬编码此值，但在生产环境下建议通过环境变量传递。

通义有免费额度，每个月都有，可以申请玩玩

5. 编写业务逻辑

根据题目需求，我们将原来的Java类转换为Spring Boot风格的应用程序，并增加对Spring AI Alibaba的支持以处理聊天请求。首先定义人和狗的实体类及行为方法：

public class Person {
    private String name;
    private int age;

    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public void attack(String input) {
        System.out.println(name + " 发起了攻击！" + input );
    }
}

public class Dog {
    private String name;
    private int age;

    public Dog(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public String bark(String barkString) {
        String dogBarking = name +" ： "+ barkString
        System.out.println(dogBarking);
        return "小狗被打了以后的反馈是 ： " + barkString;
    }
}

接下来创建Controller层来接收HTTP请求并使用Spring AI Alibaba调用通义千问进行交互：

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class BattleController {

    private final ChatClient chatClient;
    private Person person = new Person("小明", 18);
    private Dog dog = new Dog("旺财", 3);

    @Autowired
    public BattleController(ChatClient.Builder builder) {
        this.chatClient = builder.build();
    }

    @GetMapping("/steamChat")
    public Flux<String> steamChat(@RequestParam String input) {
        // 人发起攻击
        person.attack(input);
        // 使用通义千问生成狗的反馈
        String barkString= chatClient.prompt()
                .user("模拟小狗的被打以后的反应:")
               .call().content()
       return Flux.just(dog.bark(barkString));
    }
}

在这个例子中，我们简化了战斗过程，仅展示了人的攻击动作，而狗的行为则是由AI生成的文本响应。为了实现更复杂的交互场景，您可以进一步扩展这些类的功能，例如加入状态机管理双方的生命值等。

6. 启动应用程序

完成上述步骤后，即可运行您的Spring Boot应用程序。访问

http://localhost:8080/ai/steamChat?input=attack

之类的URL来测试是否能够正常工作。

通过以上步骤，您已经成功地利用Spring Boot整合了Spring AI Alibaba，构建了一个简单的对话系统。这不仅体现了面向对象编程思想的实际应用，也展示了Spring生态系统的强大功能。

构建前端

为了构建一个基于React的支持流输出的前端项目，你将需要按照一定的步骤来创建和配置你的项目。这里的“流”指的是从后端接收连续的数据流，通常以小块的形式发送过来，并且这些数据会被实时地展示在前端界面上。给定的知识提供了关于如何设置这样一个项目的具体指导。

创建并配置新的React应用

首先，你需要初始化一个新的React应用程序，并安装所有必要的依赖项。这可以通过运行以下命令来实现：

npx create-react-app frontend
cd frontend
npm install

上述命令会生成一个基本的React项目结构，并进入这个新建的项目目录中。

npm install

确保所有的默认依赖被正确安装。

编写React组件

接下来，根据需求编写几个核心文件以支持聊天功能以及流式响应处理。这里的关键在于能够异步地获取来自后端服务器的数据，并随着新数据的到来动态更新UI。

public/index.html

此文件定义了页面的基本HTML结构。保持其内容不变，因为它已经满足要求。

src/index.js

这是React应用的入口点，它负责渲染根组件

<App />

到DOM中的特定元素上。这部分代码也无需更改。

src/App.js

在此文件中导入了

ChatComponent

组件并在应用的主界面中显示它。

import React from 'react';
import ChatComponent from './components/ChatComponent';

function App() {
  return (
    <div className="App">
      <ChatComponent />
    </div>

  );
}

export default App;

src/components/ChatComponent.js

这是主要的工作区域，其中包含了与用户交互的功能及逻辑。它通过监听文本输入的变化、发送消息到服务器，并处理返回的数据流。请注意，这里使用的是

http://localhost:8080/ai/steamChat?input=

作为请求URL，确保这与您的实际后端服务相匹配。

import React, { useState } from 'react';

function ChatComponent() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState('');

  // ...其他函数省略...

  const handleSendMessage = async () => {
    try {
      const response = await fetch(`http://localhost:8080/ai/steamChat?input=${input}`);
      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');
      let done = false;

      while (!done) {
        const { value, done: readerDone } = await reader.read();
        done = readerDone;
        const chunk = decoder.decode(value, { stream: true });
        setMessages((prevMessages) => prevMessages + chunk);
      }
      setMessages((prevMessages) => prevMessages + '\n\n=============================\n\n');  // 添加分隔符
    } catch (error) {
      console.error('Failed to fetch', error);
    }
  };

  // 渲染UI...
}

这段代码展示了如何通过

fetch

发起网络请求，并利用

ReadableStream

对象读取响应体中的数据流。每当接收到新的数据块时，都会将其解码为字符串格式，并立即更新到状态变量

messages

中，从而触发UI刷新。

启动应用

完成以上设置之后，只需在终端中执行

npm start

即可启动开发服务器，并打开浏览器访问

http://localhost:3000

查看效果。

该解决方案遵循了提供的知识文档中的指引，特别是关于如何使用React框架结合Fetch API处理流式数据传输的部分。如果后端接口地址或参数发生变化，请相应调整相关代码中的URL及其他细节。