Vue

现在我们开始在vite上加入vue框架。vue我就不多介绍了相信大家都懂。

安装

插件安装

在 vscode 插件市场中搜索Vue Volar extension Pack

依赖安装

# 运行时依赖
npm i vue
# vue语法转html+js+css
npm i @vitejs/plugin-vue -D

第十期 消息发送和markdown显示消息记录

本期内容

1. 消息发送和消息订阅
2. 等待回复的加载动画（animation+ @keyframes）
3. markdown 格式消息展示
4. 消息列表切换过渡（<transition-group></transition-group>）

代码实现

等待加载动画

当用户发送完消息等待 ChatGPT 回复的过程中有一些延迟，我们需要写一个文字加载的动画告知用户等待回复。

第九期 Vue3/ElementUI Plus 实现聊天面板

本期内容

详细讲述布局划分，组件抽取，一步步实现下面的结果图。左侧蓝色区域是会话列表，右侧是消息记录。蓝色区域内的一个个小卡片是聊天会话组件，在组件内定义了相关的交互，删除，点击，鼠标悬浮。

1. 点击左侧的会话，右侧的内容也会随之发生改变。
2. 鼠标放在会话上会弹出删除按钮，点击可以发起删除请求同时发送事件从会话列表中剔除该会话。
3. 点击新地聊天可以新增会话。
4. 点击右上角的修改按钮可以修改会话名称。

第八期 Stream 请求 ChatGPT/WebSocket 推送响应

本期内容

1. 使用 Websocket Stomp 协议配合@MessageMapping和@Payload 开放消息接口，和接收 JSON 请求体。
2. 实现私有订阅，服务器将请求的结果响应给对应的用户，而不是广播给所有用户。
3. 使用 Proxy 将请求转发给 OpenAI。
4. 对代码进行逻辑分层，让代码更清晰。

代码实现

1. WebsocketController 接收消息

ChatGPT-Assistant

项目介绍

本次项目是基于ChatGPT的二次开发网站，旨在实现在线聊天的功能。
使用的技术有前端框架Vue3、TypeScript和ElementUI以及后端技术SpringBoot、MongoDB、Spring Data MongoDB和Spring WebSocket。

自我介绍

我是起凡，一名全栈程序员，刚刚毕业于华侨大学。主要技术栈后端SpringBoot,JPA(
Hibernate), MongoDB, Mybatis, SQL等。前端Vue3, Typescript, Taro小程序, Uni-App等。