50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Dad Jokes（冷笑话卡片）

📅 我们继续 50 个小项目挑战！—— DadJokes 组件

• 仓库地址：https://github.com/SunACong/50-vue-projects

• 项目预览地址：https://50-vue-projects.vercel.app/

豆包翻译确实可以，冷笑话应该属于各类语言比较难理解的风格，这里豆包自动解析出了其中的含义。确实不错！！！

---

😂 组件目标

构建一个轻量有趣的“Dad Jokes”组件，点击按钮即可获取一个随机冷笑话，用于放松心情、提升用户体验，也适合嵌入仪表盘或侧边栏作为互动装饰组件。

🛠️ 技术实现点

• 使用 Vue3 的 <script setup> 写法，逻辑清晰简洁。
• 使用 fetch 请求公开 API（https://icanhazdadjoke.com）。
• 使用 TailwindCSS 快速搭建居中卡片样式，提升视觉层次感。
• 使用响应式变量 ref 和基础的异步请求逻辑。

🧱 组件实现

<template><div class="flex h-screen items-center justify-center"><div class="flex w-xl flex-col items-center justify-center gap-20 rounded-2xl bg-white p-8"><h3 class="text-xl font-bold text-gray-600">Don't Laugh Challenge</h3><div id="joke" class="text-2xl">{{ joke }}</div><button class="btn bg-blue-500 hover:bg-blue-300" @click="getJoke">Get Another Joke</button></div></div>
</template>

🤖 API 说明

<script setup>
import { ref } from 'vue'const joke = ref('')async function getJoke() {const config = {headers: {Accept: 'application/json',},}try {const response = await fetch('https://icanhazdadjoke.com', config)const data = await response.json()joke.value = data.joke} catch (error) {console.error('Error fetching joke:', error)joke.value = 'Failed to load joke. Try again!'}
}// 初始化时获取第一个笑话
getJoke()
</script>

• https://icanhazdadjoke.com

  • 免费公开的 dad joke API。
  • 通过设置 Accept: application/json 头即可返回 JSON 格式。

💡 用户交互亮点

• 初次进入页面即展示一个冷笑话，避免“空白页面”冷场。
• 每次点击按钮即可刷新笑话，交互直接。
• 响应式变量自动更新视图，无需刷新页面。

🎨 TailwindCSS 样式重点

类名	说明
flex items-center justify-center	实现页面居中对齐
w-xl p-8 rounded-2xl bg-white	卡片容器样式，居中圆角白底
text-xl font-bold text-gray-600	标题样式
text-2xl	笑话正文文字
bg-blue-500 hover:bg-blue-300	按钮颜色及悬停状态

🧾 常量定义 + 组件路由建议

constants/index.js 添加组件预览常量：

export const projectList = [
{id: 10,title: 'Dad Jokes',image: 'https://50projects50days.com/img/projects-img/10-dad-jokes.png',link: 'DadJokes',},
]

router/index.js 中添加路由选项：

{path: '/DadJokes',name: 'DadJokes',component: () => import('@/projects/DadJokes.vue'),},

---

🧾总结

此组件非常适合嵌入到：

• 🎯 仪表盘（Dashboard）：增加轻松氛围
• 🧩 首页右栏 / 抽屉组件：作为彩蛋趣味功能
• 👨‍💻 项目加载页：等待时读笑话减压

---

---

👉 下一篇，我们将完成 EventKeyCodes组件，一个可以显示用户按下的键盘按键信息！🚀