Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二)

news2024/9/25 15:24:01

Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二)


参考微信小程序-小柠AI智能聊天,可自行先体验。

小程序二维码


根据上一节的小程序静态页面设计,需要从后端获取数据的主要4个点:

  1. 登录流程;
  2. 获取今日已提问次数;
  3. 获取聊天记录;
  4. 发起聊天和响应。

这样就是确定至少需要4个后端API,通过返回的数据做渲染显示。


登录流程

其中登录流程就是参考小程序官方图。

  1. 小程序先通过wx.login()获取code
  2. 请求后端登录API
  3. 后端通过appid, appsecret, code请求 https://api.weixin.qq.com/sns/jscode2session 获取用户唯一id的openid
  4. 通过openid封装token返回前端-》前端保存token,之后请求API带上,校验用。

在这里插入图片描述

登录这里会有个坑,就是在wx.login中使用异步请求后端API时候,如果这个登录逻辑放在app.js的小程序初始化加载onLaunch中,我们在index.js加载页面时候需要依赖使用登录token做一些处理,这个时候可能异步请求登录还没返回,就会导致获取到的token为空。

这里就需要使用new Promise监听异步操作成功后再处理index.js中相关依赖于token的逻辑。具体处理后续 登录实现章节 贴。


获取今日已提问次数和聊天记录

这两个则直接通过wx.request请求即可,具体实现也在后续章节。


发起gpt聊天和响应

这个就是整个小程序的核心内容了,这里会拆分两个API

第一个API: 请求验证是否可发起(次数够…),成功则追加当前发起内容到页面显示,失败则弹框提示;

第二个API: 验证通过后发起websocket连接,通过流模式响应后端返回,并将接受到的流内容做追加到页面显示。


总结,我们总共需要5个后端API,都会在之后单独的章节,实现具体的逻辑和流程

  1. 登录API
  2. 获取次数API
  3. 获取聊天记录API
  4. 请求发起聊天API
  5. 请求后端流模式响应API

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/854151.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

财税数字化时代,RPA在多大程度上为财务部门实现降本增效?

企业数字化转型,财务是一个重要的切入点。随着数字化业务不断展开,新的系统、流程和数据源被不断引入,财务部门面临的是不断暴增的对账、处理报表、审计等日常工作。 如此大的工作量,即使是经验丰富的资深财务,也难免…

无服务器、Rust,都是旧技术的二次创业!

原文标题:​​Serverless Is the New Timeshare​​,作者:Shai Almog 还记得大型机吗?无服务器就好比如:我们拥有这台机器,你来我这里租借。创新往往都是在踩在巨人肩膀上诞生! 分时度假是一种…

Maven基础总结

前言 Maven 是一个项目管理工具,可以对 Java 项目进行构建、依赖管理。 基本要求掌握 配置Maven环境直接查。 得会在IDEA创建Maven的java项目吧、会创建Maven的web项目吧、会创建多模块项目吧。 得会配置插件pligin、依赖dependency吧 一、Maven四大特性 1、…

利用Google Docs的评论功能投递钓鱼链接

情报背景 利用Google drive等可信云服务进行的网络钓鱼攻击活动日益增长,这种攻击手段利用了高可信度的云服务骗取受害者的信任,并且可以绕过基于域名的安全策略。 近期Avanan公司发现了一种新的邮件钓鱼方式,攻击者利用Google docs的评论功…

【CAS定制】定制化密码编码器--支持密码组合编码或加密 PasswordEncoder

CAS中,默认支持的PasswordEncoder只能通过一种密码算法进行编码或加密,但是日常场景经常存在组合编码的需求,这就需要我们去定制一种支持密码组合编码或加密的编码器。 文章目录 场景定制目标定制方案定制代码 场景 一般项目中有很多需要进行…

HTTP协议讲解

HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 HTTP的发展是由蒂姆伯纳斯-李于1989年在欧洲核…

贝锐蒲公英:智能组网助力企业智慧工地信息化建设

随着现代信息化技术的不断发展,为了让企业工地施工管理、监督更为高效、精准,及时发现并处理工地单位施工中的安全和质量问题,视频监控已成为“智慧工地”建设中不可或缺的重要环节。 视频监控系统主要通过安装摄像头对施工现场进行实时监控和…

RK3568蓝牙程序开发过程

