📋 今天要学什么？

• 🔄 回顾上节课的后端
• 🎯 前端如何获取后端数据
• 💻 实际代码演示
• 🚀 让数据显示在页面上

🔄 回顾上节课

🎯 我们做了什么？

• 📝 搭建了一个简单的后端
• 💾 写了一些测试内容
• 🔧 配置好了数据接口
• ✅ 后端已经可以正常工作

🤔 现在的问题

• 后端有数据，但用户看不到
• 需要在前端页面显示这些数据
• 让用户可以直接在网页上看到内容

🌟 好消息！

🎉 在Nuxt.js中超级简单

• 💡 不需要复杂的配置
• 🔧 几行代码就搞定
• 🚀 自动处理数据获取
• ✨ 页面自动更新

🎯 核心概念

• 📡 数据获取 - 从后端拿数据
• 🖼️ 数据显示 - 在页面上显示
• 🔄 自动更新 - 数据改变页面跟着变

💻 代码演示

看看有多简单

📄 基础页面结构

<template>
  <div>
    <h1>我的内容页面</h1>
    <div v-for="item in content" :key="item.id">
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

📡 获取数据的代码

<script setup>
// 从后端获取数据
const { data: content } = await $fetch('/api/content')

// 就这么简单！数据就拿到了
</script>

🔄 完整的页面代码

<template>
  <div class="container">
    <h1>📚 我的内容库</h1>
    
    <div v-if="pending">
      ⏳ 加载中...
    </div>
    
    <div v-else>
      <article v-for="item in content" :key="item.id">
        <h2>{{ item.title }}</h2>
        <p>{{ item.description }}</p>
        <small>📅 {{ item.date }}</small>
      </article>
    </div>
  </div>
</template>

<script setup>
const { data: content, pending } = await $fetch('/api/content')
</script>

🎯 代码解释

📄 模板部分 (template)

• 🏗️ 结构 - 定义页面长什么样
• 🔄 v-for - 循环显示每条数据
• 🔧 v-if - 根据条件显示不同内容
• 📝 {{ }} - 显示数据内容

⚙️ 脚本部分 (script)

• 📡 $fetch - 从后端获取数据
• ⏳ pending - 加载状态
• 💾 data - 获取到的数据
• 🔄 await - 等待数据加载完成

🚀 实际效果

👁️ 用户看到什么？

• 📚 页面标题：我的内容库
• ⏳ 加载时：显示"加载中..."
• 📄 加载完成：显示所有内容
• 🎨 每条内容包含：标题、描述、日期

✨ 自动化的好处

• 🔄 数据自动获取
• ⚡ 页面自动更新
• 🛡️ 错误自动处理
• 📱 响应式设计

🎯 核心知识点

📡 数据获取

• $fetch - Nuxt.js内置的数据获取工具
• await - 等待异步操作完成
• API路径 - 指向后端数据接口

🖼️ 数据显示

• v-for - 循环显示数据列表
• v-if - 条件显示元素
• {{ }} - 插值表达式显示数据

🔄 状态管理

• pending - 加载状态
• data - 数据内容
• error - 错误信息

💡 为什么这么简单？

🎯 Nuxt.js的魔法

• 🤖 自动处理数据获取
• ⚡ 自动优化性能
• 🛡️ 自动错误处理
• 📱 自动响应式设计

🔧 背后的工作

• 📡 网络请求优化
• 💾 数据缓存管理
• 🔄 状态自动更新
• 🛠️ 开发体验优化

🎉 总结

✅ 今天学到了

• 📡 如何从后端获取数据
• 🖼️ 如何在前端显示数据
• ⚡ Nuxt.js让这一切变得简单
• 🔄 数据和页面的自动同步

🚀 下一步

• 🎨 美化页面样式
• 📝 添加更多功能
• 🔧 处理更复杂的数据
• 🌐 发布到线上