# 《AI智能问答系统》落地实现-第04节：AI智能问答系统前端页面的设计与实现

作者：冰河
星球：http://m6z.cn/6aeFbs (opens new window)
博客：https://binghe.site (opens new window)
文章汇总：https://binghe.site/md/all/all.html (opens new window)
源码获取地址：https://t.zsxq.com/0dhvFs5oR (opens new window)

沉淀，成长，突破，帮助他人，成就自我。

本章难度：★★☆☆☆
本章重点：对AI智能问答系统的前端页面进行设计和实现，从全局角度掌握AI智能问答系统的核心设计思路和设计方法。重点掌握对接公网AI大模型的通用设计思路和设计方法，并能够将其灵活应用到自身实际项目中。

大家好，我是冰河~~

AI智能问答系统的后端服务已经基本撸完，是不是非常简单？没错，这个AI智能问答系统就是这么简单。先带大家做一个入门级的简单AI智能问答系统，让大家从总体上感受下对接AI公网大模型的流程和实现效果。随后，会带着大家一步步深入设计和手撸复杂的AI大模型系统。

# 一、前言

AI智能问答系统的设计是非常简单的，后端服务主要实现了简单对话模型、历史会话模型和知识库模型。三种模型都可以与硅基流动平台进行交互。接下来，我们就开始实现前端页面部分。

# 二、本节诉求

对AI智能问答系统的前端页面进行设计和实现，从全局角度掌握AI智能问答系统的核心设计思路和设计方法。重点掌握对接公网AI大模型的通用设计思路和设计方法，并能够将其灵活应用到自身实际项目中。

# 三、编码实现

对于前端页面来说，我们将其放到项目工程的src/reources/static目录下。例如，在项目的 src/reources/static目录下新建ai-qa.html文件，文件内容如下所示。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AI智能问答系统</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
            }
            .container {
                border: 1px solid #ddd;
                border-radius: 5px;
                padding: 20px;
                margin-top: 20px;
            }
            .question-form {
                margin-bottom: 20px;
            }
            #question {
                width: 100%;
                padding: 10px;
                margin-bottom: 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
            }
            button {
                padding: 10px 15px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            button:hover {
                background-color: #45a049;
            }
            .answer {
                margin-top: 20px;
                padding: 15px;
                background-color: #f9f9f9;
                border-radius: 4px;
                white-space: pre-wrap;
            }
            .loading {
                color: #888;
                font-style: italic;
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>AI只能问答系统</h1>

        <div class="container">
            <div class="question-form">
                <h2>请输入您的问题</h2>
                <textarea id="question" rows="4" placeholder="例如：什么是Spring AI？"></textarea>
                <button id="ask-button">提问</button>
                <p class="loading" id="loading">AI正在思考中，请稍候...</p>
            </div>
        
            <div class="answer" id="answer-container" style="display:none;">
                <h2>回答</h2>
                <div id="answer-text"></div>
            </div>
        </div>

        <script>
            document.getElementById('ask-button').addEventListener('click', async function() {
                const question = document.getElementById('question').value.trim();

                if (!question) {
                    alert('请输入问题');
                    return;
                }

                // 显示加载状态
                document.getElementById('loading').style.display = 'block';
                document.getElementById('answer-container').style.display = 'none';

                try {
                    // 简单对话模式   /api/ai/simple-ask
                    // 历史会话模式   /api/ai/session-ask
                    // 知识库模式     /api/ai/knowledge-ask
                    const response = await fetch('/api/ai/simple-ask', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ question: question, sessionId: '12345' })
                    });

                    if (!response.ok) {
                        throw new Error('服务器错误');
                    }

                    const data = await response.json();

                    // 显示回答
                    document.getElementById('answer-text').textContent = data.answer;
                    document.getElementById('answer-container').style.display = 'block';
                } catch (error) {
                    console.error('Error:', error);
                    document.getElementById('answer-text').textContent = '发生错误: ' + error.message;
                    document.getElementById('answer-container').style.display = 'block';
                } finally {
                    // 隐藏加载状态
                    document.getElementById('loading').style.display = 'none';
                }
            });
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

