写一个能交互的前端页面
时间: 2024-05-13 21:19:15 浏览: 19
很好,我可以为您提供一些指导。
首先,您需要选择一个前端框架,例如React、Vue等。这些框架可以帮助您更轻松地构建动态交互式页面。
接下来,您需要确定您想要实现的功能,例如输入框、按钮、对话框等。您可以使用HTML和CSS来创建这些元素,并使用JavaScript来实现它们的交互。
例如,您可以创建一个输入框,让用户输入文本,并使用按钮触发一个函数来处理用户输入。该函数可以将用户输入发送到后端API,并从API获取响应。响应可以显示在页面上的对话框中,让用户与AI进行交互。
以下是一个简单的示例代码:
```javascript
import React, { useState } from 'react';
import axios from 'axios';
function Chatbot() {
const [input, setInput] = useState('');
const [response, setResponse] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const res = await axios.post('/api/chatbot', { input });
setResponse(res.data.response);
setInput('');
}
return (
<div>
<h1>Chatbot</h1>
<form onSubmit={handleSubmit}>
<input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
<button type="submit">Send</button>
</form>
{response && <div>{response}</div>}
</div>
);
}
export default Chatbot;
```
在这个示例中,我们使用React构建了一个简单的聊天机器人页面。当用户提交表单时,我们将其输入发送到后端API,并将响应显示在页面上。当然,这只是一个很简单的例子,您可以根据自己的需求进行修改和扩展。