前端聊天机器人源码
时间: 2023-08-04 19:09:16 浏览: 52
前端聊天机器人的源码涉及到多个方面,包括前端页面的设计和开发、后端的接口开发以及机器人的逻辑部分。以下是一个简单的前端聊天机器人的源码示例,供参考:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端聊天机器人</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="messages"></div>
<div class="input-container">
<input type="text" placeholder="请输入您要咨询的问题">
<button>发送</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS代码:
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
}
.chat-container {
width: 400px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.messages {
height: 300px;
padding: 10px;
overflow-y: scroll;
}
.message {
margin-bottom: 10px;
}
.message .sender {
font-weight: bold;
}
.message .text {
margin-left: 10px;
}
.input-container {
display: flex;
border-top: 1px solid #ccc;
padding: 10px;
}
.input-container input {
flex: 1;
border: none;
border-radius: 5px;
padding: 5px;
margin-right: 10px;
}
.input-container button {
border: none;
border-radius: 5px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
```
JavaScript代码:
```javascript
const messagesEl = document.querySelector('.messages');
const inputEl = document.querySelector('input');
const btnEl = document.querySelector('button');
btnEl.addEventListener('click', () => {
const question = inputEl.value;
addMessage('我', question);
inputEl.value = '';
getAnswer(question);
});
function addMessage(sender, text) {
const messageEl = document.createElement('div');
messageEl.classList.add('message');
const senderEl = document.createElement('div');
senderEl.classList.add('sender');
senderEl.innerText = sender;
const textEl = document.createElement('div');
textEl.classList.add('text');
textEl.innerText = text;
messageEl.appendChild(senderEl);
messageEl.appendChild(textEl);
messagesEl.appendChild(messageEl);
messagesEl.scrollTop = messagesEl.scrollHeight;
}
function getAnswer(question) {
// 发送问题到后端接口,获取机器人的回答
fetch(`/api/answer?question=${encodeURIComponent(question)}`)
.then(res => res.json())
.then(data => {
addMessage('机器人', data.answer);
})
.catch(err => {
console.error(err);
});
}
```
以上代码仅供参考,实际开发中还需要考虑更多因素,例如机器人的逻辑部分、后端API接口的开发、数据的存储与处理等。