0
0
0

OpenAI API 使用教程：快速接入 AI 能力

林间写码人
2025-12-15 18:54
阅读 875

大家好，我是一名 211 高校的计算机专业研究生，平时喜欢写技术博客帮助新人少走弯路。最近很多学弟学妹问我：“现在 AI 这么火，怎么才能快速上手用起来？”尤其在 求职 和 面试题挑战 中，能调用大模型 API 已经成为加分项。

我当初学的时候，也是一头雾水：API 是什么？Key 从哪来？怎么集成到项目里？今天这篇教程，就手把手带你从零开始，用最简单的方式接入 OpenAI API，并用 Spring Boot（后端）和 JavaScript（前端）搭建一个完整的问答小应用。无论你是准备秋招、刷面试题，还是想给简历加个“AI 项目”，这篇文章都能帮你快速入门！

一、OpenAI API 是什么？能用来做什么？

简单来说，OpenAI API 是一个让你通过网络请求，远程调用 ChatGPT 等强大 AI 模型的接口。

你可以把它想象成一个“AI 服务员”：

  • 你告诉它问题（比如“解释什么是递归”）
  • 它立刻给你一个智能回答
  • 整个过程只需要几行代码

✅ 常见用途：

  • 自动回答用户提问（客服机器人）
  • 生成文章、代码、邮件
  • 面试题自动解析与讲解
  • 求职简历优化建议
  • 编程作业辅助（但别直接抄！）

对于零基础的同学，你不需要懂模型原理，只要会发请求、收回复就行——这正是本教程的目标。

二、环境准备：5 分钟搞定开发环境

1. 获取 OpenAI API Key

这是你使用 API 的“通行证”。

步骤：

  1. 访问 https://platform.openai.com
  2. 注册/登录账号（需绑定信用卡，但新用户有免费额度）
  3. 点击右上角头像 → View API keys
  4. 点击 Create new secret key，复制生成的 Key（形如 sk-xxxxxx）

🔒 注意：这个 Key 相当于密码，绝不能泄露！不要提交到 GitHub 公开仓库。

2. 安装必要工具

你需要以下软件（都是免费的）：

工具 作用 安装方式
JDK 17+ 运行 Java/Spring Boot 官网下载或用 SDKMAN
Maven 或 Gradle 项目依赖管理 通常随 IDE 自带
Node.js (可选) 运行前端 JavaScript 官网下载 LTS 版
IntelliJ IDEA / VS Code 开发工具 免费社区版即可

💡 我当初第一次配环境时，JDK 版本不对折腾了好久。建议直接用 JDK 17，Spring Boot 3.x 官方推荐版本。

三、核心概念：用大白话讲清楚

1. 什么是 API？

API（Application Programming Interface）就是程序之间的“对话协议”。
比如你用微信小程序点外卖，小程序通过 API 告诉美团“我要一份宫保鸡丁”，美团服务器处理后返回“订单已创建”。

OpenAI API 也是类似：你发一个请求，它返回 AI 生成的内容。

2. 关键参数说明

调用 OpenAI API 时，主要传这几个参数：

参数 说明 示例
model 使用哪个 AI 模型 gpt-3.5-turbo（便宜且快）
messages 对话历史（角色 + 内容） [{"role": "user", "content": "你好"}]
temperature 创造力程度（0~2） 0.7（默认，平衡创意与准确）
max_tokens 最大回复长度 500（约 375 个汉字）

🧠 小知识：gpt-3.5-turbo 是目前性价比最高的模型，适合大多数场景；gpt-4 更强但贵 10 倍以上。

3. 请求-响应流程

你的程序
    │
    ▼
发送 HTTP POST 请求（带问题 + API Key）
    │
    ▼
OpenAI 服务器接收请求，运行 AI 模型
    │
    ▼
返回 JSON 格式的回答
    │
    ▼
你的程序解析 JSON，展示结果

