打造一个个人专属的Vue3与Node.js聊天机器人，类似ChatGPT体验
Vue3是一种流行的前端框架，Chat GPT是一个基于人工智能和自然语言处理技术的聊天机器人，它可以自动回复用户的消息并生成自然流畅的对话。在Vue3中使用Chat GPT，可以通过API调用来实现聊天机器人的功能，并且可以轻松地将它们集成到现有的Vue应用程序中。同时，Vue3还提供了许多其他功能，如响应式数据绑定、组件化开发等，使得Chat GPT的集成更加简单和高效。总之，Vue3和Chat GPT的结合为开发人员提供了一个强大的工具，可以快速构建出高质量、交互式的聊天应用程序。本文介绍了实现思路：
一、新建一个vue文件开发聊天界面
1.输入框
首先页面底部放一个输入框，右侧是一个发送按钮，输入框绑定msg用户输入内容，按钮绑定sendmsg点击事件。script中定义发送函数，发送函数中加入为空校验，发送空内容弹出一个提示信息。消息发送成功后将msg清空删除输入框中的内容。具体实现代码：
<div class="sendBox">
<el-input v-model="msg" placeholder="Please input" class="input-with-select">
<template #append>
<el-button @click="sendmsg" type="primary">发送</el-button>
</template>
</el-input>
</div>
<script setup>
import { aichat } from "@/api/xsrw.js"//消息发送接口
import { ElMessage } from 'element-plus'//引入element ui提示信息组件
const msg = ref("");//输入内容
// 发送消息
function sendmsg() {
if (msg.value.length < 1) return ElMessage({ message: '不能发送空消息！', type: 'error', })
aichat({ text: msg.value}).then(res => {
...
})
msg.value = '';//清空输入框
}
<script>
2.展示窗口
在输入框以外的部分对历史聊天记录进行展示。使用for循环将聊天记录循环展示出来，script中定义info数组存储聊天内容。sendmsg函数里的请求返回赋值给info。具体实现代码：
<template>
<div class="chatContent" ref="chatBox">
<ul>
<li v-for="(item, index) in info" :key="index" :class="[item.is_robot == 0 ? 'left' : 'right']">
<span>{{ item.content }}</span>
</li>
</ul>
</div>
</template>
<script setup>
const info = ref('');
...
aichat({ text: msg.value}).then(res => {
info.value = res.data;
})
...
<script>
以上代码综合展示
展示没问题了，但是太丑了，加点样式
3. 优化样式
给chatContent添加高度防止被输入框给遮挡住，添加overflow属性设置超出部分隐藏，ul、li分别设置不同的属性
.chatContent {
height: 735px;
overflow-x: hidden;
}
ul {
list-style: none;
padding: 20px;
margin: 0;
font-size: 14px;
line-height: 20px;
}
li.left {
margin-right: 20px;
}
li.left span {
display: inline-block;
border-radius: 0 15px 15px;
background-color: rgba(66, 196, 240, 0.1);
padding: 10px 15px;
}
li.right {
margin-left: 20px;
text-align: right;
}
li.right span {
display: inline-block;
border-radius: 15px 0 15px 15px;
background-color: rgba(73, 154, 41, 0.1);
padding: 10px 15px;
}
li+li {
margin-top: 20px;
}
.ql-container.ql-snow {
border: 0;
}
.ql-editor {
padding: 0;
}
添加样式后的效果，漂亮多了！
二、创建node服务
创建一个node服务，新建一个js文件引入axios访问openai代理地址,请求头设置请求类型必须为application/json，设置Authorization为Bearer加上申请的key，请求的数据类型为json格式，数据内容包含模型：model，聊天信息：messages。具体实现代码：
aiChat(reqs,res,next){
axios({
method: 'post',
headers:{
'Content-Type':'application/json',
'Authorization':'Bearer +‘申请的key’'
},
url: 'https://api.openai-proxy.com/v1/chat/completions',
data: {
"model": "gpt-3.5-turbo",
"messages": [{"role": 'user', "content": reqs.text}],
"temperature": 0.7
}
}).then(data=>{
return data；
}
}
三、总结
以上开发内容可以作为一个 小助手来使用了，但是还有很多地方需要优化来提高其性能和用户体验。下面是一些可能的优化方向：
- 改进 GPT 输出的质量，添加展示内容的格式；
- 加强输入验证，例如检查用户是否输入了有效数据或是否输入了不合适的内容；
- 将数据存入数据库，按提问人员进行区分；
- 提高响应速度，可以使用并发或异步执行来加快响应时间；
- 加强错误处理，例如处理 API 请求异常或服务器错误；
- 提供更好的用户界面，例如分页、主题、动画效果等；
总之，这个聊天机器人开发完成了，但它可以通过不断优化来变得更加智能、更加人性化、更加灵活。希望这篇文章对想要自己开发GPT聊天机器人的人有所启发。