本文使用图灵机器人API编写Html简单构建了一个网页，实现了聊天机器人。
原理：简单地向API地址发送请求，并获取回答信息，从而实现交互。
页面使用Vue框架构建而成，注意其中的API key需要替换成自己的哦，在图灵机器人官网可以免费注册获得的！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
<div id="app" class="flex">
<br />
<br />
<h1 style="color: burlywood;">{{title}}</h1>
<br />
<br />
<div id="app" class="box">
<br />
<br />
<img :src="katouImage" style="width: 120px">
<br />
<br />
<div class="answer">
MM:
{{answer}}
</div>
<br />
<br />
<div>
You:
<input type="text" v-model="question"/>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
katouImage:"katou.jpg",
question:'',
answer:'你刚刚，说了什么？',
title:"虚拟好友"
},
watch:{
question(newv)
{
var func = _.debounce(this.getResult, 1000);
func();
}
},
methods:{
getResult()
{
console.log("getresult");
if(this.question.indexOf('。')== -1)
{
this.answer = "请以中文的 '。'结尾,yo!"
return
}
axios.get('http://www.tuling123.com/openapi/api?key=这里换成你自己的KEY哦&info=' + this.question)
.then(res=>{
console.log(res);
this.answer = res.data.text
})
.catch(function(err){
})
}
}
})
</script>
<style>
.flex {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 35rem;
height: 22rem;
background: #ffffff;
border-radius: 14px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.answer{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 400px;
height: 25px;
background:lightskyblue;
border-radius: 20px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
</style>
</body>
</html>
garyvaluegaryvalue
fuguifugui