前端新手小白的第一个AI全栈项目---AI聊天室
前言
ok,大家好。- ̗̀(๑ᵔ⌔ᵔ๑)最近也是想做自己的第一个前后端分离的项目,刚好最近学了一点AI接口的实现。想着用接口做一个自己的ai聊天室并且尝试一下全栈式开发。中间真的解决了很多问题,也是成功之后也是想要将实现过程分享一下,真的很有成就感!♡⸜(˶˃ ᵕ ˂˶)⸝♡,下面是我的功能实现后的截图:
项目流程真的很简单:
- 用户点击提交之后,将发送网络请求给服务器
- 服务器收到响应之后调用接口然后返回给前端
- 再渲染到页面上就完成啦
仔细想想为什么感觉没啥功能,自己却研究写了一个上午
算了,纠结无用。开始接下来的主题!下面是项目目录:
- 分为前端客户端client
- 后端为server服务器(简单介绍一下这些文件)
.env
是我用来保管我的openAI接口密钥的app.mjs
是主要的服务器功能模块chat.mjs
是我的openAI封装的功能模块
Client
客户端Client HTML-CSS
首先是聊天室的html
结构和css样式
设置:
jcode
客户端Client JS
客户端的js主要实现的功能就是
- 拿到用户输入的数据,发送给服务器端,
- 拿到返回的结果然后渲染。
因为调用接口返回结果中间需要2-3秒的等待时间,用户可能不知道已经发送过请求而疯狂点击发送按钮,我选择了让用户点击之后禁用按钮的点击,直到前端拿到了后端返回的结果后才可以再次点击发送。
jcode
Server
后端框架
这里我使用的是Koa框架,Koa 是一个现代化的、轻量级的 Node.js Web 应用框架。
下面是使用流程
- 创建一个Koa的Web服务对象
- 使用@koa/cors 中间件解决跨域问题
- 使用koa-router中间件来监听当前端口的网络请求
- 使用@koa/bodyparser 来解析请求头的内容
跨域问题
这里简单讲一下什么是跨域问题,跨域问题就是不同源网站进行跨源访问时触发的浏览器安全机制,叫做同源策略。所有要解决跨源就需要服务器进行请求设置,允许哪些网站可以访问。这里我使用@koa/cors来解决跨域问题。
Koa使用中间件是直接通过Web服务对象.use()就可以直接将中间件挂载在服务对象上,十分方便。
下面是我的端口监听
router.post('/ai', async ctx => {// es6 对象解构let { value } = ctx.request.body;try {// 这里的aiChat是我封装的ai接口const response = await aiChat(client, value);// 成功拿到数据就返回状态码200ctx.response.body = {status: 200,res: response};} catch (err) {// 失败就返回状态码500ctx.response.body = {status: 500,error: err.message}}
})
这里是我封装在chat.mjs的aiChat接口功能接口,这里使用的是es6的es module导出,
app.mjs也都是使用的import导入
export default async (client, prompt) => {// 文生图 AIGCconst response = await client.chat.completions.create({model: 'gpt-3.5-turbo', // 适合聊天的模型 很多种messages: [{role: 'user',content: prompt}],//只生成一条信息n: 1})// console.log(response.choices[0].message.content);return response.choices[0].message.content;
};
下面是我的完整app.mjs代码,点击
jcode
密钥的获取
这里当然不可能上传我的密钥啦,如果有小伙伴对我这个有兴趣想实现的话。可以通过下面这个国内的openai代理商拿到openai的密钥,第一次注册会免费送1$的token哦,足够了。- ̗̀(๑ᵔ⌔ᵔ๑)
网址:https://gpt302.saaslink.net/79WE5l
注册之后,打开这里
拿到api key之后就可以替换掉我内容里的这个位置,就可以啦~
结语
讲实话,以前只会一些基本的js和css。从来没有接触过全栈的开发方式,第一次做真的是焦头烂额,不过在成功之后真的很有成就感♡⸜(˶˃ ᵕ ˂˶)⸝♡,同时也希望这篇文章也能给和我有同样境地的小伙伴一些帮助。
最后,如果还喜欢这篇文章的话,就点个关注或者是赞吧。谢谢- ̗̀(๑ᵔ⌔ᵔ๑)
相关文章:

