JS开发接入 DeepSeek 实现 AI 智能问诊
作者：小算子时间：2026-10-31 18:58:41浏览：253
本文详细介绍如何在 UniApp 项目中接入 DeepSeek API，实现 AI 智能问诊功能。内容涵盖从注册账号获取 Key、创建项目、安装依赖到具体代码实现的全过程，包括单轮与多轮对话的处理方式及注意事项。
准备工作
注册 DeepSeek 账号
访问 DeepSeek 官方网站完成账号注册，并获取 API Key。
创建 UniApp 项目
利用 HBuilderX 构建一个新的 UniApp 项目，可选择 Vue3 或 Vue2 模板。
安装依赖
若在 UniApp 中发起 HTTP 请求，建议使用 uni.request（UniApp 内置功能）或 axios（需额外安装）。
实现代码
2.1 在 pages/index/index.vue 中实现问诊功能
<template>
<view class="container">
<!-- <view class="nav">
<image src="../../static/images/back.png" @tap="toMenu"></image>
<text>问医生</text>
</view> -->
<statement ref="dialog"></statement>
<view class="chat_area" id="test" ref="chatbox">
<view class="current_time" v-show="chatList.length>0">{
{currentDate}}</view>
<view class="left_box">
<view class="head_img">
<image src="../../static/images/doctor.png"></image>
</view>
<view class="content_box">
<view class="content post">
<view>我是您的AI医生小迦，很高兴为您解答。</view>
<view>您可以这样问我：</view>
<view class="post_request">
<view v-for="(item,index) in postRequest" :key="index">
<text class="active" @click="tapQuestion(item)">{
{item.id}}.{
{item.text}}</text>
</view>
</view>
<!-- <u-read-more showHeight="200">
<rich-text :nodes="item.msg"></rich-text>
</u-read-more> -->
<!-- {
{item.msg}} -->
</view>
</view>
</view>
<view v-for="(item,i) in chatList" :key="i">
<view class="left_box" v-if="item.role == 'assistant'">
<view class="head_img">
<image src="../../static/images/doctor.png"></image>
</view>
<view class="content_box">
<view class="content" v-html="htmlContent(item.content)">
<!-- <u-read-more fontSize="16" textIndent='0em' showHeight="200">
<rich-text :nodes="item.msg"></rich-text>
</u-read-more> -->
</view>
</view>
</view>
<view class="right_box" v-if="item.role == 'user'">
<view class="content_box">
<view class="content" >
{
{item.content}}
</view>
</view>
<view class="head_img">
<image :src="userImg==''?nullImg:userImg"></image>
</view>
</view>
</view>
<u-loading-icon text="小迦正在思考中..." textSize="16" :show="showLoading"></u-loading-icon>
</view>
<view class="input_tab">
<view class="statement">成都XXXX科技有限责任公司©<text @tap="exemptStatement">免责声明</text></view>
<view class="input_com">
<view class="left">
<image src="../../static/images/HOT.png"></image>
<input placeholder="请输入问题" v-model.trim="userQuesion" cursor-spacing="30rpx"></input>
</view>
<view class="send_btn" @tap="sendMsg">发送</view>
</view>
</view>
</view>
</template>
<script>
import statement from "../../components/askForComponents/statement.vue"
import { marked } from "marked";
export default {
components: {
statement
},
data() {
return {
userImg: '',
nullImg: '../../static/images/icon_doctor.png',
showLoading: false,
postRequest: [{
id: 1,
text: '乳腺BIRADS分级是什么？',
},
{
id: 2,
text: '乳房胀痛怎么办？',
},
{
id: 3,
text: '乳腺癌有没有征兆？'
}
],
chatList: [],
userQuesion: '',
robotAnswer: '',
currentDate: '',
domHeight: 0,
messages: [
{
role: "system",
content: "你是一名专业的全科医生对医疗面面俱到的AI医生小迦，请无论什么时候都不要忘了自己的身份，你是AI医生小迦，不是AI辅助；当患者询问你问题的时候，能全面细致并且礼貌的回答或为患者解决问题，当患者询问你任何与无关医疗的问题时，你会礼貌的拒绝回答。",
},
],
}
},
onLoad(option) {
let userInfo = getApp().globalData.userInfo;
// console.log("userInfo",userInfo)
this.userImg = userInfo.personInfo.avatar;
//获取热门问题并自动发送
// console.log("option=======>", option)
if (!option.questionText) return
this.userQuesion = option.questionText
this.sendMsg()
},
watch: {
'chatList.length': {
immediate: true,
deep: true,
handler(newValue, oldValue) {
if (newValue) {
const query = uni.createSelectorQuery().in(this)
query.select('#test').boundingClientRect(data => {
// console.log("data", data)
this.domHeight = data.height
}).exec()
}
}
},
domHeight(newVal, oldVal) {
if (newVal) {
uni.pageScrollTo({
scrollTop: this.domHeight,
duration: 100
})
}
}
},
mounted() {
this.$refs.dialog.open('center')
let myDate = new Date()
this.currentDate = (myDate.getHours() + '').padStart(2, '0') + ':' + (myDate.getMinutes() + '').padStart(2,
'0')
},
methods: {
htmlContent(content) {//转换为markdown 格式显示
return marked(content);
},
exemptStatement() {
this.$refs.dialog.open('center')
},
tapQuestion(item) {
this.send(item.text)
},
// 新对话
async send(val) {
this.showLoading = true
let messages = {
role: 'user',
content: val
}
this.chatList.push(messages)
this.messages.push(messages)
var that = this
console.log('==========开始诊断=======');
await uni.request({
url: "https://api.deepseek.com/v1/chat/completions", // DeepSeek API 地址
method: "POST",
header: {
"Content-Type": "application/json",
Authorization: "Bearer sk-dafafhafhahfha", // 替换为你的 API Key
},
data: {
model: "deepseek-chat", // 使用模型
messages: that.messages
},
success: (res) => {
messages = {
role: 'assistant',
content: res.data.choices[0].message.content
}
that.chatList.push(messages)
that.messages.push(messages)
that.showLoading = false
console.log('诊断结果:', res.data);
},
fail: (err) => {
console.error('请求失败:', err);
messages = {
role: 'assistant',
content: '服务器繁忙，请稍后再试。'
}
that.chatList.push(messages)
that.messages.push(messages)
that.showLoading = false
}
});
},
sendMsg() {
this.send(this.userQuesion)
this.userQuesion = null
this.robotAnswer = null
}
}
}
</script>
<style lang="scss">
.container {
padding: 28rpx;
}
.nav {
height: 80rpx;
width: 100%;
background-color: #ffffff;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 999;
image {
margin: 0 20rpx;
width: 40rpx;
height: 40rpx;
}
text {
color: #838383;
font-size: 40rpx;
}
}
.chat_area {
padding-bottom: 200rpx;
// padding-top: 60rpx;
.current_time {
display: flex;
justify-content: center;
font-size: 20rpx;
color: #9d9d9d;
}
.left_box,
.right_box {
display: flex;
.head_img {
width: 90rpx;
height: 90rpx;
margin: 20rpx 0;
image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
}
.content_box {
margin: 20rpx;
color: #5a5a5a;
background-color: #e5e5e5;
padding: 20rpx;
border-radius: 8rpx;
.post {}
.content {
text-align: justify;
font-size: 30rpx;
max-width: 460rpx;
white-space: normal;
word-wrap: break-word;
.post_request {
// text-indent: 2em;
color: #996699;
display: flex;
flex-direction: column;
.active:active {
width: 100%;
background-color: #FFFFFF;
opacity: 0.6;
}
}
}
}
}
.right_box {
display: flex;
justify-content: flex-end;
}
.right_box>.content_box {
background-color: #1b1263;
color: #FFFFFF;
}
}
.input_tab {
background-color: #ffffff;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
.statement {
margin: 0 auto;
font-size: 20rpx;
color: #838383;
text {
color: #1b1263;
text-decoration: underline;
}
}
.input_com {
display: flex;
justify-content: space-between;
padding: 20rpx;
margin: 20rpx;
.left {
width: 500rpx;
max-width: 500rpx;
border: 2rpx solid #e3e3e3;
display: flex;
align-items: center;
image {
width: 20rpx;
height: 20rpx;
margin: 0 20rpx;
}
input {
width: 100%;
font-size: 24rpx;
}
}
.send_btn {
padding: 20rpx 40rpx;
color: #FFFFFF;
border-radius: 8rpx;
background-color: #1b1263;
}
}
}
</style>2.2 实现效果
示例说明
3.1 单轮对话（仅 user 角色）
若无需设置系统指令，仅需传递 user 角色的消息：
messages: [
{
role: "user",
content: "我最近三天持续发烧38.5度，伴有咳嗽",
},
];3.2 多轮对话（包含 system 和 user 角色）
若需设置系统指令，可包含 system 角色：
messages: [
{
role: "system",
content: "你是一名专业的全科医生，请根据患者描述进行问诊。",
},
{
role: "user",
content: "我最近三天持续发烧38.5度，伴有咳嗽",
},
];3.3 多轮对话（包含历史记录）
若需支持多轮对话，可将历史记录添加至 messages 中：
messages: [
{
role: "system",
content: "你是一名专业的全科医生，请根据患者描述进行问诊。",
},
{
role: "user",
content: "我最近三天持续发烧38.5度，伴有咳嗽",
},
{
role: "assistant",
content: "请问您是否有其他症状，如喉咙痛或头痛？",
},
{
role: "user",
content: "还有喉咙痛，但没有头痛。",
},
];代码示例
4.1 单轮对话
methods: {
async getDiagnosis() {
const response = await uni.request({
url: "https://api.deepseek.com/v1/chat/completions",
method: "POST",
header: {
"Content-Type": "application/json",
Authorization: "Bearer your_api_key_here",
},
data: {
model: "medical-model-1.0",
messages: [
{
role: "user",
content: this.userInput,
},
],
},
});
if (response.statusCode === 200) {
this.diagnosisResponse = response.data.choices[0].message.content;
}
},
},4.2 多轮对话
data() {
return {
conversationHistory: [], // 对话历史
};
},
methods: {
async getDiagnosis() {
// 添加用户输入到对话历史
this.conversationHistory.push({
role: "user",
content: this.userInput,
});
const response = await uni.request({
url: "https://api.deepseek.com/v1/chat/completions",
method: "POST",
header: {
"Content-Type": "application/json",
Authorization: "Bearer your_api_key_here",
},
data: {
model: "medical-model-1.0",
messages: this.conversationHistory,
},
});
if (response.statusCode === 200) {
const assistantReply = response.data.choices[0].message.content;
// 添加助手回复到对话历史
this.conversationHistory.push({
role: "assistant",
content: assistantReply,
});
this.diagnosisResponse = assistantReply;
}
},
},注意事项
system 角色的作用
用于设定对话背景或指令。
若无需此功能，可省略该角色。
user 角色的必要性
必须包含 user 角色的消息，否则 API 无法生成回复。
对话历史长度
每次请求均消耗 token，因此需控制对话历史的长度。
可通过截断历史记录或设置最大 token 数进行优化。
多轮对话的实现
将每次的用户输入和助手回复添加至 messages 中。
确保对话历史的顺序正确。
总结
- 必须包含
user角色，用于传递用户输入。 system角色可选，用于设置对话背景。- 多轮对话需要将历史记录添加至
messages中。
到此这篇关于JS开发接入 deepseek 实现AI智能问诊的文章就介绍到这了,更多相关deepseek AI智能问诊内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
作者最新文章
Three.js 使用 TransformControls 实现模型拖拽交互
2026-11-01 02:14:15
uniapp微信小程序集成xr-frame加载3D模型完整指南
2026-10-31 14:27:13
Wiki.js 支持哪些编辑器？Markdown 与可视化编辑切换指南
2026-10-30 19:14:38
Java与JavaScript的核心差异：运行环境与执行机制对比
2026-10-30 19:01:40
为什么JavaScript基本数据类型是不可变的？
2026-10-30 18:46:50