调用机器人对话接口

最新推荐文章于 2022-06-23 18:28:07 发布

仲夏月二十八

最新推荐文章于 2022-06-23 18:28:07 发布

阅读量3.4k

点赞数

分类专栏： VUE 文章标签： vue html5 css3 javascript

本文链接：https://blog.csdn.net/m0_49652369/article/details/124202771

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

调用机器人对话接口

开发工具与关键技术：Hbuilder X +vue +axios +element UI

作者：李凯

撰写时间：2022年4月15号

请求地址：https://api.ownthink.com/bot?appid=xiaosi&userid=user&spoken=参数

请求方法：get

请求参数：spoken

响应内容：天气，对话，歌词

           1. 点击回车
           2. 查询数据
           3. 渲染数据

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/axios.min.js"></script>
		<script src="vue.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="js/index.js"></script>
		<title></title>
	</head>
	<body style="background:linear-gradient(to right,#525252,#3d72b4);">
		<div id="container" style="background-color: white; width: 400px; height: 400px; margin-left: 600px; margin-top: 100px;">
				<p align="center" style="font-size: 20px;font-family: 行楷; background:linear-gradient(to right,#525252,#3d72b4); color: white;"><b>AI聊天助手</b</p>
				<table width="400px" height="180px">
					<tr>
						<td>{{info}}</td>
					</tr>
				</table>
				<div align="bottom" style="margin-top: -20px;">
					<el-input type="textarea" :autosize="{ minRows: 7, maxRows: 20}" placeholder="请输入内容"  v-model="query">
					</el-input>
					<el-row>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="success" @click="test" size="mini" round>发送</el-button>
					</el-row>
				</div>
		</div>
		<script type="text/javascript">
			var vm =  new Vue({
				el:"#container",
				data:{
					query:"",
					info:""
				},
				methods:{
					test:function(){
						axios.get("https://api.ownthink.com/bot?appid=xiaosi&userid=user&spoken="+this.query)
						.then(function(res){
							console.log(res.data.data.info);
						  vm.info = res.data.data.info.text;
						})
					}
				}
			})
		</script>
	</body>
</html>

效果图

在这里插入图片描述

AI机器人地址： 官方API地址：

仲夏月二十八

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
调用机器人对话接口

调用机器人对话接口开发工具与关键技术：Hbuilder X +vue +axios +element UI作者：李凯撰写时间：2022年4月15号/* 请求地址：https://api.ownthink.com/bot?appid=xiaosi&userid=user&spoken=参数请求方法：get 请求参数：spoken 响应内容：天气，对话，歌词 1
复制链接

扫一扫