前端新手小白的第一个AI全栈项目---AI聊天室
前言 ok,大家好。- ̗̀(๑ᵔ⌔ᵔ๑)最近也是想做自己的第一个前后端分离的项目,刚好最近学了一点AI接口的实现。想着用接口做一个自己的ai聊天室并且尝试一下全栈式开发。中间真的解决了很多问题,也是成功之后也是想要将实现过程分享一下&a…...

金升阳电源被制裁,广州顶源电源模块可以完美替换
广州顶源电子科技股份有限公司,座落于国家高新技术开发区---广州科学城,是一家集研发、生产、销售及服务于一体的DC-DC,AC-DC电源的生产厂家。 公司通过了IATF16949汽车认证及ISO9001:2015质量管理体系认证。拥有专家级研发团队,产品研发经过…...

《数据赋能:一本书讲透数字化营销与运营》—— 从正确的数据观开始
基于数据打通的“全链路”营销是当下的“时髦”,应用它的前提是什么?深度营销和运营的关键数据如何获得?如何利用数据进行更精准的营销投放?如何利用数据优化投放的效果?如何促进消费者的转化,以及激活留存…...
JDK 24:Leyden
Project Leyden 发布了其首个早期版本(24-leyden2-8 2024/6/20)。初始版本专注于缩短 Java 应用程序的启动时间。 1.特点 提前编译 Java 方法,以便在应用程序在生产运行中启动时立即本地执行它们;提前解析常量池条目可以让 AOT 编译器生成更好的代码&a…...
对于图片转3d人脸方面的研究
1.一个开源的可以运行的项目(face3d/README.md at master yfeng95/face3d GitHub) 在配置好环境后,让我们一个一个py文件运行它(我将给出中文注释) 1)1_pipeline.py 将一个3d头像的mat文件转换为jpg…...
.NET C# 八股文 代码阅读(一)
.NET C# 八股文 代码阅读(一) 目录 .NET C# 八股文 代码阅读(一)1 两种获10000个数的方式,哪种效率更高?为什么?2 请说出以下代码AB谁先打印,AB打印的值分别为多少?3 关于…...

C++用Crow实现一个简单的Web程序,实现动态页面,向页面中输入数据并展示
Crow是一个轻量级、快速的C微框架,用于构建Web应用程序和RESTful API。 将处理前端页面的POST请求以添加数据的逻辑添加到 /submit 路由中,并添加了一个新的路由 / 用于返回包含输入框、按钮和表格的完整页面。当用户向表格添加数据时,JavaS…...

南信大尹志聪教授为一作在顶级综合性期刊《Natl. Sci. Rev.》发文:传统梅雨停摆,江南缘何不再多烟雨?
文章简介 论文名称:Traditional Meiyu–Baiu has been suspended by global warming 第一作者及单位:尹志聪(教授|南京信息工程大学大气科学学院) 通讯作者及单位:王会军(院士|南京信息工程大学大气科学学院) 文章发…...

程序员如何用ChatGPT解决常见编程问题:实例解析
引言 在现代编程的世界中,技术进步日新月异,程序员们面临着各种各样的挑战和问题。解决这些问题的过程中,找到合适的工具至关重要。ChatGPT作为一种先进的人工智能语言模型,能够帮助程序员迅速、高效地解决常见的编程问题。本文将…...

初识 SpringMVC,运行配置第一个Spring MVC 程序
1. 初识 SpringMVC,运行配置第一个Spring MVC 程序 文章目录 1. 初识 SpringMVC,运行配置第一个Spring MVC 程序1.1 什么是 MVC 2. Spring MVC 概述2.1 Spring MVC 的作用: 3. 运行配置第一个 Spring MVC 程序3.1 第一步:创建Mave…...

