# 博客/论坛集成笑话大全：用"每日一笑"降低跳出率
> 接口 341-5 · 免费 · JSON · 适用人群：站长、前端/全栈、产品经理 · 阅读时间：约 6 分钟
## 核心要点
- 用后端代理转发接口，避免把 AppKey 暴露在前端。
- "每日一笑"按天缓存一条，0 点刷新，既体验稳定又不会高频刷接口触发档位限制。
- 前端只渲染 `text`，`title` 可省略（文档标注会重复）。
## Why
门户、论坛、博客最怕用户点进来秒关——跳出率高直接影响留存与 SEO。在侧边栏或页脚放一个"每日一笑"小模块，让用户停留几秒、会心一笑，是低成本降跳出的经典做法。笑话大全免费、无需维护语料，正好适合做这个组件。
本篇给你一套可落地的"前端组件 + 后端代理"方案，重点解决两个事：**AppKey 安全**和**调用频率控制**。
## What
| 项 | 说明 |
|----|------|
| 取数方式 | 后端定时/按需调用接口，缓存到当天 |
| 前端 | 仅读缓存结果，渲染 `text` |
| 鉴权 | AppKey 只在后端使用，不进前端代码 |
| 刷新节奏 | 建议每日 0 点刷新一条（见[缓存与档位](https://www.showapi.com/guides/joke-api-cache-tier-341)） |
## How
### 步骤 1：后端代理取数（Node.js 示例）
后端持有 AppKey，调用接口并把结果缓存到当天，避免每次页面请求都打接口。
```javascript
// server.js（Node + Express 示意）
const APP_KEY = process.env.SHOWAPI_APPKEY; // 从环境变量读，切勿写死在前端
const cache = { date: null, text: null };
async function getDailyJoke() {
const today = new Date().toISOString().slice(0, 10);
if (cache.date === today && cache.text) return cache.text;
const resp = await fetch(`https://route.showapi.com/341-5?appKey=${APP_KEY}`, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
});
const data = await resp.json();
const body = data.showapi_res_body || {};
if (body.ret_code === 0) {
cache.date = today;
cache.text = body.text;
return body.text;
}
throw new Error(body.remark || "获取笑话失败");
}
app.get("/api/daily-joke", async (req, res) => {
try {
res.json({ text: await getDailyJoke() });
} catch (e) {
res.status(502).json({ error: e.message });
}
});
```
### 步骤 2：前端组件渲染
前端只消费 `/api/daily-joke`，不直接持有 AppKey。
```html
<div class="daily-joke">
<h4>每日一笑</h4>
<p id="joke-text">加载中…</p>
</div>
<script>
fetch("/api/daily-joke")
.then((r) => r.json())
.then((d) => { document.getElementById("joke-text").textContent = d.text; })
.catch(() => { document.getElementById("joke-text").textContent = "今天暂无笑话，明天再来～"; });
</script>
```
### 步骤 3：放置与样式
把组件放进侧边栏、文章页脚或首页浮窗；文案用轻松语气，避免做成硬广。
## 返回示例与解析
后端拿到的结构与[返回字段全解](https://www.showapi.com/guides/joke-api-response-fields-341)一致，前端只取 `text` 即可；失败时在 `ret_code != 0` 时回退到兜底文案。
## 进阶 / 边界
- **AppKey 绝不进前端**：用环境变量/密钥管理，前端只访问你自己的 `/api/daily-joke`。
- **按天缓存**：每天一条足够，既能稳定展示又能把接口调用压到最低，规避档位限制。
- **兜底文案**：接口异常时给一句友好提示，别让模块空白。
- **内容适宜性**：笑话内容整理自互联网，注意面向人群的适宜度（见[内容合规注意事项](https://www.showapi.com/guides/joke-api-content-tips-341)）。
## FAQ
**Q1：为什么不直接在前端 fetch 接口？**
AppKey 会暴露在前端代码里，任何人都能拿走盗用。必须用后端代理转发。
**Q2：每天只调一次够吗？多个用户会不会看到不同笑话？**
本方案按天缓存同一条，所有用户当天看到同一则，体验统一且最省调用。若想每人不同，可在后端每次调用（注意频率与档位限制）。
**Q3：缓存放哪里？**
示例用内存；生产建议放 Redis 或数据库，多实例共享，key 用日期如 `daily_joke:2026-08-31`。
**Q4：接口挂了页面会崩吗？**
不会。前端有 catch 兜底文案，后端异常返回 502，模块显示提示而非报错。
**Q5：能做"换一条"按钮吗？**
可以。按钮触发一次新的后端调用（跳过当天缓存）即可，但注意频率，避免触发档位限制。
## 相关能力 / 下一步阅读
- [笑话大全：5 分钟接入，从注册到拿到第一条笑话](https://www.showapi.com/guides/joke-api-quickstart-341)
- [免费接口也要讲边界：笑话大全缓存策略与档位限制应对](https://www.showapi.com/guides/joke-api-cache-tier-341)
- [用笑话内容做引流：笑话大全合规与阅读体验注意事项](https://www.showapi.com/guides/joke-api-content-tips-341)
- **本系列共 10 篇**：查看[笑话大全 API 指南总目录](https://www.showapi.com/guides/joke-api-guides-341)
