• 💖 作者简介：大家好，我是阿牛，全栈领域优质创作者😜
• 📝 个人主页：馆主阿牛🔥
• 🎉 支持我：点赞👍+收藏⭐️+留言📝
• 📣 系列专栏：前端实用小demo🍁
• 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

自从去年11月份chatgpt出圈之后，他的热度就居高不减，也出现了很多人借助接口开发的国内版本，那么本篇博客就从前端的角度来看看前端如何实现类似chatgpt的对话功能！

源码在文末获取！

这一块比较简单，分析过chatgpt的页面的就会知道，他的页面布局方式是采用flex布局的，flex布局确实好用，那么我也是基于Bootsrap+jquery+flex布局完成了简易版的对话功能！主要有两个地方用到了flex布局！

flex布局一

其中align-items: flex-start;的作用就是让文字与图片顶部对齐！

flex布局二（重点）

首先，我要说的是这个输入框用的textarea，而不是input，区别在于，input输入的内容是不能换行的，但textarea文本框可以，但使用textarea的问题是，参数rows设置为一行，这个文本框的高度会很低，达不到chatgpt的那个页面要求，rows设置大一点或者这个文本框的高度给高一点会有一个问题就是输入时他的光标不会在文本框的高度中间，而是在第一行，我们是没法通过其他方式让输入光标垂直居中的，因此这也不符合chatgpt页面的要求，所以这确实是个值的学习的一点！看了chatgpt页面的做法后，我悟了，下面一张图来说明chatgpt是如何做的：

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

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

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

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

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

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

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

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

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

🏰系列专栏
👉flask框架快速入门