STM32F1+HAL库+FreeTOTS学习1——FreeRTOS入门
STM32F1HAL库FreeTOTS学习1——FreeRTOS入门 裸机开发与操作系统嵌入式操作系统简介FreeRTOS简介FreeRTOS的几个重要概念任务调度器任务状态状态列表 裸机开发与操作系统 在以往的嵌入式学习中,我们最常用的就是裸机开发,所谓裸机开发就是指在没有操作系…...

杭州代理记账报税全程托管专业实力全面指南
杭州代理记税报税服务可以为企业提供全程托管财务管理解决方案,确保企业的财务工作专业、高效、合规。以下是杭州代理记税报税服务全面指南: https://www.9733.cn/news/detail/185.html 一、代理记账报税服务的内容 基础服务: 每日记…...

PHP 界的扛把子 Swoole 异步通信利器
大家好,我是码农先森。 引言 我今天主要介绍的内容是包括但不仅限于 Swoole ,也有一部分 Go 语言的内容。 为什么要介绍 Swoole ? 先说一说背景吧,我们项目组之前要为《香港 01》开发一个积分系统的项目,这个系统的主要功能包…...

40.连接假死-空闲检测-发送心跳
连接假死情况 1.网络设备出现故障,例如网卡,机房等。底层的TCP连接已经断开,但应用程序没有感知到,仍然占着资源。 2.公网网络不稳定,出现丢包。若果连续出现丢包,这时现象就是客户端数据发不出去,服务端也一直收不到数据,就这么一直耗着。 3.应用程序线程阻塞,无法…...

hdfs高可用文件系统架构
1、整体架构 2、角色简介 2.1、namenode NameNode 是 HDFS 集群中的核心组件,负责管理文件系统的元数据、处理客户端请求、管理数据块、确保数据完整性和高可用性。由于其重要性,NameNode 的性能和可靠性直接影响整个 HDFS 集群的性能和可靠性。在生产…...

从官方源码精简出第1个FreeRTOS程序
一、下载官方源码 1、打开百度搜索freerots,找到官网:FreeRTOS官网 2、将源码解压到没有中文目录的路径下 二、删减目录 1、删除FreeRTOS-Plus和tools 2、删除FreeRTOS/Demo下除CORTEX_STM32F103_Keil外的所有文件 3、删除FreeRTOS\Source\portable下除RVDS和MemM…...

谷歌上搞下来的,无需付费,可以收藏!
在数字化时代,我们越来越依赖于智能设备来获取信息和知识。中国智谋App正是这样一款应用,它将中国古代的智慧与谋略书籍带入了我们的移动设备,让我们能够随时随地学习和领悟。而且提供文言文的原文和译文。 软件下载方式:谷歌上搞…...

宿主机无法通过ip连接wsl2解决方案
文章目录 原因排查网络模式win11防火墙关闭wsl ubuntu防火墙 如果之前能连接现在连接不上可以参考该方案 原因排查 网络模式win11防火墙(win11新增了Hyper-V防火墙)wsl2 ubuntu防火墙 网络模式 wsl2的默认网络模式是NAT,建议修改为镜像模式。在C:\Users\<User…...
Ruby编程语言学习
学习Ruby编程语言,你可以按照以下步骤进行: ### 1. 基础知识入门 #### 安装Ruby - 访问Ruby官网(https://www.ruby-lang.org/)下载适合你操作系统的版本。 - 对于Linux用户,可以使用包管理器安装。 #### 学习资源 -…...

Redis实战—基于setnx的分布式锁与Redisson
本博客为个人学习笔记,学习网站与详细见:黑马程序员Redis入门到实战 P56 - P63 目录 分布式锁介绍 基于SETNX的分布式锁 SETNX锁代码实现 修改业务代码 SETNX锁误删问题 SETNX锁原子性问题 Lua脚本 编写脚本 代码优化 总结 Redisson 前言…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...