VUE对接deepseekAPI调用方式

 更新时间:2025年01月24日 09:04:49   作者:小嘟嚷ovo  
文章介绍了如何在Vue项目中对接DeepSeek API,包括在开放平台注册账号申请APIKey、安装axios库、创建API调用函数以及在Vue组件中调用该函数

VUE对接deepseekAPI调用

1.先去开放平台注册账号申请api key

开放平台:https://platform.deepseek.com/api_keys

2.你的项目需要有发送请求的axios或者自己写

npm install axios
# 或
yarn add axios

3.创建 API 调用函数

在 Vue 项目中,通常会将 API 调用的逻辑封装到一个单独的文件中,例如 src/api/deepseek.js

关于其中 /your-endpoint-path 是需要你自己去api文档中查看的,文档具体地方在最后面。

import axios from 'axios';
 
const DEEPSEEK_API_URL = 'https://api.deepseek.com'; // 实际的 DeepSeek API 地址
const DEEPSEEK_API_KEY = 'your-api-key'; // 替换为你的 DeepSeek API Key
 
// 创建 axios 实例
const deepseekClient = axios.create({
  baseURL: DEEPSEEK_API_URL,
  headers: {
    'Authorization': `Bearer ${DEEPSEEK_API_KEY}`,
    'Content-Type': 'application/json',
  },
});
 
/**
 * 调用 DeepSeek API 示例
 * @param {Object} data 请求参数
 * @returns {Promise} API 响应
 */
export const callDeepSeekAPI = async (data) => {
  try {
    const response = await deepseekClient.post('/your-endpoint-path', data); // 替换为实际的 API 路径
    return response.data;
  } catch (error) {
    console.error('DeepSeek API 调用失败:', error);
    throw error;
  }
};

在你的 Vue 组件中,可以调用上面封装的 callDeepSeekAPI 函数。

<template>
  <div>
    <h1>DeepSeek API 调用示例</h1>
    <button @click="fetchData">调用 DeepSeek API</button>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <pre>{
  
  { responseData }}</pre>
    </div>
  </div>
</template>
 
<script>
import { callDeepSeekAPI } from '@/api/deepseek'; // 导入封装的 API 函数
 
export default {
  data() {
    return {
      loading: false,
      responseData: null,
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const data = {
          // 替换为实际的请求参数
          prompt: '你好,DeepSeek!',
          max_tokens: 50,
        };
        this.responseData = await callDeepSeekAPI(data);
      } catch (error) {
        console.error('API 调用失败:', error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
 
<style scoped>
pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
}
</style>

文档:对话补全 | DeepSeek API Docs

这个文档的url是

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3获取响应式数据的四种方法

    Vue3获取响应式数据的四种方法

    Vue 3 引入了一个全新的响应式系统,其中最核心的就是 reactive 和 ref,它们是实现响应式数据的基础,用于创建可以自动跟踪变化并更新视图的对象和变量,本文介绍了Vue3获取响应式数据的四种方法,需要的朋友可以参考下
    2024-08-08
  • Vue数据增删改查与表单验证的实现流程介绍

    Vue数据增删改查与表单验证的实现流程介绍

    这篇文章主要介绍了Vue数据增删改查与表单验证的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-10-10
  • 详解Vue + Vuex 如何使用 vm.$nextTick

    详解Vue + Vuex 如何使用 vm.$nextTick

    这篇文章主要介绍了详解Vue + Vuex 如何使用 vm.$nextTick,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue微信分享 vue实现当前页面分享其他页面

    vue微信分享 vue实现当前页面分享其他页面

    这篇文章主要为大家详细介绍了vue微信分享功能,vue实现当前页面分享其他页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 利用nginx部署vue项目的全过程

    利用nginx部署vue项目的全过程

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来,下面这篇文章主要给大家介绍了关于利用nginx部署vue项目的相关资料,需要的朋友可以参考下
    2022-03-03
  • Vue3项目实现前端导出Excel的示例代码

    Vue3项目实现前端导出Excel的示例代码

    这篇文章主要介绍了Vue3项目实现前端导出Excel的示例,在vue3的项目中导出Excel表格的功能,可以借助xlsx库来实现,下面是详细的操作步骤,需要的朋友可以参考下
    2025-01-01
  • vue中如何动态设置css样式的hover

    vue中如何动态设置css样式的hover

    这篇文章主要介绍了vue中如何动态设置css样式的hover,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3利用自定义ref实现防抖功能

    Vue3利用自定义ref实现防抖功能

    在Vue3中,ref提供了访问组件内DOM元素和子组件实例的方法,防抖是一种限制函数调用频率的方法,即在一定时间内多次触发同一个函数,只执行最后一次触发的函数,本文将给大家介绍了Vue3如何利用自定义ref实现防抖,需要的朋友可以参考下
    2024-05-05
  • vue-cli4.5.x快速搭建项目

    vue-cli4.5.x快速搭建项目

    vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。本文介绍了vue-cli4.5.x快速搭建项目,感兴趣的可以了解一下
    2021-05-05
  • 详解如何使用Vue-PDF在应用中嵌入PDF文档

    详解如何使用Vue-PDF在应用中嵌入PDF文档

    在现代Web应用中,PDF文档的使用非常普遍,因为它可以在各种设备和操作系统上保持一致的外观和格式,本文我们就来探讨一下如何在Vue.js应用中使用vue-pdf库嵌入PDF文档吧
    2023-08-08

最新评论