尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

如何使用DSH做一个带有搜索功能的网页?

如何使用DSH做一个带有搜索功能的网页? DSH (DeepSeek Harness) 制作带搜索功能网页完整流程两种搜索实现前端本地搜索纯 HTMLJS在页面内置数据内过滤不需要后端直接打开 html 就能用新手优先对接后端 API 搜索输入关键词请求接口返回结果需要后端服务前置准备启动 DSH WebUInpx deepseek-ai/dsh web访问http://127.0.0.1:30802. Settings → Models 填入 DeepSeek API‑key 3.新建空文件夹作为工作区在 DSH 界面选择该文件夹模式保持【标准模式 Standard】⚠️重要不要选系统文件夹DSH 会读写该目录下所有文件。方案 1本地前端搜索推荐开箱即用直接复制下面整段提示词粘贴到 DSH 对话框发送请在当前工作目录生成 index.html制作一个完整单页网页。 需求 1. 页面包含顶部导航栏页面大标题搜索输入框搜索按钮支持回车触发搜索 2. 实现前端本地搜索功能内置一组示例文章数据用户输入关键词JS实时过滤匹配标题、描述展示搜索结果列表无匹配时显示“没有找到相关内容” 3. UI美观现代自适应手机移动端使用Tailwind CSS CDN不需要本地安装依赖 4. 页面包含搜索框、清空按钮、搜索结果卡片列表、底部版权 5. 完成后在本地简单自检保证打开网页搜索功能可以正常运行全部代码写在index.html一个文件不要拆分多个文件。 任务完成后告诉我如何打开预览。发送后 Agent 会自动规划任务→写入 index.html→简单自检。 任务结束直接双击工作区里的index.html即可打开不需要服务器本地浏览器直接运行搜索。功能说明搜索逻辑全部浏览器 JS 执行数据写死在页面 JS 数组内如果你想替换自己的内容数据可以后续继续发指令修改 index.html替换内置的搜索数据源为下面的内容【粘贴你的数据】方案 2对接 API 接口搜索需要后端如果你想要网页搜索调用远程接口使用这条 prompt生成 index.html单页面搜索网页。 1. UI搜索框、搜索按钮、loading加载状态、结果展示区域、错误提示移动端自适应使用Tailwind CSS CDN 2. JS逻辑点击按钮或者回车获取输入框文本fetch POST请求后端搜索接口 https://xxx/api/search把关键词作为参数提交接口返回JSON渲染结果列表请求过程显示loading网络失败展示错误信息。 3. 只写前端页面不要写后端代码全部代码放在index.html。 4. 注意处理接口跨域提示。完成后做基础自检。注意浏览器直接打开本地 html 调用远程接口会有跨域问题需要部署到 web 服务器上访问。DSH 常用调试指令遇到 bug 直接发给 Agent页面搜索功能失效读取index.html排查搜索功能bug修复JS逻辑保存覆盖原文件修复完成简单验证逻辑。修改样式 / 增加高亮关键词修改index.html搜索结果命中的关键词文字增加黄色高亮效果保持原有搜索逻辑不变。拆分文件大型项目把页面拆分为 index.html、style.css、main.js搜索功能保持不变全部输出到工作目录。常见踩坑❗不要中途切换运行模式切换模式会重置工具环境需要新建会话CSDN博...Agent 生成多文件全部文件都会输出到你选定的工作文件夹本地前端搜索双击 html 打开就能跑API 搜索页面必须部署 web 服务不能直接双击本地文件打开会跨域报错。如果任务跑很久卡住可以点会话终止重新发送提示词。补充如果你想让 DSH 同时生成简易后端可以追加指令额外生成一个简单 nodejs 后端 server.js实现搜索接口配合这个前端页面写好 readme 说明启动方式。需要我给你一份可以直接复制的成品 index.html 示例本地搜索版本吗你可以直接打开看效果。
返回列表