实战：基于Spring Boot+Vue的项目AI API集成

最近好多学弟学妹找我，说毕设想整点AI亮点，但不知道咋把AI API加到 Spring Boot+Vue 项目里。其实这事儿没那么复杂，今天咱一步一步唠明白～

为啥选Spring Boot+Vue搞这个？

先唠技术选型。选Spring Boot 是因为它“懒人友好”——以前SSM配一堆XML头大，现在Spring Boot 一个注解、几个starter 就能跑起来，调AI API时写个HTTP请求工具类贼快。而且现在企业里Spring Boot 项目贼多，毕设用这个，找工作面试也能唠两句实战经验。

前端选Vue 呢？一是Vue 做动态交互特顺手，比如AI回复是流式输出（像ChatGPT那样打字机效果），Vue 绑定数据能实时更；二是ElementUI 这些组件库现成的，做个“提问输入框+回复展示区”界面，半小时就能搭好。说白了，这俩技术学起来快、就业还刚需，毕设用它稳赚～

数据库咋设计才不踩坑？

数据库不用搞太复杂，抓核心表就行：

用户表：毕设基本都要登录功能，存账号、密码、权限这些。要是你项目不需要登录（比如纯工具类），这步可以省，但建议加上，毕竟“用户体系”是毕设完整性的加分项。
AI调用记录表：记谁（用户ID）啥时候调用了AI、用的哪个prompt模板、API返回了啥（存个摘要就行，别存全量，占空间）。这表能帮你统计调用次数、分析用户需求，答辩时还能说“我做了数据埋点和分析”，瞬间专业度拉满！
Prompt模板表：比如你做“智能简历生成”，预设好“生成Java开发简历”“优化项目描述”这些模板。表存模板ID、模板内容（比如“帮我生成一份突出Spring Boot经验的简历，重点写项目XXX”）。用户选模板直接调API，不用每次自己输prompt，体验好还省事儿～

不用急着写SQL，先把表关系理清楚：用户调用API时，关联用户ID和模板ID，存到调用记录表。这样数据库逻辑清晰，后续增删改查也方便～

核心！AI API调用咋实现？

重点来了！咱以“调用文心一言API生成文案”为例，分后端和前端讲：

后端：Spring Boot 发请求调API

首先，得有个AI服务类（比如 AIService.java），用RestTemplate 发POST请求。伪代码长这样：

// 引入依赖：Spring Boot 自带RestTemplate，不用额外加
@Service
public class AIService {
    // 替换成你申请的API密钥，注意！密钥要存在后端，别放前端！
    private static final String API_KEY = "你申请的key";
    private static final String AI_API_URL = "https://xxx.baidu.com/api/v1/chat"; // 文心一言API地址

    public String callAI(String prompt) {
        // 构造请求体：不同API参数格式不一样，看官方文档
        Map<String, Object> requestBody = new HashMap<>();
        requestBody.put("prompt", prompt);
        requestBody.put("apikey", API_KEY);
        requestBody.put("max_tokens", 500); // 最多生成多少字

        // 发POST请求，拿到响应
        ResponseEntity<String> response = new RestTemplate().postForEntity(
            AI_API_URL, 
            requestBody, 
            String.class
        );
        // 这里要处理响应，比如解析JSON拿到AI回复
        return 解析JSON后的回复内容; 
    }
}

然后写个Controller 暴露接口，给前端调：

@RestController
@RequestMapping("/ai")
public class AIController {
    @Autowired
    private AIService aiService;

    @PostMapping("/generate")
    public Result generate(@RequestBody String prompt) { // Result是自己封装的返回类
        String aiReply = aiService.callAI(prompt);
        return Result.success(aiReply);
    }
}

前端：Vue 调后端接口展示回复

前端做个简单页面，比如用ElementUI 的Input 和Dialog：

<template>
  <div>
    <el-input v-model="userPrompt" placeholder="输入你想让AI生成的内容" />
    <el-button @click="callAI">生成</el-button>
    <el-dialog title="AI回复" :visible.sync="dialogVisible">
      <p>{{ aiReply }}</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userPrompt: "",
      aiReply: "",
      dialogVisible: false,
    };
  },
  methods: {
    callAI() {
      // 调后端 /ai/generate 接口
      this.$axios.post("/ai/generate", this.userPrompt)
        .then((res) => {
          this.aiReply = res.data.data; // 假设后端返回格式是 {data: "AI回复"}
          this.dialogVisible = true;
        })
        .catch((err) => {
          this.$message.error("调用失败，看看网络或API额度～");
        });
    },
  },
};
</script>

避坑指南+答辩老师爱问的点

避坑必看！

API密钥别暴露：前端代码能被扒，所以密钥必须存在后端！哪怕你本地测试，也别把key写在Vue文件里。
API额度不够用：免费AI API（比如千帆、文心一言体验版）有调用次数限制，提前测清楚。答辩前多刷几次，别现场掉链子！
网络超时处理：调第三方API容易卡，后端加个超时重试（比如用Spring Retry），前端加loading状态，别让用户以为卡了。
跨域问题：Spring Boot 里加个CORS配置，不然前端调后端接口会被浏览器拦截。代码参考：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOriginPatterns("*")
            .allowedMethods("GET", "POST")
            .allowCredentials(true);
    }
}