从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人

前言

移动端演示 http://8.146.211.120:8081/#/

管理端演示 http://8.146.211.120:8088/#/

项目整体介绍及演示

前面的文章我们主要完成了基础模块的开发 这次我们跟一下热点 创建AI聊天机器人 并嵌入到我们的uniapp中
首先需要了解dify我已经完成了搭建win10 VMware安装ubuntu24部署 dify

1.先去dify后台创建一个应用

2.配置模型运营商 deepseek 的最简单 开通配置apikey即可

3.编排聊天机器人的能力

4.设置语言图标等

5.选择嵌入 到我们的页面中

由于嵌套代码是html 且uniapp vue文件中只能存在一个script标签
我们将代码放到项目的index.hml里

bash 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="no-referrer">
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
		<script>
		 window.difyChatbotConfig = {
		  token: ''
		 }
		</script>
		<script
		 src="https://udify.app/embed.min.js"
		 id=""
		 defer>
		</script>
		<style>
		  #dify-chatbot-bubble-button {
			background-color: #FF2442 !important;
			top:85% !important;
		  }
		  #dify-chatbot-bubble-window {
			width: 24rem !important;
			height: 40rem !important;
		  }
		</style>
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

这样完成ai聊天机器人的搭建了

后面我们实现支持图片 回复、聊天

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs

相关推荐
我命由我1234525 分钟前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
武子康3 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
哥不是小萝莉4 小时前
CocoIndex实现AI数据语义检索
ai·cocoindex
charlee445 小时前
PandasAI连接LLM进行智能数据分析
ai·数据分析·llm·pandasai·deepseek
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_5 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
YuTaoShao5 小时前
【LeetCode 热题 100】131. 分割回文串——回溯
java·算法·leetcode·深度优先
源码_V_saaskw5 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
超浪的晨6 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发