调用机器人对话接口

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

仲夏月二十八

3562人浏览 · 2022-04-15 20:08:01

仲夏月二十八 · 2022-04-15 20:08:01 发布

调用机器人对话接口

开发工具与关键技术：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地址：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^