准备阶段
首先我们先登录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