<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<title>聊天机器人</title>
</head>
<body>
<div class="wrap">
<!-- 头部 Header 区域 -->
<div class="header">
<h3>小思同学</h3>
<img src="img/person01.png" alt="icon" />
</div>
<!-- 中间 聊天内容区域 -->
<div class="main">
<ul class="talk_list" style="top: 0px" id="talk_list">
<!-- 机器人 -->
<!-- <li class="left_word">
<img src="img/person01.png" /> <span>嗨，最近想我没有？</span>
</li> -->
<!-- 我 -->
<!-- <li class="right_word">
<img src="img/person02.png" /> <span>没有</span>
</li>
<li class="left_word">
<img src="img/person01.png" /> <span>你在干什么？</span>
</li>
<li class="right_word">
<img src="img/person02.png" /> <span>在洗澡</span>
</li> -->
</ul>
</div>
<!-- 底部 消息编辑区域 -->
<div class="footer">
<img src="img/person02.png" alt="icon" />
<input
type="text"
placeholder="说的什么吧..."
class="input_txt"
id="ipt"
/>
<input type="button" value="发 送" class="input_sub" id="btnSend" />
</div>
</div>
<audio src="" id="voice" autoplay style="display: none"></audio>
<!-- 引入axios库 -->
<script src="./js/axios.js"></script>
<script>
// 数据操作视图
// 1、先准备一个数据的数组
// 2、如果需要添加li，先添加数据到数组中去
// 3、渲染数组
//准备容器
// let arr = ['嗨，最近想我没有？','没有','你在干什么？','在洗澡']
let talk_list = document.getElementById('talk_list')
let btn = document.querySelector('#btnSend')
let ipt = document.querySelector('#ipt')
let voice = document.querySelector('#voice')
console.log(talk_list)
let arr = [
{
name: 'user',
text: '你在干嘛'
},
{
name: 'robot',
text: '我在想你'
},
{
name: 'user',
text: '你想我了吗？'
},
{
name: 'robot',
text: '我想你'
}
]
rander()
function rander() {
let str = ''
arr.forEach(item => {
console.log(item)
if (item.name === 'user') {
str += `
<li class="right_word">
<img src="img/person02.png" /> <span>${item.text}</span>
</li>
`
} else {
str += `
<li class="left_word">
<img src="img/person01.png" /> <span>${item.text}</span>
</li>
`
}
})
talk_list.innerHTML = str
}
btn.addEventListener('click', function () {
let txt = ipt.value
if (txt.trim().length <= 0) return
arr.push({
name: 'user',
text: txt
})
rander()
getRobot(txt)
})
function getRobot(txt) {
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/robot',
params: {
spoken: txt
}
}).then(({ data }) => {
console.log(data)
if (data.data.info) {
arr.push({
name: 'robot',
text: data.data.info.text
})
}
rander()
getSynthesize(data.data.info.text)
})
}
function getSynthesize(text) {
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/synthesize',
params: {
text
}
}).then(({ data: res }) => {
if (res.status === 200) {
voice.src = res.voiceUrl
}
})
}
</script>
</body>
</html>
机器人Ajax案例.zip
需积分: 0 170 浏览量
2023-04-13
15:14:38
上传
评论
收藏 26KB ZIP 举报
机器人Ajax案例.zip （9个子文件） 
新建文件夹 
聊天机器人 - 接口文档.md 2KB js axios.js 48KB
index.1.html 4KB img 
person02.png 5KB corner02.png 1KB corner01.png 1KB person01.png 4KB css main.css 4KB reset.css 470B资源评论
