【Spring AI】基于专属知识库的RAG智能问答小程序开发——完备项目（含完备 ...

系列文章目次

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

<hr>
  
<hr> 项目效果展示

1.开发工具及环境

IntelliJ IDEA
微信开发者工具
JDK版本 >= 17
Spring Boot版本 >= 3.3.x
阿里云百炼api_keyu获取：阿里云百炼官网api获取教程
2.前端代码（原生微信小程序开发）

2.1.前端文件架构：

2.2.index.js文件

1. // index.js
2. Page({
3.    
4.   onLoad() {
5.    
6.     // const systemInfo = wx.getDeviceInfo();
7.     const systemInfo = wx.getSystemInfoSync();
8.     this.setData({
9.    
10.       statusBarHeight: systemInfo.statusBarHeight,
11.       navBarHeight: systemInfo.platform === 'android' ? 48 : 44
12.     });
13.    
14.     if (this.data.messages.length === 0) {
15.    
16.       this.setData({
17.    
18.         messages: [{
19.    
20.           content: '用户您好，我是百晓生，了解金融行业的各类信息，您有什么问题吗？',
21.           role: 'bot',
22.           timestamp: new Date().getTime()
23.         }]
24.       })
25.     }
26.   },
28.   data: {
29.    
30.     messages: [],       // 消息列表
31.     inputValue: '',    // 输入框内容
32.     isLoading: false,   // 加载状态
33.     scrollTop: 0,        // 滚动位置
34.     statusBarHeight: 20, // 默认状态栏高度
35.     navBarHeight: 44,    // 导航栏默认高度
36.     inputContainerHeight: 100 // 初始高度对应min-height
37.   },
39.   onInput(e) {
40.    
41.     this.setData({
42.     inputValue: e.detail.value });
43.   },
45.   sendMessage() {
46.    
47.     const question = this.data.inputValue.trim();
48.     if (!question) return;
50.     // 添加用户消息
51.     const newMessage = {
52.    
53.       content: question,
54.       role: 'user',
55.       timestamp: new Date().getTime()
56.     };
58.     this.setData({
59.    
60.       messages: [...this.data.messages, newMessage],
61.       inputValue: '',
62.       key: Date.now(), // 强制重置textarea
63.       isLoading: true,
64.       scrollTop: 99999
65.     });
67.     // 调用后端接口
68.     wx.request({
69.    
70.       url: 'http://localhost:8080/ai/ragChat',
71.       method: 'POST',
72.       header: {
73.    
74.         'Content-Type': 'application/json'
75.       },
76.       timeout: 200000, // 增加5分钟超时设置（300秒=300000毫秒）
77.       data: {
78.    
79.         input: question
80.       },
81.       success: (res) => {
82.    
83.         if (res.statusCode === 200) {
84.    
85.           const answer = {
86.    
87.             content: res.data,
88.             role: 'bot',
89.             timestamp: new Date().getTime()
90.           };
91.           this.setData({
92.    
93.             messages: [...this.data.messages, answer],
94.             isLoading: false,
95.             scrollTop: 99999
96.           });
97.         }
98.       },
99.       fail: (err) => {
100.    
101.         console.error('请求失败', err);
102.         let title = '请求失败，请重试';
103.         // 添加超时特定提示
104.         if (err.errMsg && err.errMsg.includes('timeout')) {
105.    
106.           title = '请求超时，请检查网络或稍后再试';
107.         }
108.         this.setData({
109.    
110.           isLoading: false
111.         })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。