建网站卖阀门爱站网seo综合查询工具

效果

前端样式体验链接：https://livequeen.top/deepseekshow

准备工作

1、注册deepseek官网账号

地址：DeepSeek

点击进入右上角【API开放平台】，并进行账号注册。

 

2、注册完成后，依次点击【API keys】-【生成API key】，记住自己保存好API keys，他只会显示一次，如果忘了，就要重新生成了！

然后点击【接口文档】，就可以看到官方API文档了！

3、在接口文档中，点击【首次调用API】，然后选择对应的语言，就可以看到示例代码了

代码示例

这里用vue+node.js做一个上面效果动态图的简单示例：

一、后端

1、 引入依赖，在终端中输入如下指令

npm install openai

2、新建一个工具类【deepseek.js】，用于执行deepseek的API并返回结果，如下（可直接复制）：

// Please install OpenAI SDK first: `npm install openai`
const OpenAI = require('openai')// api参数配置
const openai = new OpenAI({baseURL: 'https://api.deepseek.com',apiKey: 'sk-c63c***********************e1e0b70'
})/*** message 消息列表*    role 角色*    content 对话内容*    name 某个角色的参与者，用于区分相同角色（选填）* model   模型 [deepseek-chat, deepseek-reasoner] deepseek-chat 模型已全面升级为 DeepSeek-V3。*/
async function deepSeekChat (contents) {// 执行获取结果const completion = await openai.chat.completions.create({messages: [{role: 'system',content: contents}],model: 'deepseek-chat'})// 返回结果return completion.choices[0].message.content
}module.exports = {deepSeekChat
}

3、在你自己的后端接口中通过异步调用的方式，来传参调用上面工具类里面的deepSeekChat()方法 ，如下：

// 引用前面deepseek工具类的方法
const {deepSeekChat} = require('../utils/deepseek')// 后端接口(异步)
router.post('/deepseek', async (req, res) => {// 调用前面deepseek工具类的方法let data = await deepSeekChat(req.body.contents)// 返回结果res.end(JSON.stringify({traceId: req.traceId,code: 200,data: data}))
})

 二、前端

1、h5布局

<template><div class="mess_dialog" v-loading="isloading"><!-- 对话框头部 --><div class="dlog_header"><h1>DeepSeek对话</h1></div><!-- 对话框内容 --><div id="content_overflow" class="dlog_content" ref="scrollContainer" @scroll="handleScroll"><div v-for="(item, index) in messnowList" :key="index" class="dlog_content_item" style="margin-left: 5px;"><!-- AI消息展示 --><div v-if="item.role === 'system'" class="content_other"><!-- 头像 --><div><el-avatar :size="35" :src="require('../../../assets/image/ai.png')" style="margin-top: 5px;"></el-avatar></div><div class="mess_other"><!-- 发送时间 --><div><span style="font-size: 8px;">{{item.date}}</span></div><!-- 发送内容 --><div class="content_other_bgd"><span class="mess_content_msg">{{item.content}}</span></div><!-- 复制按钮 --><div class="iconCopy" @click="onCopy(item.content)"><i class="el-icon-copy-document"></i></div></div></div><!--本用户的消息展示--><div v-else-if="item.role === 'user'" class="content_me"><div class="mess_me"><!-- 发送时间 --><div><span style="font-size: 8px;">{{item.date}}</span></div><!-- 发送内容 --><div class="content_me_bgd"><span class="mess_content_msg">{{item.content}}</span></div></div><!-- 头像 --><div><el-avatar :size="35" :src="userAvatar" style="margin-top: 5px;"></el-avatar></div></div></div></div><!--对话框底部--><div class="dlog_footer"><div class="footer_content"><el-input type="textarea" :rows="4" v-model="mess" maxlength="500" show-word-limit @keydown.enter.native="keyDown"></el-input><el-button type="primary" @click="Wssendmess()" style="float: right;margin-top: 5px;">发送</el-button></div></div></div>
</template>

2、css样式

