调用对话web接口并借助framework7和springboot做一个简单对话机器人

最新推荐文章于 2025-06-08 15:10:19 发布

原创

最新推荐文章于 2025-06-08 15:10:19 发布 · 752 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#springboot

本文介绍如何利用SpringBoot创建一个中转请求处理跨域问题，结合Framework7框架，实现一个简单的对话机器人。前端通过Ajax请求SpringBoot应用，应用再调用第三方聊天机器人接口，将返回的消息展示在页面上的对话框中。详细步骤包括设置接口、选用Framework7快速搭建前端、编写SpringBoot控制器，并对SpringBoot项目进行打包和部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备一个可以接收的数据接口，用来实现对话。当然你有更好的欢迎下面留言~我用的是下面这个接口，附上传送门：

青云客智能聊天机器人

这个接口的调用url是：http://api.qingyunke.com/api.php?key=free&appid=0&msg=关键词

手写js了好多次ajax请求，皆因跨域失败告终。没办法，想到了springboot做一个中转请求处理吧，请求发送到私服上的springboot程序，springboot再请求这个接口，emmm虽然挺麻烦，但是这个思路可以实现，开始撸码！

不想手写前端，遂找了一些框架，最终选择framework7，一个和原生应用很像的HTML，js框架，里面有个massage的例子，刚好就是对话框的主题。看一下最终效果吧：

先理解一下原理：前端发起ajax请求到springboot程序，springboot再请求接口实现消息返回，最后显示在页面上。具体代码如下：从页面开始：

<!DOCTYPE html>
<html>
<head>
  <!-- Required meta tags-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- Your app title -->
  <title>My App</title>
  <!-- 使用bootcdn进行在线加速 -->
  <link href="https://cdn.bootcss.com/framework7/4.2.2/css/framework7.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/framework7/4.2.2/css/framework7.bundle.min.css" rel="stylesheet">
  <!-- 本地示例运行请参考：https://blog.youkuaiyun.com/qq_38815953/article/details/81984863 -->
</head>
<body>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">消息列表</div>
      </div>
    </div>
    <div class="toolbar messagebar">
      <div class="toolbar-inner">
        <div class="messagebar-area">
          <textarea class="resizable" placeholder="输入"></textarea>
        </div><a class="link send-link" href="#">发送</a>
      </div>
    </div>
    <div class="page-content messages-content">
      <div class="messages">
        <!-- 消息标题，初始化为时间 -->
        <div class="messages-title" id="messages-title_top"></div>
        <!-- 完整的发送消息布局 -->
        <!-- <div class="message message-sent">
          <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-7.jpg);"></div>
          <div class="message-content">
            <div class="message-name">约翰</div>
            <div class="message-header">消息头</div>
            <div class="message-bubble">
              <div class="message-text-header">消息描述</