H5对接后端接口实现大模型对话可视化
大模型开发/技术交流
- 社区上线
- 开箱评测
2023.10.07963看过
前端使用vue3 setup+ vite+ axios
此记录只是简单流程，token是后端获取单次使用的，并没有存储前端，所以代码只做逻辑参考，并不能作为线上使用
使用这位博主的后端再次开发的：链接
一.创建项目
npm create vue@latest
然后看着来选就可以了，也可以都默认
Vue.js - The Progressive JavaScript Framework✔ Project name: … vue-project✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? … No / Yes✔ Add Vitest for Unit Testing? … No / Yes✔ Add an End-to-End Testing Solution? › No✔ Add ESLint for code quality? … No / Yes
cd进去就可以开始编辑前端项目了
二、编辑代码 对接后端接口
先安装axios库用于接口请求
npm i axios
直接修改app.vue
直接上代码！！
<script setup>import axios from "axios";import { ref } from "vue";const text=ref('');const responseText=ref('');const sendRequest=async ()=>{const {data}=await axios.get('http://127.0.0.1:3000/search',{params:{ text:text.value}})responseText.value=data}</script><template><div><div><label for="inputText">输入文本：</label><input v-model="text" type="text" id="inputText" /><button @click="sendRequest">发送</button></div><div><h2>ai回复：</h2><div>{{ responseText }}</div></div></div></template><style scoped>body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}#app {max-width: 600px;margin: 50px auto;background-color: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 8px;}input {padding: 10px;width: calc(100% - 20px);margin-bottom: 10px;}button {padding: 10px;background-color: #3498db;color: #fff;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;}button:hover {background-color: #2980b9;}h2 {color: #333;}div {border: 1px solid #ddd;padding: 10px;border-radius: 4px;margin-bottom: 20px;}</style>
四、展示效果
命令运行
npm run dev
浏览器测试，输入文本，下面即可回答内容
5.附加内容
如果发现接口请求出现了cores错误，后端添加下跨域请求即可
const cors = require('cors');app.use(cors());
评论