整个过程通常 <2 秒，非常快！

四、实战项目：用 Spring Boot + JavaScript 做一个 AI 面试题助手

我们将做一个 Web 应用：用户输入一道 面试题，AI 自动给出解析和答案。这对求职党超实用！

第一步：创建 Spring Boot 后端

  1. 访问 https://start.spring.io
  2. 选择：
    • Project: Maven
    • Language: Java
    • Spring Boot: 3.2+
    • Dependencies: Spring Web, Spring Configuration Processor
  3. 点击 Generate 下载 ZIP，解压后用 IDEA 打开

第二步：添加 OpenAI 客户端依赖

在 pom.xml 中加入：

<dependency>
    <groupId>com.theokanning.openai-gpt3-java</groupId>
    <artifactId>service</artifactId>
    <version>0.18.1</version>
</dependency>

⚠️ 这是一个第三方封装库，比自己拼 HTTP 请求简单得多。

第三步：配置 API Key

在 application.properties 中添加：

openai.api.key=你的_sk_xxxx_key

然后创建配置类读取它：

// src/main/java/com/example/demo/config/OpenAiConfig.java
@Configuration
public class OpenAiConfig {

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

    @Bean
    public OpenAiService openAiService() {
        return new OpenAiService(apiKey);
    }
}

第四步：编写 AI 调用服务

// src/main/java/com/example/demo/service/AiService.java
@Service
public class AiService {

    private final OpenAiService openAiService;

    public AiService(OpenAiService openAiService) {
        this.openAiService = openAiService;
    }

    public String getAnswer(String question) {
        // 构造消息：指定角色为“面试官”，提升回答质量
        List<ChatMessage> messages = List.of(
            new ChatMessage("system", "你是一位资深技术面试官，请用简洁清晰的语言回答以下面试题。"),
            new ChatMessage("user", question)
        );

        ChatCompletionRequest request = ChatCompletionRequest.builder()
                .model("gpt-3.5-turbo")
                .messages(messages)
                .temperature(0.7)
                .maxTokens(500)
                .build();

        ChatCompletionResult result = openAiService.createChatCompletion(request);
        return result.getChoices().get(0).getMessage().getContent();
    }
}

第五步：创建 REST 接口

// src/main/java/com/example/demo/controller/AiController.java
@RestController
@RequestMapping("/api")
public class AiController {

    private final AiService aiService;

    public AiController(AiService aiService) {
        this.aiService = aiService;
    }

    @PostMapping("/answer")
    public ResponseEntity<String> getAnswer(@RequestBody Map<String, String> request) {
        String question = request.get("question");
        if (question == null || question.trim().isEmpty()) {
            return ResponseEntity.badRequest().body("问题不能为空");
        }
        try {
            String answer = aiService.getAnswer(question);
            return ResponseEntity.ok(answer);
        } catch (Exception e) {
            return ResponseEntity.status(500).body("AI 服务暂时不可用，请稍后再试");
        }
    }
}

第六步：编写前端页面（纯 JavaScript）

在 src/main/resources/static/index.html 中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AI 面试题助手</title>
    <style>
        body { font-family: Arial; max-width: 800px; margin: 40px auto; padding: 20px; }
        textarea { width: 100%; height: 80px; margin: 10px 0; }
        button { padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; }
        #result { margin-top: 20px; padding: 15px; background: #f9f9f9; border-left: 4px solid #4CAF50; }
    </style>
</head>
<body>
    <h1>🎯 AI 面试题助手（求职必备！）</h1>
    <p>输入一道面试题，AI 自动为你解析：</p>
    
    <textarea id="question" placeholder="例如：请解释 Spring Boot 的自动配置原理？"></textarea>
    <br>
    <button onclick="ask()">获取 AI 解答</button>
    
    <div id="result"></div>

    <script>
        async function ask() {
            const question = document.getElementById('question').value.trim();
            if (!question) {
                alert("请输入问题！");
                return;
            }

            document.getElementById('result').innerText = "AI 思考中...";
            
            try {
                const response = await fetch('/api/answer', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ question: question })
                });

                const answer = await response.text();
                document.getElementById('result').innerText = answer;
            } catch (error) {
                document.getElementById('result').innerText = "请求失败，请检查网络或后端是否运行。";
            }
        }
    </script>
