前端交互开发用JavaScript调用乙巳马年·皇城大门春联生成终端W API过年贴春联是咱们的传统习俗。但每年想一副有新意、有文采的对联对不少人来说是个头疼事。要是能有个工具输入几个关键词比如“龙年”、“富贵”、“平安”就能自动生成一副工整又吉祥的春联那该多方便。今天咱们就来聊聊怎么把这个想法变成现实。假设你手头有一个功能强大的“乙巳马年·皇城大门春联生成终端W”的API它能根据你的描述生成对联。作为一个前端开发者你的任务就是搭建一个网页让用户输入关键词然后调用这个API把生成的对联漂亮地展示出来。这听起来像是个有趣的小项目对吧它涵盖了前端开发里几个非常核心的技能点如何用JavaScript发起网络请求、如何处理返回的数据、以及如何动态地更新页面内容。接下来我就带你一步步实现它整个过程就像搭积木一样清晰。1. 项目准备与界面搭建在开始写代码调用API之前咱们得先有个能操作的“舞台”。这个舞台就是一个简单的网页界面。我们不需要把它设计得多么复杂华丽功能清晰、操作顺手就行。1.1 构思基础界面想象一下用户的使用流程打开网页看到一个输入框输入几个关键词比如“新春”、“吉祥”、“事业”点击一个按钮然后等待片刻下方就显示出生成的上联、下联和横批。基于这个流程我们的界面至少需要这些元素一个标题告诉用户这个工具是做什么的。一段简短的说明文字引导用户操作。一个文本输入框让用户输入关键词。一个按钮用来触发生成动作。一块区域用来展示生成后的春联内容。最好还能有个小动画在等待API返回结果时告诉用户“正在努力生成中…”。1.2 用HTML和CSS快速实现下面是一段基础的HTML和CSS代码可以直接拿来用。我把样式写得比较简单你可以根据自己的喜好调整颜色和布局。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title在线智能春联生成器/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe UI, Microsoft YaHei, sans-serif; } body { background: linear-gradient(135deg, #fdf6e3 0%, #f5e6ca 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #333; } .container { background-color: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 40px; width: 100%; max-width: 800px; box-shadow: 0 15px 35px rgba(168, 39, 39, 0.1); border: 1px solid #e8d3b6; } h1 { text-align: center; color: #c62828; margin-bottom: 15px; font-size: 2.5em; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .subtitle { text-align: center; color: #666; margin-bottom: 30px; font-size: 1.1em; line-height: 1.6; } .input-area { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } #keywordInput { flex-grow: 1; padding: 18px 25px; border: 2px solid #d7b98f; border-radius: 12px; font-size: 18px; outline: none; transition: border-color 0.3s; background-color: #fffef9; } #keywordInput:focus { border-color: #c62828; } #generateBtn { padding: 18px 40px; background: linear-gradient(to right, #c62828, #e53935); color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } #generateBtn:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(198, 40, 40, 0.3); } #generateBtn:disabled { background: #cccccc; cursor: not-allowed; transform: none; box-shadow: none; } .loading { text-align: center; margin: 25px 0; color: #c62828; font-size: 1.1em; display: none; } .loading::after { content: ...; animation: dots 1.5s steps(4, end) infinite; } keyframes dots { 0%, 20% { content: .; } 40% { content: ..; } 60%, 100% { content: ...; } } .couplet-display { background-color: #fff8e1; border: 3px dashed #ffb74d; border-radius: 15px; padding: 35px; margin-top: 20px; text-align: center; display: none; } .couplet-line { font-size: 2.2em; font-weight: bold; margin: 20px 0; color: #2e2e2e; line-height: 1.8; font-family: KaiTi, STKaiti, serif; } .horizontal-scroll { font-size: 1.8em; color: #c62828; margin-top: 30px; padding-top: 15px; border-top: 2px solid #ffb74d; font-weight: bold; } .error-message { background-color: #ffebee; border: 2px solid #ef9a9a; color: #c62828; padding: 20px; border-radius: 10px; margin-top: 20px; display: none; font-weight: bold; } /style /head body div classcontainer h1 智能春联生成器/h1 p classsubtitle输入您的祝福关键词例如龙年、吉祥、安康、发财即可一键生成专属定制春联。/p div classinput-area input typetext idkeywordInput placeholder请输入关键词用逗号或空格分隔 button idgenerateBtn生成春联/button /div div idloadingIndicator classloading正在构思妙联请稍候/div div idcoupletResult classcouplet-display !-- 春联内容将通过JavaScript动态插入 -- div classcouplet-line idupperLine上联内容将显示在这里/div div classcouplet-line idlowerLine下联内容将显示在这里/div div classhorizontal-scroll idhorizontalScroll横批内容将显示在这里/div /div div iderrorDisplay classerror-message 哎呀生成过程中出了点小问题请稍后再试或检查网络。 /div /div script srcapp.js/script /body /html把上面这段代码保存为一个HTML文件用浏览器打开你就能看到一个具有节日氛围的春联生成器界面了。输入框和按钮都已经就位只是现在还点不动因为最关键的JavaScript逻辑我们还没写。2. 核心用JavaScript调用API界面有了现在我们来给它注入“灵魂”。核心就是当用户点击按钮时我们要做三件事获取用户输入的关键词、把它们发送给春联生成API、然后把API返回的结果展示在页面上。这里我们会用到现代前端开发中非常常用的Fetch API。2.1 理解API交互在写代码之前我们得先和提供API的后端同事或者查看API文档确认一下沟通的“暗号”。通常这类生成式API的调用方式很类似请求地址 (URL)假设我们的API地址是https://api.example.com/v1/generate/couplet请求方法 (Method)一般是POST因为我们要发送数据过去。请求头 (Headers)需要告诉服务器我们发送的数据格式是JSON所以通常要设置Content-Type: application/json。如果API需要认证可能还需要Authorization头。请求体 (Body)一个JSON对象里面包含生成所需的参数。比如很可能需要一个prompt字段它的值就是用户输入的关键词字符串。响应 (Response)API处理成功后会返回一个JSON格式的数据。里面应该包含了生成的上联、下联和横批。我们假设API的请求和响应格式如下你可以根据实际API文档进行调整请求示例{ prompt: 龙年大吉 事业兴旺 阖家安康 }响应成功示例{ success: true, data: { upper_line: 龙腾四海迎新岁, lower_line: 凤舞九州贺丰年, horizontal_scroll: 吉祥如意 } }响应失败示例{ success: false, error: 生成失败请检查输入内容。 }2.2 编写异步请求函数了解了规则我们就可以动手写代码了。我们将把主要的逻辑写在一个名为app.js的文件里并在HTML中引入它。// app.js // 等待整个HTML文档加载完毕后再执行我们的代码 document.addEventListener(DOMContentLoaded, function() { // 获取页面上的关键元素 const keywordInput document.getElementById(keywordInput); const generateBtn document.getElementById(generateBtn); const loadingIndicator document.getElementById(loadingIndicator); const coupletResult document.getElementById(coupletResult); const errorDisplay document.getElementById(errorDisplay); const upperLineEl document.getElementById(upperLine); const lowerLineEl document.getElementById(lowerLine); const horizontalScrollEl document.getElementById(horizontalScroll); // 春联生成API的端点地址 (请替换为真实的API地址) const API_ENDPOINT https://api.example.com/v1/generate/couplet; // 为生成按钮添加点击事件监听器 generateBtn.addEventListener(click, async function() { // 1. 获取并清理用户输入 const keywords keywordInput.value.trim(); if (!keywords) { alert(请输入一些关键词吧比如“平安”、“发财”、“幸福”); keywordInput.focus(); return; // 如果输入为空直接返回不执行后续操作 } // 2. 准备发送给API的数据 const requestData { prompt: keywords // 这里可以根据实际API要求添加其他参数例如 // style: traditional, // 风格 // length: 7 // 对联字数 }; // 3. 更新UI状态显示加载中隐藏结果和错误信息 setLoadingState(true); hideResult(); hideError(); try { // 4. 使用Fetch API发起异步POST请求 const response await fetch(API_ENDPOINT, { method: POST, headers: { Content-Type: application/json, // 如果需要API密钥可以在这里添加 // Authorization: Bearer YOUR_API_KEY_HERE }, body: JSON.stringify(requestData) // 将JavaScript对象转换为JSON字符串 }); // 5. 检查HTTP响应状态是否成功状态码在200-299之间 if (!response.ok) { // 如果HTTP状态码不成功抛出错误进入catch块 throw new Error(网络请求失败: ${response.status}); } // 6. 解析响应的JSON数据 const result await response.json(); // 7. 根据API返回的业务逻辑状态码或字段处理结果 if (result.success) { // 生成成功更新页面显示春联 displayCouplet(result.data); } else { // API业务逻辑失败如输入不合法显示错误信息 throw new Error(result.error || 生成内容不符合要求请尝试其他关键词。); } } catch (error) { // 8. 捕获并处理所有在try块中抛出的错误网络错误、解析错误、业务错误等 console.error(生成春联时出错:, error); showError(error.message); } finally { // 9. 无论成功或失败都隐藏加载动画 setLoadingState(false); } }); // ---------------- 辅助函数 ---------------- // 控制加载状态 function setLoadingState(isLoading) { generateBtn.disabled isLoading; loadingIndicator.style.display isLoading ? block : none; if (isLoading) { generateBtn.textContent 生成中...; } else { generateBtn.textContent 生成春联; } } // 显示生成的春联 function displayCouplet(data) { upperLineEl.textContent data.upper_line; lowerLineEl.textContent data.lower_line; horizontalScrollEl.textContent data.horizontal_scroll; coupletResult.style.display block; // 生成成功后可以稍微滚动到结果区域提升体验 coupletResult.scrollIntoView({ behavior: smooth, block: center }); } // 隐藏结果区域 function hideResult() { coupletResult.style.display none; } // 显示错误信息 function showError(message) { errorDisplay.textContent 错误${message}; errorDisplay.style.display block; } // 隐藏错误信息 function hideError() { errorDisplay.style.display none; } // 额外功能支持按回车键触发生成 keywordInput.addEventListener(keypress, function(event) { if (event.key Enter) { generateBtn.click(); // 模拟点击生成按钮 } }); });这段代码看起来有点长但结构非常清晰。它主要做了一件事把用户点击按钮后的完整流程封装了起来。从获取输入、显示加载动画、发送请求、处理响应、更新页面到错误处理形成了一个完整的闭环。try...catch...finally语句确保了无论成功还是失败页面状态都能得到妥善管理比如最后一定会隐藏加载动画。3. 增强体验与错误处理基础功能已经实现了但一个健壮又好用的应用还需要一些“润色”。这部分我们来看看如何让用户体验更丝滑以及当事情不如预期时该怎么办。3.1 改善用户交互体验首先我们可以加一些贴心的小功能输入提示与验证在用户输入时实时提示字数或格式要求。防重复提交在请求发出后、结果返回前禁用生成按钮防止用户因心急连续点击导致重复请求。空输入处理我们已经做了基础判断但提示可以更友好。键盘支持我们已经添加了回车键触发这很实用。我们在上面的代码里其实已经实现了第2、3、4点。对于第1点我们可以稍作扩展比如给输入框添加一个字数统计// 在app.js的DOMContentLoaded事件监听器内添加 keywordInput.addEventListener(input, function() { const count this.value.length; // 你可以选择在页面某个地方显示这个计数或者只是简单地在控制台输出 console.log(当前输入字数: ${count}); // 如果超过某个长度可以改变输入框边框颜色提示 if (count 50) { this.style.borderColor #ff9800; // 橙色警告 } else { this.style.borderColor #d7b98f; // 恢复原色 } });3.2 完善的错误处理机制网络请求充满了不确定性用户网络可能突然断开、API服务可能暂时不可用、返回的数据格式可能意外改变。完善的错误处理能让你的应用看起来更专业。我们的代码已经通过try...catch捕获了大部分错误但我们可以把它们分得更细给用户更明确的反馈// 替换原来的 catch 块进行更精细的错误分类 catch (error) { console.error(生成春联时出错:, error); let userFriendlyMessage 生成失败请稍后重试。; // 根据错误类型显示不同的友好提示 if (error.name TypeError error.message.includes(Failed to fetch)) { userFriendlyMessage 网络连接失败请检查您的网络设置。; } else if (error.message.includes(网络请求失败)) { userFriendlyMessage 服务器暂时无法响应 (错误码: ${error.message.match(/\d/)?.[0] || 未知}); } else if (error.message.includes(不符合要求)) { userFriendlyMessage error.message; // 直接显示API返回的业务错误 } else if (error.message.includes(Unexpected token)) { userFriendlyMessage 服务器返回了意外的数据格式。; } showError(userFriendlyMessage); }这样用户看到的就不再是生硬的“Error: Network Error”而是“网络连接失败请检查您的网络设置。”这样更容易理解的提示。3.3 结果展示与交互增强春联生成出来后我们可以让展示更有仪式感。比如添加一个“复制到剪贴板”的功能方便用户保存。首先在HTML的结果展示区域coupletResult里添加一个按钮div idcoupletResult classcouplet-display div classcouplet-line idupperLine上联内容将显示在这里/div div classcouplet-line idlowerLine下联内容将显示在这里/div div classhorizontal-scroll idhorizontalScroll横批内容将显示在这里/div !-- 新增复制按钮 -- button idcopyBtn stylemargin-top: 25px; padding: 10px 25px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; 一键复制春联 /button /div然后在app.js中为这个按钮添加功能// 在DOMContentLoaded内部获取复制按钮元素 const copyBtn document.getElementById(copyBtn); // 为复制按钮添加事件监听器 copyBtn.addEventListener(click, function() { const fullCouplet ${upperLineEl.textContent}\n${lowerLineEl.textContent}\n${horizontalScrollEl.textContent}; // 使用现代 Clipboard API navigator.clipboard.writeText(fullCouplet).then(() { // 复制成功给用户一个视觉反馈 const originalText copyBtn.textContent; copyBtn.textContent 已复制; copyBtn.style.background #2E7D32; // 2秒后恢复原状 setTimeout(() { copyBtn.textContent originalText; copyBtn.style.background #4CAF50; }, 2000); }).catch(err { console.error(复制失败: , err); alert(复制失败请手动选择文字进行复制。); }); });4. 项目总结与扩展思考走到这一步一个功能完整的在线春联生成器前端就基本完成了。从最初的一个静态页面到能够与后端API动态交互实时生成并展示内容我们串联起了前端开发中几个非常实用的知识点。用下来感觉整个项目的核心其实就是处理好“请求-等待-响应”这个异步流程。Fetch API配合async/await语法让代码读起来很顺畅像在写同步代码一样。而完善的UI状态管理加载中、成功、失败和错误处理则是提升用户体验的关键让这个小工具显得更可靠、更专业。在实际开发中你可能会遇到更多需要考虑的点。比如如果API响应比较慢你可能需要设置一个超时时间避免用户无限等待。或者你可以添加一个“历史记录”功能把用户生成过的春联保存在浏览器的本地存储里。再进一步如果生成效果不满意可以加一个“重新生成”或“微调关键词”的按钮让用户有更多控制权。这个项目虽然小但它的模式非常典型。你可以把“春联生成API”换成任何其他内容生成API比如诗词生成、故事续写、代码片段生成等等前端这套交互逻辑几乎可以复用。它很好地展示了如何将一项AI能力封装成一个对用户友好、即开即用的网页应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
前端交互开发：用JavaScript调用乙巳马年·皇城大门春联生成终端W API
前端交互开发用JavaScript调用乙巳马年·皇城大门春联生成终端W API过年贴春联是咱们的传统习俗。但每年想一副有新意、有文采的对联对不少人来说是个头疼事。要是能有个工具输入几个关键词比如“龙年”、“富贵”、“平安”就能自动生成一副工整又吉祥的春联那该多方便。今天咱们就来聊聊怎么把这个想法变成现实。假设你手头有一个功能强大的“乙巳马年·皇城大门春联生成终端W”的API它能根据你的描述生成对联。作为一个前端开发者你的任务就是搭建一个网页让用户输入关键词然后调用这个API把生成的对联漂亮地展示出来。这听起来像是个有趣的小项目对吧它涵盖了前端开发里几个非常核心的技能点如何用JavaScript发起网络请求、如何处理返回的数据、以及如何动态地更新页面内容。接下来我就带你一步步实现它整个过程就像搭积木一样清晰。1. 项目准备与界面搭建在开始写代码调用API之前咱们得先有个能操作的“舞台”。这个舞台就是一个简单的网页界面。我们不需要把它设计得多么复杂华丽功能清晰、操作顺手就行。1.1 构思基础界面想象一下用户的使用流程打开网页看到一个输入框输入几个关键词比如“新春”、“吉祥”、“事业”点击一个按钮然后等待片刻下方就显示出生成的上联、下联和横批。基于这个流程我们的界面至少需要这些元素一个标题告诉用户这个工具是做什么的。一段简短的说明文字引导用户操作。一个文本输入框让用户输入关键词。一个按钮用来触发生成动作。一块区域用来展示生成后的春联内容。最好还能有个小动画在等待API返回结果时告诉用户“正在努力生成中…”。1.2 用HTML和CSS快速实现下面是一段基础的HTML和CSS代码可以直接拿来用。我把样式写得比较简单你可以根据自己的喜好调整颜色和布局。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title在线智能春联生成器/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe UI, Microsoft YaHei, sans-serif; } body { background: linear-gradient(135deg, #fdf6e3 0%, #f5e6ca 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #333; } .container { background-color: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 40px; width: 100%; max-width: 800px; box-shadow: 0 15px 35px rgba(168, 39, 39, 0.1); border: 1px solid #e8d3b6; } h1 { text-align: center; color: #c62828; margin-bottom: 15px; font-size: 2.5em; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .subtitle { text-align: center; color: #666; margin-bottom: 30px; font-size: 1.1em; line-height: 1.6; } .input-area { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } #keywordInput { flex-grow: 1; padding: 18px 25px; border: 2px solid #d7b98f; border-radius: 12px; font-size: 18px; outline: none; transition: border-color 0.3s; background-color: #fffef9; } #keywordInput:focus { border-color: #c62828; } #generateBtn { padding: 18px 40px; background: linear-gradient(to right, #c62828, #e53935); color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } #generateBtn:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(198, 40, 40, 0.3); } #generateBtn:disabled { background: #cccccc; cursor: not-allowed; transform: none; box-shadow: none; } .loading { text-align: center; margin: 25px 0; color: #c62828; font-size: 1.1em; display: none; } .loading::after { content: ...; animation: dots 1.5s steps(4, end) infinite; } keyframes dots { 0%, 20% { content: .; } 40% { content: ..; } 60%, 100% { content: ...; } } .couplet-display { background-color: #fff8e1; border: 3px dashed #ffb74d; border-radius: 15px; padding: 35px; margin-top: 20px; text-align: center; display: none; } .couplet-line { font-size: 2.2em; font-weight: bold; margin: 20px 0; color: #2e2e2e; line-height: 1.8; font-family: KaiTi, STKaiti, serif; } .horizontal-scroll { font-size: 1.8em; color: #c62828; margin-top: 30px; padding-top: 15px; border-top: 2px solid #ffb74d; font-weight: bold; } .error-message { background-color: #ffebee; border: 2px solid #ef9a9a; color: #c62828; padding: 20px; border-radius: 10px; margin-top: 20px; display: none; font-weight: bold; } /style /head body div classcontainer h1 智能春联生成器/h1 p classsubtitle输入您的祝福关键词例如龙年、吉祥、安康、发财即可一键生成专属定制春联。/p div classinput-area input typetext idkeywordInput placeholder请输入关键词用逗号或空格分隔 button idgenerateBtn生成春联/button /div div idloadingIndicator classloading正在构思妙联请稍候/div div idcoupletResult classcouplet-display !-- 春联内容将通过JavaScript动态插入 -- div classcouplet-line idupperLine上联内容将显示在这里/div div classcouplet-line idlowerLine下联内容将显示在这里/div div classhorizontal-scroll idhorizontalScroll横批内容将显示在这里/div /div div iderrorDisplay classerror-message 哎呀生成过程中出了点小问题请稍后再试或检查网络。 /div /div script srcapp.js/script /body /html把上面这段代码保存为一个HTML文件用浏览器打开你就能看到一个具有节日氛围的春联生成器界面了。输入框和按钮都已经就位只是现在还点不动因为最关键的JavaScript逻辑我们还没写。2. 核心用JavaScript调用API界面有了现在我们来给它注入“灵魂”。核心就是当用户点击按钮时我们要做三件事获取用户输入的关键词、把它们发送给春联生成API、然后把API返回的结果展示在页面上。这里我们会用到现代前端开发中非常常用的Fetch API。2.1 理解API交互在写代码之前我们得先和提供API的后端同事或者查看API文档确认一下沟通的“暗号”。通常这类生成式API的调用方式很类似请求地址 (URL)假设我们的API地址是https://api.example.com/v1/generate/couplet请求方法 (Method)一般是POST因为我们要发送数据过去。请求头 (Headers)需要告诉服务器我们发送的数据格式是JSON所以通常要设置Content-Type: application/json。如果API需要认证可能还需要Authorization头。请求体 (Body)一个JSON对象里面包含生成所需的参数。比如很可能需要一个prompt字段它的值就是用户输入的关键词字符串。响应 (Response)API处理成功后会返回一个JSON格式的数据。里面应该包含了生成的上联、下联和横批。我们假设API的请求和响应格式如下你可以根据实际API文档进行调整请求示例{ prompt: 龙年大吉 事业兴旺 阖家安康 }响应成功示例{ success: true, data: { upper_line: 龙腾四海迎新岁, lower_line: 凤舞九州贺丰年, horizontal_scroll: 吉祥如意 } }响应失败示例{ success: false, error: 生成失败请检查输入内容。 }2.2 编写异步请求函数了解了规则我们就可以动手写代码了。我们将把主要的逻辑写在一个名为app.js的文件里并在HTML中引入它。// app.js // 等待整个HTML文档加载完毕后再执行我们的代码 document.addEventListener(DOMContentLoaded, function() { // 获取页面上的关键元素 const keywordInput document.getElementById(keywordInput); const generateBtn document.getElementById(generateBtn); const loadingIndicator document.getElementById(loadingIndicator); const coupletResult document.getElementById(coupletResult); const errorDisplay document.getElementById(errorDisplay); const upperLineEl document.getElementById(upperLine); const lowerLineEl document.getElementById(lowerLine); const horizontalScrollEl document.getElementById(horizontalScroll); // 春联生成API的端点地址 (请替换为真实的API地址) const API_ENDPOINT https://api.example.com/v1/generate/couplet; // 为生成按钮添加点击事件监听器 generateBtn.addEventListener(click, async function() { // 1. 获取并清理用户输入 const keywords keywordInput.value.trim(); if (!keywords) { alert(请输入一些关键词吧比如“平安”、“发财”、“幸福”); keywordInput.focus(); return; // 如果输入为空直接返回不执行后续操作 } // 2. 准备发送给API的数据 const requestData { prompt: keywords // 这里可以根据实际API要求添加其他参数例如 // style: traditional, // 风格 // length: 7 // 对联字数 }; // 3. 更新UI状态显示加载中隐藏结果和错误信息 setLoadingState(true); hideResult(); hideError(); try { // 4. 使用Fetch API发起异步POST请求 const response await fetch(API_ENDPOINT, { method: POST, headers: { Content-Type: application/json, // 如果需要API密钥可以在这里添加 // Authorization: Bearer YOUR_API_KEY_HERE }, body: JSON.stringify(requestData) // 将JavaScript对象转换为JSON字符串 }); // 5. 检查HTTP响应状态是否成功状态码在200-299之间 if (!response.ok) { // 如果HTTP状态码不成功抛出错误进入catch块 throw new Error(网络请求失败: ${response.status}); } // 6. 解析响应的JSON数据 const result await response.json(); // 7. 根据API返回的业务逻辑状态码或字段处理结果 if (result.success) { // 生成成功更新页面显示春联 displayCouplet(result.data); } else { // API业务逻辑失败如输入不合法显示错误信息 throw new Error(result.error || 生成内容不符合要求请尝试其他关键词。); } } catch (error) { // 8. 捕获并处理所有在try块中抛出的错误网络错误、解析错误、业务错误等 console.error(生成春联时出错:, error); showError(error.message); } finally { // 9. 无论成功或失败都隐藏加载动画 setLoadingState(false); } }); // ---------------- 辅助函数 ---------------- // 控制加载状态 function setLoadingState(isLoading) { generateBtn.disabled isLoading; loadingIndicator.style.display isLoading ? block : none; if (isLoading) { generateBtn.textContent 生成中...; } else { generateBtn.textContent 生成春联; } } // 显示生成的春联 function displayCouplet(data) { upperLineEl.textContent data.upper_line; lowerLineEl.textContent data.lower_line; horizontalScrollEl.textContent data.horizontal_scroll; coupletResult.style.display block; // 生成成功后可以稍微滚动到结果区域提升体验 coupletResult.scrollIntoView({ behavior: smooth, block: center }); } // 隐藏结果区域 function hideResult() { coupletResult.style.display none; } // 显示错误信息 function showError(message) { errorDisplay.textContent 错误${message}; errorDisplay.style.display block; } // 隐藏错误信息 function hideError() { errorDisplay.style.display none; } // 额外功能支持按回车键触发生成 keywordInput.addEventListener(keypress, function(event) { if (event.key Enter) { generateBtn.click(); // 模拟点击生成按钮 } }); });这段代码看起来有点长但结构非常清晰。它主要做了一件事把用户点击按钮后的完整流程封装了起来。从获取输入、显示加载动画、发送请求、处理响应、更新页面到错误处理形成了一个完整的闭环。try...catch...finally语句确保了无论成功还是失败页面状态都能得到妥善管理比如最后一定会隐藏加载动画。3. 增强体验与错误处理基础功能已经实现了但一个健壮又好用的应用还需要一些“润色”。这部分我们来看看如何让用户体验更丝滑以及当事情不如预期时该怎么办。3.1 改善用户交互体验首先我们可以加一些贴心的小功能输入提示与验证在用户输入时实时提示字数或格式要求。防重复提交在请求发出后、结果返回前禁用生成按钮防止用户因心急连续点击导致重复请求。空输入处理我们已经做了基础判断但提示可以更友好。键盘支持我们已经添加了回车键触发这很实用。我们在上面的代码里其实已经实现了第2、3、4点。对于第1点我们可以稍作扩展比如给输入框添加一个字数统计// 在app.js的DOMContentLoaded事件监听器内添加 keywordInput.addEventListener(input, function() { const count this.value.length; // 你可以选择在页面某个地方显示这个计数或者只是简单地在控制台输出 console.log(当前输入字数: ${count}); // 如果超过某个长度可以改变输入框边框颜色提示 if (count 50) { this.style.borderColor #ff9800; // 橙色警告 } else { this.style.borderColor #d7b98f; // 恢复原色 } });3.2 完善的错误处理机制网络请求充满了不确定性用户网络可能突然断开、API服务可能暂时不可用、返回的数据格式可能意外改变。完善的错误处理能让你的应用看起来更专业。我们的代码已经通过try...catch捕获了大部分错误但我们可以把它们分得更细给用户更明确的反馈// 替换原来的 catch 块进行更精细的错误分类 catch (error) { console.error(生成春联时出错:, error); let userFriendlyMessage 生成失败请稍后重试。; // 根据错误类型显示不同的友好提示 if (error.name TypeError error.message.includes(Failed to fetch)) { userFriendlyMessage 网络连接失败请检查您的网络设置。; } else if (error.message.includes(网络请求失败)) { userFriendlyMessage 服务器暂时无法响应 (错误码: ${error.message.match(/\d/)?.[0] || 未知}); } else if (error.message.includes(不符合要求)) { userFriendlyMessage error.message; // 直接显示API返回的业务错误 } else if (error.message.includes(Unexpected token)) { userFriendlyMessage 服务器返回了意外的数据格式。; } showError(userFriendlyMessage); }这样用户看到的就不再是生硬的“Error: Network Error”而是“网络连接失败请检查您的网络设置。”这样更容易理解的提示。3.3 结果展示与交互增强春联生成出来后我们可以让展示更有仪式感。比如添加一个“复制到剪贴板”的功能方便用户保存。首先在HTML的结果展示区域coupletResult里添加一个按钮div idcoupletResult classcouplet-display div classcouplet-line idupperLine上联内容将显示在这里/div div classcouplet-line idlowerLine下联内容将显示在这里/div div classhorizontal-scroll idhorizontalScroll横批内容将显示在这里/div !-- 新增复制按钮 -- button idcopyBtn stylemargin-top: 25px; padding: 10px 25px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; 一键复制春联 /button /div然后在app.js中为这个按钮添加功能// 在DOMContentLoaded内部获取复制按钮元素 const copyBtn document.getElementById(copyBtn); // 为复制按钮添加事件监听器 copyBtn.addEventListener(click, function() { const fullCouplet ${upperLineEl.textContent}\n${lowerLineEl.textContent}\n${horizontalScrollEl.textContent}; // 使用现代 Clipboard API navigator.clipboard.writeText(fullCouplet).then(() { // 复制成功给用户一个视觉反馈 const originalText copyBtn.textContent; copyBtn.textContent 已复制; copyBtn.style.background #2E7D32; // 2秒后恢复原状 setTimeout(() { copyBtn.textContent originalText; copyBtn.style.background #4CAF50; }, 2000); }).catch(err { console.error(复制失败: , err); alert(复制失败请手动选择文字进行复制。); }); });4. 项目总结与扩展思考走到这一步一个功能完整的在线春联生成器前端就基本完成了。从最初的一个静态页面到能够与后端API动态交互实时生成并展示内容我们串联起了前端开发中几个非常实用的知识点。用下来感觉整个项目的核心其实就是处理好“请求-等待-响应”这个异步流程。Fetch API配合async/await语法让代码读起来很顺畅像在写同步代码一样。而完善的UI状态管理加载中、成功、失败和错误处理则是提升用户体验的关键让这个小工具显得更可靠、更专业。在实际开发中你可能会遇到更多需要考虑的点。比如如果API响应比较慢你可能需要设置一个超时时间避免用户无限等待。或者你可以添加一个“历史记录”功能把用户生成过的春联保存在浏览器的本地存储里。再进一步如果生成效果不满意可以加一个“重新生成”或“微调关键词”的按钮让用户有更多控制权。这个项目虽然小但它的模式非常典型。你可以把“春联生成API”换成任何其他内容生成API比如诗词生成、故事续写、代码片段生成等等前端这套交互逻辑几乎可以复用。它很好地展示了如何将一项AI能力封装成一个对用户友好、即开即用的网页应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
