chatgpt这么火？前端如何实现类似chatgpt的对话页面_chatgpt前端页面(1)_vue实现chatgpt前端

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

box-shadow: none;
}
.ipt textarea:focus{
border: none !important;
box-shadow: none !important;
}

最后，将这个输入框定位到页面底部就好！


### js部分


首先，页面部分，我们添加消息到页面，包括用户的问题以及ai的回复，添加消息到页面时需要向上滚动：



1
2
3
4
5
6
7
8
9
10
11

// 添加用户消息到窗口
function addUserMessage(message) {
var messageElement = $(‘

’);
chatWindow.append(messageElement);
chatInput.val(‘’);
chatWindow.animate({ scrollTop: chatWindow.prop(‘scrollHeight’) }, 500);
}

// 添加回复消息到窗口
function addBotMessage(message) {
var messageElement = $(‘

’);
chatWindow.append(messageElement);
chatInput.val(‘’);
chatWindow.animate({ scrollTop: chatWindow.prop(‘scrollHeight’) }, 500);
}

这里消息添加带页面后，清空了输入框的内容，接下来还需要给输入框添加加一个键盘事件，也就是点击enter键也可以发送消息！



1
2
3
4
5

// 处理 Enter 键按下
chatInput.keypress(function(e) {
if (e.which == 13) {
chatBtn.click();
}
});

最后就是发送消息与获得消息的一部分了：



1
2
3
4
5

// 处理用户输入
chatBtn.click(function() {
var message = chatInput.val();
if (message.length == 0){
common_ops.alert(“请输入内容！”) // 弹窗
return
}
addUserMessage(message);

chatBtn.attr(‘disabled’,true) // 消息发送后让提交按钮不可点击

// 发送信息到后台
$.ajax({
url: ‘/chat’,
method: ‘POST’,
data: {
“prompt”: JSON.stringify(message)
},
success: function(res) {
res = JSON.parse(res);
addBotMessage(res.content);
chatBtn.attr(‘disabled’,false) // 成功接受消息后让提交按钮再次可以点击
},
error: function(jqXHR, textStatus, errorThrown) {
addBotMessage(‘’ + ‘出错啦！请稍后再试!’ + ‘’);
chatBtn.attr(‘disabled’,false)
}
});
});

这些逻辑都很简单，我不再总结，需要注意的是，我在发送消息到后台等待相应的过程让按钮的状态是不可点击的，直到后台返回消息才可以进行下一次问答！但这里我没有处理键盘事件，也就是说你可以点击enter继续向后台发送消息，这也是一个bug，只不过我没有处理，你们不需要的可以去掉这个键盘事件就好了，当然也可以在发送消息到获得回答的这个时间段像禁用发送按钮一样，禁止enter键盘事件或者解绑这个键盘事件，这个你们自己去完成，这里我不在多说（总要留点东西让你们自己去思考去感悟！）


### 完整代码



1
2
3
4
5
6
7
8

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】