首页 > 其他分享 >前端调取KimiAPI实现,快来看看

前端调取KimiAPI实现,快来看看

时间:2024-09-08 20:24:11浏览次数:8  
标签:axios const KimiAPI 前端 content api displayText ref 调取

准备阶段

首先我们先登录Moonshot AI平台,获取我们所需要的Apikey

这里可以注册一个新的APIKEY,而且是免费版的,并且可以看到使用的次数。

 

 代码阶段

HTML部分

<template>
  <div>
    <div >
      <input type="text" v-model="textcontent" placeholder="输入你的问题" />
      <button @click="handleClick">开搜!</button>
    </div>
    <div >
      <h5>{{ displayText }}</h5>
    </div>
  </div>
</template>

Vue代码

<script setup>
import axios from "axios";
import { ref } from "vue";
const apiKey = ref("这里我先删除了,小伙伴们可以写自己的");
const textcontent = ref("");
const displayText = ref("");

// Kimi方法
const callMoonShot = async (content) => {
  //定义api地址
  const url = "https://api.moonshot.cn/v1/chat/completions";  // post
  //参数
  const params = {
    model: "moonshot-v1-8k",
      messages: [
      {
        role: "user",
        content: content,
      },
    ],
    temperature: 0.3,
  };
  try {
    const response = await axios.post(url, params, {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${apiKey.value}`,
      },
    });
    const content = response.data.choices[0].message.content;
    return content;
  } catch (error) {
    console.error("调用api报错:", error);
    return null; 
  }
};
// 其他方法
const handleClick = () => {
  callMoonShot(textcontent.value).then((result) => {
    if (result) {
      // 使用结果,例如显示在页面上
      displayText.value = result;
    }
  });
};
</script>

 好了这样就可以实现调用了,当然我这里只是实现了一个简单的效用,具体代码简洁性不是很高,小伙伴们可以后续在更改。

具体的开发文档也可以参考这里:Moonshot AI 开放平台

标签:axios,const,KimiAPI,前端,content,api,displayText,ref,调取
From: https://blog.csdn.net/weixin_51943308/article/details/142032176

相关文章

  • 【H2O2|全栈】关于VS code你不得不知道的一些事(一)【前端 · 编辑器使用】
    目录VScode便捷使用(一)【随笔】前言插件在哪里下载插件?中文简体(汉化包)Markdown文件编辑HTML快速添加双标签HTML快速修改双标签WEB网页编辑效果实时预览 WEB网页快速浏览器打开WEB网页编辑器服务端口打开 浏览器启动插件(两个)本期汇总预告和回顾后话VScode......
  • 前端架构到底是什么意思?底层原理是什么?
    前端架构的定义前端架构是指在前端开发中,设计和组织应用程序的基本结构和组件之间的关系的方法和原则。它涉及到如何组织代码、管理数据、处理业务逻辑以及实现用户界面等方面。前端架构的目的是提高开发效率、代码可维护性、项目的可扩展性以及优化应用性能。前端架构的底层......
  • 在前端架构中,数据流和状态管理是非常重要的部分
    在前端架构中,数据流和状态管理确实是至关重要的部分,它们对于构建高效、可维护且可扩展的前端应用具有深远的影响。数据流定义:数据流指的是数据在前端应用程序中流动的方向和方式。它描述了数据从源头(如用户输入、API请求等)到最终展示(如页面渲染)的整个过程。底层原理:单向数......
  • Vue2 - 详细实现聊天室IM即时通讯及聊天界面,支持发送图片视频、消息已读未读等,集成mqt
    前言如果您需要Vue3版本,请访问在vue2|nuxt2项目开发中,详解手机移动端H5网页在线1v1聊天功能(仿腾讯云IM功能),技术栈为MQTT通讯协议+后端Node服务端+数据库设计+vue前端聊天界面,超详细前后端完整流程及示例源代码,vue2聊天即时通讯IM实时接收和发送消息,可发送文字、图......
  • 前端框架有哪些?以及每种框架的详细介绍
    目录前言1.React2.Vue.js3.Angular4.Bootstrap5.Foundation总结前言前端框架是Web开发中不可或缺的工具,它们为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。当前,前端框架种类繁多,其中一些最受欢迎的框架包括React、Vue.js、Angular、Boots......
  • SpringBoot集成WebSocket实现后端向前端推送数据
    SpringBoot集成WebSocket实现后端向前端推送数据这里最好了解一定websocket参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications在此之前可以了解一下【轮询(Polling)、长轮询(LongPolling)、服务器发送事件(Server......
  • 前端必知必会-CSS 分页
    文章目录CSS分页简单分页活动和可悬停分页圆角活动和可悬停按钮可悬停过渡效果带边框的分页圆角边框链接之间的空间分页大小居中分页总结CSS分页简单分页如果您的网站有很多页面,您可能希望为每个页面添加某种分页:示例.pagination{display:inline-block;}......
  • 前端必知必会-CSS 按钮
    文章目录CSS按钮Buttons基本按钮样式按钮颜色按钮大小圆角按钮彩色按钮边框可悬停按钮阴影按钮已禁用按钮按钮宽度按钮组带边框的按钮组垂直按钮组图像上的按钮总结CSS按钮Buttons了解如何使用CSS设置按钮样式。基本按钮样式示例.button{background-colo......
  • 2024最全前端面试系列(ES6)(ES6你不得不知道的新特性)
    functionfn(){return“HelloWorld”;}foo${fn()}bar//fooHelloWorldbarSymbolSymbol是ES6新增的基本类型。Symbol值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Sy......
  • 66 道前端算法面试题附思路分析助你查漏补缺
    题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对应的一个弹出序列,但4,3,5,1,2就不可能是该压栈序列的弹出序列。(注意:这两个......