正文

vue調(diào)用ChatGPT的API（vue 調(diào)用api）

發(fā)布時(shí)間：2023-05-23 16:36:01 稿源：創(chuàng)意嶺閱讀： 68

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于vue調(diào)用ChatGPT的API的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，有小程序、在線網(wǎng)頁版、PC客戶端和批量生成器

官網(wǎng)：https://ai.de1919.com。

本文目錄:

vue3頁面關(guān)閉事件
chatgpt風(fēng)格模型為什么老是加載失??？
手機(jī)端怎么使用chatapi

vue調(diào)用ChatGPT的API（vue 調(diào)用api）

vue3頁面關(guān)閉事件

node.js
VUE監(jiān)聽頁面刷新和關(guān)閉事件

大偉歐巴
原創(chuàng)
關(guān)注
1點(diǎn)贊·3154人閱讀
背景：公司有一個(gè)數(shù)據(jù)看板，，需求是要統(tǒng)計(jì)看板有多少人看過，，每個(gè)人停留的曝光時(shí)間
使用技術(shù)：目前使用的技術(shù)是后端Springboot 權(quán)限用的是SpringSecurity，前端頁面是
Vue+Element，公司看板的使用人大多利用谷歌瀏覽器查看。。
前端請(qǐng)求權(quán)限流程：用戶登陸后會(huì)把用戶的信息加密處理放進(jìn)cookies，，然后會(huì)用vue的攔截器，，攔截要發(fā)送的請(qǐng)求，，并且在每個(gè)請(qǐng)求的headers里面帶上Cookies里面的用戶加密信息
// 創(chuàng)建axios實(shí)例
const service = axios.create({
baseURL: xxx // api 的 base_url
timeout: 2000 // 請(qǐng)求超時(shí)時(shí)間
})
// request攔截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers['AESAuthor'] = 'AESAES ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token
}
config.headers['Content-Type'] = 'application/json'
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
登錄后復(fù)制

就像Java中的WebMvcConfigurer，可以通過這個(gè)實(shí)現(xiàn)跨域的處理，或者單獨(dú)針對(duì)某一路徑的請(qǐng)求特殊處理
第一個(gè)重點(diǎn)?。?！(這個(gè)問題后面會(huì)講到)
線上環(huán)境：在服務(wù)器上面運(yùn)行項(xiàng)目是通過nginx訪問vue的頁面，并攔截vue發(fā)送的請(qǐng)求轉(zhuǎn)發(fā)到后端服務(wù)
本地環(huán)境：vue通過nodejs轉(zhuǎn)發(fā)請(qǐng)求到后端
本地環(huán)境處理：vue的頁面請(qǐng)求是(例子) http://110.110.110.110:1000/api/url
但實(shí)際的后端接口路徑應(yīng)該是：http://110.110.110.110:1001/api/url
//nginx配置規(guī)則
location / { //頁面請(qǐng)求走這個(gè)路徑
root /data/app/web/xxx-xxx-xxx-xxx/dist;
try_files $uri $uri/ /index.html =404;
index index.html index.htm;
}
location /api { //api請(qǐng)求走這個(gè)路徑
if ($request_uri ~* "WhchatUser/sendCode") {
return 403;
}
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Fix the "It appears that your reverse proxy set up is broken" error.
proxy_pass http://110.110.110.110:1001/api;
proxy_read_timeout 90;
}
登錄后復(fù)制

