自己的网页加一个搜索框，调用deepseek的API

一切源于一个学习黑马程序员视频的突发奇想 在网页悬浮一个搜索按钮，点击可以实现调用deepseek文本模型回答你的问题

前端实现

前端使用vue实现的

首先是整体页面：AIWidget.vue

<template> <div> <!-- 悬浮 AI 按钮 --> <el-button class="floating-button" @click="dialogVisible = true"> <el-icon><Search /></el-icon> </el-button> <!-- AI 搜索框 --> <el-dialog v-model="dialogVisible" title="AI 搜索" width="400px"> <el-input v-model="query" placeholder="请输入搜索内容..." @keyup.enter="handleSearch" /> <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button> <el-divider /> <el-scrollbar height="200px"> <ul v-if="results.length"> <li v-for="(item, index) in results" :key="index">{{ item }}</li> </ul> <p v-else class="no-result">暂无搜索结果</p> </el-scrollbar> </el-dialog> </div> </template> <script> import { ref, watch } from "vue"; import { Search } from "@element-plus/icons-vue"; import { ElMessage } from "element-plus"; import { aiSearch } from "@/api/aiSearch"; import { debounce } from "lodash-es"; export default { components: { Search }, setup() { const dialogVisible = ref(false); const query = ref(""); const results = ref([]); const loading = ref(false); const handleSearch = debounce(async () => { const cleanQuery = query.value.trim().replace(/<[^>]*>?/gm, ""); if (!cleanQuery) return; loading.value = true; try { const response = await aiSearch(cleanQuery); results.value = response.data || []; } catch (error) { ElMessage.error("搜索失败：" + error.message); results.value = []; } finally { loading.value = false; } }, 500); watch(dialogVisible, (val) => { if (!val) { query.value = ""; results.value = []; } }); return { dialogVisible, query, results, loading, handleSearch }; }, }; </script> <style scoped> .floating-button { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 20px; border-radius: 50%; background-color: #409eff; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background-color 0.3s; } .floating-button:hover { background-color: #66b1ff; } .search-btn { margin-top: 10px; width: 100%; } .no-result { text-align: center; color: gray; } </style>

直接放在src/commpoents下 接下来是JS文件，直接放在 src/api/ 下 aiSearch.js

import request from '@/utils/request'; // AI 搜索 API 请求 export function aiSearch(query) { return request({ url: '/ai-search', method: 'get', params: { q: query } }); }

为了在每个页面的右下角都显示这个搜索框，我们直接导入组件到App.vue App.vue

<template> <div> <router-view /> <AIWidget /> <!-- 悬浮 AI 按钮 --> </div> </template> <script setup> import useSettingsStore from '@/store/modules/settings' import { handleThemeStyle } from '@/utils/theme' import AIWidget from "@/components/AIWidget.vue"; // 导入 AI 搜索组件 onMounted(() => { nextTick(() => { // 初始化主题样式 handleThemeStyle(useSettingsStore().theme) }) }) </script> 后端实现

首先在 application.yml 添加配置：

siliconflow: api: url: api.siliconflow /v1/chat/completions token: your_token_here # 替换为实际token model: deepseek-ai/DeepSeek-R1-Distill-Qwen-7B

创建请求/响应 DTO 对象： AiSearchReq.java

package com.dkd.manage.controller.AI; import com.dkd mon.core.domain.R; import com.dkd.manage.service.AI.IAiSearchService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping("/ai-search") public class AiSearchController { @Autowired private IAiSearchService aiSearchService; @GetMapping("") public R<List<String>> search(@RequestParam String q) { return R.ok(aiSearchService.searchAI(q)); } }

ChatCompletionReq.java

package com.dkd.manage.domain.dto.AI; import lombok.AllArgsConstructor; import lombok.Data; import java.util.ArrayList; import java.util.List; @Data public class ChatCompletionReq { private String model; private List<Message> messages; private boolean stream = false; private int max_tokens = 512; private double temperature = 0.7; private double top_p = 0.7; private int top_k = 50; private double frequency_penalty = 0.5; private int n = 1; private ResponseFormat response_format = new ResponseFormat("text"); //private List<Tool> tools = new ArrayList<>(); @Data @AllArgsConstructor public static class Message { private String role; private String content; } @Data @AllArgsConstructor public static class ResponseFormat { private String type; } @Data public static class Tool { private String type = "function"; private ToolFunction function = new ToolFunction(); } @Data public static class ToolFunction { private String description = ""; private String name = ""; private Object parameters = new Object(); private boolean strict = false; } }

ChatCompletionResp.java

package com.dkd.manage.domain.dto.AI; import lombok.Data; import java.util.List; @Data public class ChatCompletionResp { private List<Choice> choices; @Data public static class Choice { private Message message; } @Data public static class Message { private String content; } }

Controller 层： AiSearchController.java

package com.dkd.manage.controller.AI; import com.dkd mon.core.domain.R; import com.dkd.manage.service.AI.IAiSearchService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping("/ai-search") public class AiSearchController { @Autowired private IAiSearchService aiSearchService; @GetMapping("") public R<List<String>> search(@RequestParam String q) { return R.ok(aiSearchService.searchAI(q)); } }

Service 接口： IAiSearchService.java

package com.dkd.manage.service.AI; import java.util.List; public interface IAiSearchService { List<String> searchAI(String query); }

Service 实现： AiSearchServiceImpl.java

package com.dkd.manage.service.impl; import com.dkd mon.exception.ServiceException; import com.dkd.manage.domain.dto.AI.ChatCompletionReq; import com.dkd.manage.domain.dto.AI.ChatCompletionResp; import com.dkd.manage.service.AI.IAiSearchService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.http.*; import org.springframework.stereotype.Service; import org.springframework.web.client.RestTemplate; import java.util.Arrays; import java.util.Collections; import java.util.List; @Service public class IAiSearchServiceImpl implements IAiSearchService { @Value("${siliconflow.api.url}") private String apiUrl; @Value("${siliconflow.api.token}") private String apiToken; @Value("${siliconflow.api.model}") private String model; @Autowired private RestTemplate restTemplate; @Override public List<String> searchAI(String query) { // 1. 构建请求头 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_JSON); headers.setBearerAuth(apiToken); // 2. 构建请求体 ChatCompletionReq request = new ChatCompletionReq(); request.setModel(model); request.setMessages(Collections.singletonList( new ChatCompletionReq.Message("user", query) )); // 3. 发送请求 HttpEntity<ChatCompletionReq> entity = new HttpEntity<>(request, headers); ResponseEntity<ChatCompletionResp> response = restTemplate.exchange( apiUrl, HttpMethod.POST, entity, ChatCompletionResp.class ); // 4. 处理响应 if (response.getStatusCode().is2xxSuccessful() && response.getBody() != null) { String content = response.getBody().getChoices().get(0).getMessage().getContent(); return Arrays.asList(content.split("\\n")); } throw new ServiceException("AI 服务调用失败"); } }

配置 RestTemplate（如果尚未配置）： RestTemplateConfig.java

package com.dkd.framework.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.client.RestTemplate; @Configuration public class RestTemplateConfig { @Bean public RestTemplate restTemplate() { return new RestTemplate(); } }