分享一个使用 Vue.js 框架编写 ChatGPT 接口的简单示例：
2023-04-06 加入收藏
以下是使用 Vue.js 框架编写 ChatGPT 接口的简单示例：
安装 Vue.js 和 axios：
shCopy codenpm install vue axios
在 Vue.js 的入口文件
main.js中引入 axios 并设置默认的 API 基础 URL：jsCopy codeimport Vue from 'vue'import axios from 'axios'// 设置默认的 API 基础 URLaxios.defaults.baseURL = 'https://api.openai.com/v1/'Vue.config.productionTip = falsenew Vue({ render: h => h(App), }).$mount('#app')在 Vue.js 的组件中使用 axios 发送请求并处理响应：
vueCopy code<template> <div> <h1>ChatGPT 接口</h1> <div> <label for="input">输入：</label> <input id="input" type="text" v-model="inputText"> </div> <button @click="getResponse">发送</button> <div> <label for="output">输出：</label> <textarea id="output" v-model="outputText" readonly></textarea> </div> </div> </template> <script> import axios from 'axios' export default { data() { return { inputText: '', outputText: '' } }, methods: { getResponse() { axios.post('/engines/davinci-codex/completions', { prompt: this.inputText, max_tokens: 50 }, { headers: { 'Authorization': `Bearer ${YOUR_API_KEY}`, 'Content-Type': 'application/json' } }) .then(response => { this.outputText = response.data.choices[0].text }) .catch(error => { console.error(error) }) } } } </script>
其中，YOUR_API_KEY 应该被替换为您的 OpenAI API 密钥。这个示例使用了 OpenAI 的 GPT-3 模型来生成回复，您也可以根据需要替换为其他模型或服务。
需要注意的是，此示例仅为演示如何使用 Vue.js 和 axios 发送请求，实际应用中需要对输入进行验证和处理，以确保数据的安全性和可靠性。