</body>
</html>

第七步：启动并测试

  1. 在 IDEA 中运行 DemoApplication.java
  2. 浏览器访问 http://localhost:8080
  3. 输入问题，例如：“Java 中 HashMap 的底层原理是什么？”
  4. 点击按钮，等待 AI 返回专业解答！

✅ 成功标志：你能看到一段结构清晰、包含关键点的回答，比如“数组+链表+红黑树”、“哈希冲突处理”等。

五、新手常见问题 & 解决方案

Q1：运行报错 “Invalid API Key”

  • 原因：Key 错误、过期，或未正确配置。
  • 解决：
    1. 检查 application.properties 中的 Key 是否完整（以 sk- 开头）
    2. 确认 Key 未被删除或禁用
    3. 不要将 Key 提交到 Git！可用 .env 或本地配置

Q2：调用返回 429 Too Many Requests

  • 原因：免费账户有速率限制（每分钟若干次请求）。
  • 解决：
    • 稍等几秒重试
    • 避免频繁点击按钮（前端可加防抖）
    • 生产环境可考虑缓存相同问题的答案

Q3：中文回答乱码或不完整

  • 原因：max_tokens 设置太小。
  • 解决：将 maxTokens 改为 800 或更高（注意：token 越多，费用越高）

Q4：前端点击没反应

  • 原因：后端未启动，或跨域问题（但本例前后端同源，一般不会）
  • 解决：
    • 确保 Spring Boot 正在运行（控制台无报错）
    • 打开浏览器开发者工具（F12），看 Console 是否有 JS 错误

六、学习建议 & 下一步方向

恭喜你！你已经掌握了 OpenAI API 的基本用法，并完成了一个实用的小项目。这不仅能写进简历，还能在 面试题挑战 中快速验证思路。

🔜 接下来你可以：

  1. 增强功能：

    • 添加历史记录（用 localStorage 存储）
    • 支持多轮对话（保存 messages 数组）
    • 增加“重新生成”按钮

  2. 深入学习：

    • 了解 Prompt Engineering（提示词工程）：如何写更好的指令让 AI 输出更精准
    • 尝试 Function Calling：让 AI 调用你的函数（比如查数据库）
    • 接入 流式响应（Stream）：实现打字机效果，提升用户体验

  3. 求职加分项：

    • 将此项目部署到云服务器（如阿里云轻量应用）
    • 结合 LeetCode，做“AI 解题助手”
    • 在 GitHub 写 README 说明项目价值，突出 Spring Boot + AI 集成能力

💬 我当初就是靠一个类似的 AI 项目，在暑期实习面试中脱颖而出。面试官说：“会用 API 不稀奇，但你能封装成服务、考虑异常处理，说明有工程思维。”

结语

技术永远在变，但快速学习、动手实践的能力永远不过时。OpenAI API 只是入口，真正的价值在于你如何用它解决问题——无论是刷 面试题、优化 求职 简历，还是创造新工具。

希望这篇教程能成为你 AI 之旅的第一步。如果有任何问题，欢迎在评论区留言，我会尽力解答！

记住：每一个大神，都曾是小白。你现在的每一步，都在拉近你和梦想 Offer 的距离。

Happy Coding! 🚀

标签:Springboot求职Javascript面试题挑战

评论 0

最热最新
暂无评论

为你推荐

暂无相关推荐
匿名用户Lv.1
0
影响力
0
文章
0
粉丝

相关推荐

暂无相关推荐

精选内容

暂无精选内容