}
.ipt textarea {
resize: none;
overflow-y: auto;
border: none;
box-shadow: none;
}
.ipt textarea:focus{
border: none !important;
box-shadow: none !important;
}

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


### js部分


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

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

’ + message + ‘

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

’ + message + ‘

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

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

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

// 处理用户输入
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键盘事件或者解绑这个键盘事件，这个你们自己去完成，这里我不在多说（总要留点东西让你们自己去思考去感悟！）


### 完整代码

Chat with ChatGPT

});

这里面用到的layer.js就是一个弹窗组件，百度可以搜到，common.js是我自己对layer.js方法的封装，这个页面其实你不这两个js文件也行，因为整个页面只有下面的代码用到了弹窗：

if (message.length == 0){
common_ops.alert(“请输入内容！”)
return
}

其实简陋点，一个alert就搞定了！


## 结语


如果你觉得博主写的还不错的话，可以订阅下面的这个flask专栏，这是博主唯一的付费专栏，我做的这个页面也是最近项目的一部分，这个项目也是用flask做的，我会将他全部总结开源到这个flask专栏中。


【flask从入门到实战】专栏9.9火热订阅中，已包含两个项目，全站独一无二的脚手架搭建，直接复制简单无脑操作，项目结构类似Django，感兴趣的可以看看哦！



> 
> 🏰系列专栏  
>  👉[flask框架快速入门]( )
> 
### 最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。



学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。