ChatGPT二次开发

起凡大约 4 分钟

ChatGPT-Assistant

项目介绍

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

自我介绍

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

主要功能

登录注册
用户sa-token管理用户的session。
在线聊天
用户在聊天框输入内容并发送给后端，后端将请求转发到Open AI的Chat GPT接口，返回数据后通过WebSocket推送给用户。

项目运行

clone仓库

git clone https://github.com/qifan777/chatgpt-assistant.git

目录介绍

bom 依赖管理
chatgpt-assistant-client vue客户端
- src
  - api 存放调用后端的接口
  - assets 静态资源图片等
  - components 通用的组件
  - router 路由
  - stores pinia状态管理
  - views 页面
    - home
      - components home页面使用的私有组件
      - HomeView.vue home页面
chatgpt-assistant-server java核心代码
infrastructure 基础设施
- infrastructure-common 通用的类
- infrastructure-generator 代码生成器
  - generator-core 注解定义
  - generator-processor 生成器逻辑
- infrastructure-security 通用登录认证拦截器

环境安装

jdk 17

mongodb

docker run -d \
  --name mongo \
  -e MONGO_INITDB_ROOT_USERNAME=root \
  -e MONGO_INITDB_ROOT_PASSWORD=123456 \
  -p 27017:27017 \
  mongo:6.0.5-jammy

node18

运行

前端

vscode/webstorm导入chatgpt-assistant-client
运行命令
```
npm install
npm run dev
```

后端

idea 导入chatgpt-assistant整个文件夹
mvn install
运行chatgpt-assistant-server下的Application。

第一期

第二期

本期内容实现了登陆了功能。
实现的逻辑分下面几个步骤

代码生成器生成controller，service，repository，mapper，dto。
编写login接口接收用户名和密码。
login处理逻辑中调用mongoTemplate查询用户名是否存在不存在则创建一个用户，密码使用BCrypt加密。最后调用sa-token发放token给用户。
后端使用idea请求测试工具测试接口和idea中连接mongodb。
在前端复制生成的type定义和api接口，在登录界面中发起login请求。需要在vite中配置转发前端的请求到后端。登录成功在浏览器中存储token并跳转到首页。

第三期

本期内容实现了认证拦截Starter，统一异常处理，统一异常返回。
在springboot3中的starter有所变化。现在需要在
classpath:META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports
中声明需要引入的configuration。在每个configuration中可以写一些判断条件来确定是否要被引入spring容器中。

在统一异常拦截中我们拦截到了NotLoginException，并将改异常转成我们系统的统一返回结果+自定义的异常编码通知前端。前端可以根据异常编码知道用户此时的状态。

第四期

本期实现内容有

页面的统一页头。通过在index页面中添加子路由的形式，使得所有的子路由都获得夫路由的样式即index页面的样式。因此我们首先在index页面中写上页头的样式然后在index路由下配置子路由。
页面切换的过度效果。在vue的官方文档中有介绍<transition/>组件的用法。页面的过度有进入页面时从无到有的过程，以及离开页面时从有到无的过程。两个阶段四个过程。通过css样式来调整过渡的效果

第五期

菜单子路由跳转。鼠标点击左侧的菜单切换激活状态并且右侧内容随之改变。
在首页获取个人信息存储到pinia全局状态管理。然后在个人信息界面从全局状态中加载用户信息。
编辑用户信息时上传头像到后端，后端再上传到阿里云oss返回url结果给前端。

第六期

学习如何使用dto。不同的dto对应不同的场景，有效的将原理集中在一个类上的复杂逻辑分解到各个dto。
自定义实体类在dto直接的映射，不同的场景同一个字段的校验逻辑或者显示内容不同。
前端部分深入理解路由实现路由到页面的props传参。

第七期

聊天会话和聊天消息的实体类设计，一个聊天会话包含多条聊天消息。聊天会话中的创建用户使用@CreatedBy 自动在创建时设置当前用户的信息。
聊天会话通过自定义关联mongoDB查询得到属于该聊天会话下的消息。
使用MapStruct解决实体类之间的循环依赖。
spring websocket的接入，并配置了Stomp协议。开箱即用的消息发送和消息转发功能。并配置了从http升级到websocket的握手，根据http请求头中的cookie或者token获取当前登录的用户信息。

ChatGPT二次开发

# ChatGPT-Assistant

# 项目介绍

# 自我介绍

# 主要功能

# 项目运行

# clone仓库

# 目录介绍

# 环境安装

# 运行

# 第一期

# 第二期

# 第三期

# 第四期

# 第五期

# 第六期

# 第七期