<style scoped>
.mess_dialog {height: 100%;width: 100%;max-width: 800px;position: relative;margin: 0 auto;display: flex;flex-direction: column; /* 垂直排列 */
}
.dlog_header {display: flex;justify-content: center;flex: 1;
}
.dlog_content {flex: 7;overflow-y: auto;overflow-x: hidden;
}
.content_other{width: 80%;display: flex;justify-content: flex-start;margin: 11px 18px;
}
.mess_other{text-align: left;margin-left: 10px;
}
.content_me{width: 80%;display: flex;justify-content: flex-end;float: right;margin: 11px 18px;
}
.mess_me{text-align: right;margin-right: 10px;
}
.mess_content_msg{font-size: 16px;font-weight: 300;margin: 2px;
}
/*其他用户的气泡*/
.content_other_bgd {border-radius: 6px;position: relative;display: inline-block;padding: 0px 6px;width: auto;height: auto;line-height: 34px;background: #e3e1e1;z-index: 0;
}
/*气泡前的小三角指向*/
.content_other_bgd::before {border-style: solid;border-width: 0 11px 11px 0;border-color: transparent #e3e1e1 transparent transparent;content: "";position: absolute;top: 10px; left: -8px;margin-top: -9px;display: block;width: 0px;height: 0px;z-index: 0;
}
/*我方的气泡*/
.content_me_bgd {border-radius: 6px;position: relative;display: inline-block;padding: 0px 6px;width: auto;height: auto;line-height: 34px;background: #95ec69;z-index: 0;text-align: left;
}
.content_me_bgd::after {border-style: solid;border-width: 0 0 11px 11px;border-color: transparent transparent transparent #95ec69;content: "";position: absolute;top: 10px; right: -8px;margin-top: -10px;display: block;width: 0px;height: 0px;z-index: -1;
}
.iconCopy{padding: 7px;margin-top: 3px;width: 20px;border-radius: 5px;display: flex;justify-content: center;
}
.el-icon-copy-document{color: #a2a2a2;
}
.iconCopy:hover {background-color: #ecebeb;
}
.iconCopy:hover  .el-icon-copy-document{color: #3d9aff;
}
.iconCopy:active {background-color: #dedede;
}
.iconCopy:active  .el-icon-copy-document{color: #0b7bf5;
}
.dlog_footer{width: 100%;flex: 2;padding: 10px 0;
}
</style>

3、js函数

<script>
import userAvatar from '@/assets/image/userAvatar.png'
import moment from 'moment/moment'
import cookie from '../../../utils/cookie'
import base from '../../../api/base'export default {name: 'Index',data () {return {mess: '', // 输入的信息userAvatar: userAvatar, // 默认用户头像autoScroll: true, // 是否需要自动滚动到底部messnowList: [], // 当前对话用户的-聊天内容列表isloading: false // 加载中，默认关闭}},watch: {// 监听当前消息列表，更新时，保持滚动条位于底部messnowList: {handler (newValue, oldValue) {this.scrollToBottom()},deep: true}},methods: {// 监听用户滑动情况，判断是否需要自动定位底部handleScroll () {// 绑定组件const container = this.$refs.scrollContainer// 判断用户是否手动向上滚动超过底部位置30pxif (container.scrollHeight - container.scrollTop - container.clientHeight > 50) {this.autoScroll = false // 用户手动滚动，停止自动滚动} else {this.autoScroll = true // 用户滚动到底部，恢复自动滚动}},// 定位到底部scrollToBottom () {this.$nextTick(() => {var message = document.getElementById('content_overflow')if (this.autoScroll) {// 滚动滑钮到滚动条顶部的距离=滚动条的高度message.scrollTop = message.scrollHeight}})},// enter发送消息，ctrl+enter换行keyDown (e) {if (e.ctrlKey && e.keyCode === 13) { // 用户点击了ctrl+enter触发this.mess += '\n'} else { // 用户点击了enter触发this.Wssendmess()e.preventDefault() // 阻止浏览器默认换行操作return false}},// 发送按钮Wssendmess () {var message = this.mess.trim()this.mess = ''// 开启加载this.isloading = true// 判断是否有字符输入if (message === null | message === '') {this.$notify({title: '提示',message: '发送内容不能为空!',type: 'warning'})// 关闭加载this.isloading = false} else {// 用户发言，恢复自动滚动this.autoScroll = true// 保存到数据集合中let date = moment().format('YYYY-MM-DD HH:mm:ss')let item = this.data_rule('user', message, date)this.messnowList.push(item)// 执行接口this.$api.deepseek(message).then(res => {// 关闭加载this.isloading = falseif (res.data.code === 200) {this.chatAI(res.data.data)} else {this.chatAI('服务器繁忙，请稍后重试！')}}).catch(err => {// 关闭加载this.isloading = falsethis.chatAI('服务器繁忙，请稍后重试！')console.log(err)})}},// 规范数据格式data_rule (role, content, date) {return {role: role,content: content,date: date}},/*** 模拟AI机器人打字效果* @param content 返回的全部文本*/chatAI (content) {// 获取返回结果let data = content// 临时储存结果（一个个字符）let dataTemp = data[0]let date = moment().format('YYYY-MM-DD HH:mm:ss')// 循环一个个字符赋予，模拟机器人打字效果let item2 = this.data_rule('system', dataTemp + '_', date)this.messnowList.push(item2)let nowSize = this.messnowList.length - 1if (data.length > 1) {for (let i = 1; i < data.length; i++) {setTimeout(() => {if (i === data.length - 1) {dataTemp = dataTemp + data[i]item2 = this.data_rule('system', dataTemp, date)} else {dataTemp = dataTemp + data[i]item2 = this.data_rule('system', dataTemp + '_', date)}this.messnowList[nowSize] = item2// 更新组件监听this.$forceUpdate()// 更新滚动条定位this.scrollToBottom()}, 100 * i)}}},// 复制按钮onCopy (content) {// 复制到粘贴板navigator.clipboard.writeText(content).then(() => {this.$message.success('复制成功')}).catch(err => {this.$message.error('复制失败，原因：' + err)})}}
}
</script>