1、搭建蓝牙开发环境 蓝牙开发可以使用C语言开发或python语言开发,使用的是蓝牙开发库为bluez库。 本文开发使用python语言开发,安装bluez库,可以使用pip install PyBluez来安装。 如果安装不上的话,可以使用sudo apt install pyt…

Springboot中拦截GET请求获取请求参数验证合法性

目录 目的 核心方法 完整代码 创建拦截器 注册拦截器 测试效果 目的 在Springboot中创建拦截器拦截所有GET类型请求,获取请求参数验证内容合法性防止SQL注入(该方法仅适用拦截GET类型请求,POST类型请求参数是在body中,所以下面…

ADB连接安卓手机提示unauthorized

近期使用airtest进行自动化测试时,因为需要连接手机和电脑端,所以在使用adb去连接本人的安卓手机vivo z5时,发现一直提示unauthorized。后来经过一系列方法尝试,最终得以解决。 问题描述: 用数据线将手机接入电脑端&…

数据分析 绘图工具

prism呢… 拼dd上看到卖prism的终身包 GraphPad Prism GraphPad Prism 就是为生物科研统计作图而生的一款数据处理绘图软件,它不仅能分析数据,还能快速作图,简直是科研人的福音! GraphPad 最新版本拥有最新的气泡图&#xff0…

Springboot中使用过滤器校验PSOT类型请求参数内容

目录 目的 实现步骤 完整代码 目的 在Springboot中创建过滤器,用来过滤所有POST类型请求并获取body中的参数进行校验内容是否合法;该方法仅适用于POST类型请求,因为POST和GET请求的参数位置不一样所以处理方式也不一样,如果想要…

恒盛策略:早盘A股三大指数表现分化 CRO概念板块逆势涨超6%

周三(8月9日),A股三大指数体现分化,到上午收盘,上证指数跌0.36%,报3249.02点;深证成指跌0.28%,创业板指涨0.24%;沪深两市合计成交额4550.78亿元,总体来看&…

DARPA-TC-engagement5-theia部分数据格式分析

转换出来的jsons数据主要分为四大类:Event、Subject、Object和Principal,分别代表系统事件、主体、客体和用户。各种大类中子类的数量,取决于CDM的版本。ShadeWatcher使用的是e3的数据,采用的是CDM18,而e5默认使用的是…

HTTP——十一、Web的攻击技术

HTTP 一、针对Web的攻击技术1、HTTP 不具备必要的安全功能2、在客户端即可篡改请求3、针对Web应用的攻击模式 二、因输出值转义不完全引发的安全漏洞1、跨站脚本攻击2、SQL 注入攻击3、OS命令注入攻击4、HTTP首部注入攻击5、邮件首部注入攻击6、目录遍历攻击7、远程文件包含漏洞…

Win10的日历软件中怎么新增日程安排及提醒?

在经济发展加速的时代,职场中做好时间管理的重要性不言而喻,而想要在工作中做好时间管理,关键在于按时完成每项日程安排。所以每天在使用win10电脑办公时新增日程安排并设置提醒不仅是非常有必要的,而且是提高效率和生活质量的重要…

Java课题笔记~ JavaWeb概述/开发基础

JavaWeb概述/开发基础 1.XML基础 (1)XML概述 (2)XML语法 (3)DTD约束 (4)Schema约束(XML Schema 比 DTD 更强大) 2.Web基础知识 Web是一个分布式的超媒…

Celery的基本使用

1.Celery介绍 1.1 Celery是什么? Celery是Python开发的简单、灵活可靠的、处理大量消息的分布式任务调度模块专注于实时处理的异步任务队列同时也支持任务调度 Celery本身不含消息服务,它使用第三方消息服务来传递任务,目前,Ce…

设置height:100%无效的原因以及两种解决方法

原因&#xff1a;我们知道在把盒子宽度自适应为浏览器窗口宽度&#xff0c;只需设置width:100%就可轻松解决问题&#xff0c;但是让盒子的高度自适应浏览窗口的高度并非那么容易&#xff0c;这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class"…

ElasticSearch:环境搭建步骤

1、拉取镜像 docker pull elasticsearch:7.4.0 2、创建容器 docker run -id --name elasticsearch -d --restartalways -p 9200:9200 -p 9300:9300 -v /usr/share/elasticsearch/plugins:/usr/share/elasticsearch/plugins -e "discovery.typesingle-node" elasti…