請(qǐng)求鏈路：通過vue的mounted事件創(chuàng)建一個(gè)createThisTime用以記錄用戶打開頁面的時(shí)間，通過js的 beforeunload 和 unload 事件可以監(jiān)聽到頁面的刷新和關(guān)閉事件，，在頁面關(guān)閉的時(shí)候發(fā)送HTTP請(qǐng)求到后端，帶上(1)用戶的加密信息做鑒權(quán)，(2)當(dāng)前時(shí)間 -createThisTime= 用戶停留在這個(gè)頁面的曝光時(shí)間
后端接口接收到請(qǐng)求之后往數(shù)據(jù)庫插入一條數(shù)據(jù)。至此整個(gè)鏈路完成。
解決此需求的頁面加載時(shí)只執(zhí)行 onload 事件
頁面關(guān)閉時(shí)，先 onbeforeunload 事件，再 onunload 事件
頁面刷新時(shí)先執(zhí)行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件
直接上代碼了！??！
data() { //第一步初始化createTime參數(shù)
return {
createThisTime：0, //mounted時(shí)期賦值，用于統(tǒng)計(jì)曝光時(shí)間
_beforeUnload_time: 0, //beforeunload時(shí)期賦值，在unload時(shí)期用于判斷是頁面關(guān)閉還是刷新
_gap_time: 0, //unload時(shí)期賦值，在unload時(shí)期用于判斷是頁面關(guān)閉還是刷新
is_fireFox: false //判斷是否是火狐瀏覽器，火狐瀏覽器的beforeunload就是關(guān)閉
}
}
mounted() {
//賦值
this.is_fireFox = navigator.userAgent.indexOf("Firefox")>-1
this.createThisTime = new Date().getTime()
this._beforeUnload_time = 0
this._gap_time= 0

//!!!!創(chuàng)建監(jiān)聽事件(ListenerEvent)!!!!
window.addEventListener("beforeunload", e => {this.beforeunloadFn(e)});
window.addEventListener("unload", e => {this.unloadFn(e)});
}
//?。?！核心，你夾緊點(diǎn)，我要來了?。?！
methods(){
beforeunloadFn(e){
//對(duì)_beforeUnload_time進(jìn)行賦值在unloadFn時(shí)期與_gap_time進(jìn)行差距計(jì)算判斷刷新還是關(guān)閉
this._beforeUnload_time = new Date().getTime();
//統(tǒng)計(jì)曝光時(shí)間，用于火狐瀏覽器的關(guān)閉
let waitTime = this._beforeUnload_time - this.createThisTime;
if(this.is_fireFox) {//火狐瀏覽器執(zhí)行beforeunloadFn方法代表關(guān)閉頁面
this.countKanbanData(waitTime)
}
},
unloadFn(e){
//統(tǒng)計(jì)曝光時(shí)間
let waitTime = new Date().getTime() - this.createThisTime;
//計(jì)算unload事件和beforeunload事件執(zhí)行間隔，，用于判斷是關(guān)閉還是刷新
this._gap_time = new Date().getTime() - this._beforeUnload_time;

//第二個(gè)重點(diǎn)！??！為何刷新頁面的時(shí)候也要發(fā)送請(qǐng)求？
if(this._gap_time < 5){ //關(guān)閉頁面
this.countKanbanData(waitTime)
} else { //刷新頁面
this.countKanbanData(waitTime)
}
},
destroyed() {
//remove監(jiān)聽事件
window.removeEventListener("beforeunload", e => {this.beforeunloadFn(e)});
window.removeEventListener("unload", e => {this.unloadFn(e)});
this._beforeUnload_time = 0
this._gap_time = 0
}
}
登錄后復(fù)制

//?。?！再夾緊點(diǎn)，努力努力快到了?。。?br/>大家執(zhí)行到這一步，基本流程沒啥問題了，然后測試的時(shí)候會(huì)感覺，請(qǐng)求好像發(fā)出去了但感覺好像又沒法發(fā)出去。。時(shí)靈時(shí)不靈的，主要原因是什么呢？
真相！?。。簐ue發(fā)送請(qǐng)求是異步的，這個(gè)請(qǐng)求的的卻卻是在發(fā)送，但是頁面關(guān)閉的時(shí)候卸載的太快了，這個(gè)請(qǐng)求可能還沒發(fā)送出去頁面就卸載了，導(dǎo)致發(fā)射失敗。好嘛，原因找到了，原來vue是個(gè)秒男。
那怎么解決呢？
1.寫個(gè)foreach，，拖延vue卸載的事件，給異步的http發(fā)射時(shí)間，俗話就是吃點(diǎn)藥
2.通過div的img標(biāo)簽，，原理也是延遲vue的卸載事件。
這兩種方法會(huì)導(dǎo)致客人的體驗(yàn)感賊差，，像我這種粗又硬肯定是不屑使用的。
一番查找之后我有了個(gè)更好的辦法。因?yàn)関ue發(fā)送是異步的而且頁面卸載的事件確實(shí)很快，關(guān)閉事件一般都是 0-5毫秒之間(this._gap_time<5)。。名副其實(shí)的秒男~。所以我們不一定非要vue去發(fā)送請(qǐng)求，，可以讓瀏覽器去異步的發(fā)送請(qǐng)求。
//大家準(zhǔn)備好，我要沖刺了//
3.navigator.sendBeacon 超鏈接是官方文檔
這個(gè)方法的作用就是，，將vue發(fā)送的任務(wù)，，交給瀏覽器的任務(wù)隊(duì)列去執(zhí)行，方法也是異步的，vue的頁面卸載是不會(huì)影響到瀏覽器任務(wù)的執(zhí)行的。而且該方法也不會(huì)對(duì)vue的卸載有影響，用戶體驗(yàn)感賊好，說不定還會(huì)給點(diǎn)小費(fèi)。
但是~，這個(gè)方法會(huì)有些小的限制
3.1這個(gè)方法必須是post，我們可以嘗試?yán)米詭У腷log類型去傳毒參數(shù)，后端可以直接通過@RequestBody標(biāo)簽接收參數(shù)，反正我們前后端交互最常用的格式就是json
3.2.這個(gè)方法的headers只能設(shè)置content_type，也就是說無法把鑒權(quán)用的token放進(jìn)headers里面，無法放進(jìn)headers里面就直接放到參數(shù)中傳唄，，反正我抓包也可以看到headers里面的內(nèi)容，加密主要還是要靠aes，想防篡改的話那就加上時(shí)間戳再M(fèi)D5。這些就不討論了
直接上代碼
countKanbanData(waitTime){
//判斷瀏覽器是否支持navigator.sendBeacon，，大部分的瀏覽器都支持
if (!navigator.sendBeacon) return;

//參數(shù)
let body = {
waitTime: waitTime,
tokenStr: getToken() //headrs中無法記錄，，當(dāng)參數(shù)傳入再解析
};
let headers = {
type: 'application/json; charset=UTF-8'
};
let blob = new Blob([JSON.stringify(body)], headers);
//線上或者測試因?yàn)橛玫膎ginx做的代理所以這么寫
console.log("sendBeacon ", navigator.sendBeacon((this.currentEnv + 'openapi/countKanbanData'), blob));
//本地dev 通過node
// console.log("sendBeacon ", navigator.sendBeacon('openapi/countKanbanData', blob));
}
登錄后復(fù)制

