系列文章目录

1. 【Spring AI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端+后端代码）
2. 【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数

项目效果展示

1.开发工具及环境

IntelliJ IDEA
微信开发者工具
JDK版本 >= 17
Spring Boot版本 >= 3.3.x
阿里云百炼api_keyu获取：阿里云百炼官网api获取教程

2.前端代码（原生微信小程序开发）

2.1.前端文件架构：

2.2.index.js文件

// index.js
Page({
   
  onLoad() {
   
    // const systemInfo = wx.getDeviceInfo();
    const systemInfo = wx.getSystemInfoSync();
    this.setData({
   
      statusBarHeight: systemInfo.statusBarHeight,
      navBarHeight: systemInfo.platform === 'android' ? 48 : 44
    });
    
    if (this.data.messages.length === 0) {
   
      this.setData({
   
        messages: [{
   
          content: '用户您好，我是百晓生，了解金融行业的各类信息，您有什么问题吗？',
          role: 'bot',
          timestamp: new Date().getTime()
        }]
      })
    }
  },

  data: {
   
    messages: [],       // 消息列表
    inputValue: '',    // 输入框内容
    isLoading: false,   // 加载状态
    scrollTop: 0,        // 滚动位置
    statusBarHeight: 20, // 默认状态栏高度
    navBarHeight: 44,    // 导航栏默认高度
    inputContainerHeight: 100 // 初始高度对应min-height
  },

  onInput(e) {
   
    this.setData({
    inputValue: e.detail.value });
  },

  sendMessage() {
   
    const question = this.data.inputValue.trim();
    if (!question) return;

    // 添加用户消息
    const newMessage = {
   
      content: question,
      role: 'user',
      timestamp: new Date().getTime()
    };

    this.setData({
   
      messages: [...this.data.messages, newMessage],
      inputValue: '',
      key: Date.now(), // 强制重置textarea
      isLoading: true,
      scrollTop: 99999
    });

    // 调用后端接口
    wx.request({
   
      url: 'http://localhost:8080/ai/ragChat',
      method: 'POST',
      header: {
   
        'Content-Type': 'application/json'
      },
      timeout: 200000, // 增加5分钟超时设置（300秒=300000毫秒）
      data: {
   
        input: question
      },
      success: (res) => {
   
        if (res.statusCode === 200) {
   
          const answer = {
   
            content: res.data,
            role: 'bot',
            timestamp: new Date().getTime()
          };
          this.setData({
   
            messages: [...this.data.messages, answer],
            isLoading: false,
            scrollTop: 99999
          });
        }
      },
      fail: (err) => {
   
        console.error('请求失败', err);
        let title = '请求失败，请重试';
        // 添加超时特定提示
        if (err.errMsg && err.errMsg.includes('timeout')) {
   
          title = '请求超时，请检查网络或稍后再试';
        }
        this.setData({
   
          isLoading: false
        })