我们继续 50 个小项目挑战!—— DadJokes
组件
仓库地址:https://github.com/SunACong/50-vue-projects
项目预览地址:https://50-vue-projects.vercel.app/
豆包翻译确实可以,冷笑话应该属于各类语言比较难理解的风格,这里豆包自动解析出了其中的含义。确实不错!!!
构建一个轻量有趣的“Dad Jokes”组件,点击按钮即可获取一个随机冷笑话,用于放松心情、提升用户体验,也适合嵌入仪表盘或侧边栏作为互动装饰组件。
写法,逻辑清晰简洁。fetch
请求公开 API(https://icanhazdadjoke.com)。ref
和基础的异步请求逻辑。
Don't Laugh Challenge
{{ joke }}
<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
类名 | 说明 |
---|---|
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'),
},
此组件非常适合嵌入到:
下一篇,我们将完成 EventKeyCodes
组件,一个可以显示用户按下的键盘按键信息!