這三種方法我寫的比較簡單，，我找了個(gè)更加詳細(xì)的文章大家可以細(xì)看
方法鏈接
開始填坑了~~~
上文我提了兩個(gè)重點(diǎn)問題，，這兩個(gè)如果不特殊處理的話會(huì)有一定的bug
4.第一個(gè)重點(diǎn)問題：上文提到了，我本地開發(fā)的環(huán)境和線上的環(huán)境是不一樣的。。
本地通過node做代理如果是api的請(qǐng)求那么攔截器會(huì)攔截請(qǐng)求并且填充ip+port，那么此時(shí)的api調(diào)用的方式為
navigator.sendBeacon('openapi/countKanbanData', blob)
登錄后復(fù)制
此時(shí)不需要寫全路徑
如果是線上的話，那么是由nginx去做代理，頁面和api的請(qǐng)求由ngxin去攔截管理
此時(shí)需要寫全路徑，不然這個(gè)請(qǐng)求的url是不完整的
navigator.sendBeacon('http://110.110.110.110:1000/openapi/countKanbanData', blob)
登錄后復(fù)制
5.第二個(gè)重點(diǎn)問題：為毛不論是刷新還是關(guān)閉都需要發(fā)送一次請(qǐng)求并記錄
不論是刷新和關(guān)閉都記錄
5.1 if close 此時(shí)waitTime是準(zhǔn)確的需要記錄
5.2 if flush 因?yàn)橛脩?點(diǎn)擊瀏覽器的刷新按鈕) 或者 (ctrl+R) 或者 (通過網(wǎng)址再次鍵入) 此時(shí)都會(huì)將mounted中的createThisTime 刷新
如果不記錄的話會(huì)導(dǎo)致有部分停留時(shí)間被刷掉而每次都記錄的話只會(huì)將此次的waitTime分割成多條

vue調(diào)用ChatGPT的API（vue 調(diào)用api）

chatgpt風(fēng)格模型為什么老是加載失??？

如果您使用的是ChatGPT風(fēng)格模型的在線API服務(wù)，可能因?yàn)橐韵聨讉€(gè)原因?qū)е滤?jīng)常加載失?。?span style="display:none">QPX創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計(jì)、營銷策劃公司

服務(wù)器問題：API服務(wù)端可能出現(xiàn)了服務(wù)器故障或維護(hù)等問題，導(dǎo)致您無法正常連接服務(wù)。這種情況下，您可以稍后再次嘗試連接，或聯(lián)系A(chǔ)PI服務(wù)提供商獲得更多信息。

請(qǐng)求過于頻繁：如果您發(fā)送了過多的請(qǐng)求，API服務(wù)可能會(huì)對(duì)您的IP地址進(jìn)行限制，從而導(dǎo)致服務(wù)暫時(shí)不可用。在這種情況下，您需要調(diào)整請(qǐng)求頻率，并等待一段時(shí)間后再次嘗試連接API服務(wù)。

配置問題：如果您在使用API服務(wù)時(shí)遇到了配置問題，比如未正確設(shè)置API密鑰或參數(shù)等，可能會(huì)導(dǎo)致服務(wù)無法正常啟動(dòng)或提供數(shù)據(jù)。在這種情況下，您需要仔細(xì)檢查您的配置，并按照API服務(wù)提供商的指導(dǎo)進(jìn)行設(shè)置。

以上是我列舉的一些可能導(dǎo)致ChatGPT風(fēng)格模型加載失敗的原因，請(qǐng)根據(jù)具體情況進(jìn)行排查和處理。如果問題依然存在，您可以與API服務(wù)提供商聯(lián)系尋求幫助。

手機(jī)端怎么使用chatapi

1、在手機(jī)端上，可以使用ChatAPI來搭建一個(gè)聊天服務(wù)。下載ChatAPI應(yīng)用程序，安裝它并完成初始設(shè)置。
2、進(jìn)入應(yīng)用，創(chuàng)建一個(gè)新的聊天服務(wù)，并綁定一個(gè)唯一的賬號(hào)。
3、可以設(shè)置服務(wù)的聊天室，添加新的朋友，群聊，發(fā)送文字、圖片、語音等。
4、可以設(shè)置特殊功能，如聊天記錄查詢，新消息提醒，消息置頂，自定義消息等。
5、設(shè)置完畢后，即可使用ChatAPI在手機(jī)端創(chuàng)建聊天服務(wù)，與好友進(jìn)行聊天交流。

以上就是關(guān)于vue調(diào)用ChatGPT的API相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。