调用机器人对话接口

调用机器人对话接口


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

作者:李凯

撰写时间:2022年4月15号


/*

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

​ 请求方法:get

​ 请求参数:spoken

​ 响应内容:天气,对话,歌词

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

*/

调用机器人对话接口_第1张图片

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聊天助手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>
						                                 
					                                   
						<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>

效果图

调用机器人对话接口_第2张图片
调用机器人对话接口_第3张图片

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

你可能感兴趣的:(VUE,vue,html5,css3,javascript)