随后，在 src/resources 目录下，新增application.yml文件，内容如下所示。

server:
  port: 8080

spring:
  ai:
    openai:
      api-key: your_api_key # 替换为你自己的硅基流动平台的api-key
      base-url: https://api.siliconflow.cn/
      embedding:
        options:
          model: BAAI/bge-m3
      chat:
        options:
          model: deepseek-ai/DeepSeek-V3

1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：需要将api-key替换为自己的硅基流动平台的api-key。至于如何获取硅基流动平台的api-key，在后续测试章节会给大家说明。

此时，AI问题系统的页面基本开发完毕。

# 四、测试页面

这里，将application.yml文件中的api-key替换为自己的硅基流动平台的api-key后，启动项目，在浏览器输入http://localhost:8080/ai-qa.html 。

如果能正常展示上述页面，说明前端页面正常。

# 五、本节总结

本节，主要对AI智能问答系统的前端页面进行了简单的实现。

最后，可以在评论区写下你学完本章节的收获，祝大家都能学有所成，我们一起AI智能问答系统项目。

# 六、写在最后

在冰河的知识星球除了AI智能问答系统外，还有其他十几个项目，像实战AI大模型、手写高性能Redis组件、手写高性能敏组件、手写线程池、手写高性能SQL引擎、手写高性能Polaris网关、手写高性能熔断组件、手写通用指标上报组件、手写高性能数据库路由组件、手写分布式IM即时通讯系统、手写Seckill分布式秒杀系统、手写高性能RPC、实战高并发设计模式、简易商城系统等等。

这些项目的需求、方案、架构、落地等均来自互联网真实业务场景，让你真正学到互联网大厂的业务与技术落地方案，并将其有效转化为自己的知识储备。

值得一提的是：冰河自研的Polaris高性能网关比某些开源网关项目性能更高，并且冰河也正在为企业级高性能RPC框架录制视频，全程带你分析原理和手撸代码。

你还在等啥？不少小伙伴经过星球硬核技术和项目的历练，早已成功跳槽加薪，实现薪资翻倍，而你，还在原地踏步，抱怨大环境不好。抛弃焦虑和抱怨，我们一起塌下心来沉淀硬核技术和项目，让自己的薪资更上一层楼。

目前，加入星球就可以跟冰河一起学习《实战AI大模型》、《手写高性能Redis组件》、《手写高性能脱敏组件》、《手写线程池》、《手写高性能SQL引擎》、《手写高性能Polaris网关》、《手写高性能RPC项目》、《分布式Seckill秒杀系统》、《分布式IM即时通讯系统》《手写高性能通用熔断组件项目》、《手写高性能通用监控指标上报组件》、《手写高性能数据库路由组件》、《手写简易商城脚手架项目》、《Spring6核心技术与源码解析》和《实战高并发设计模式》，从零开始介绍原理、设计架构、手撸代码。

花很少的钱就能学这么多硬核技术、中间件项目和大厂秒杀系统与分布式IM即时通讯系统，比其他培训机构不知便宜多少倍，硬核多少倍，如果是我，我会买他个十年！

加入要趁早，后续还会随着项目和加入的人数涨价，而且只会涨，不会降，先加入的小伙伴就是赚到。

另外，还有一个限时福利，邀请一个小伙伴加入，冰河就会给一笔 分享有奖 ，有些小伙伴都邀请了50+人，早就回本了！

# 七、其他方式加入星球

链接：打开链接 http://m6z.cn/6aeFbs 加入星球。
回复：在公众号 冰河技术 回复星球领取优惠券加入星球。

特别提醒： 苹果用户进圈或续费，请加微信 hacker_binghe 扫二维码，或者去公众号 冰河技术 回复星球扫二维码加入星球。

好了，今天就到这儿吧，我是冰河，我们下期见~~

← 第03节：AI智能问答系统知识库模型的设计与实现第01节：AI智能问答系统整体功能性测试 →